DDR爱好者之家

css 盒模型 文档流 几种清除浮动的方法实例详解
站长资源 2024/11/23 佚名
77 1538
DDR爱好者之家 Design By 杰米

盒模型

1、box-sizing: content-box 是普通的默认的一种盒子表现模式      盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode  

2、box-sizing:border-box 以盒子边框为界 自己管理里面的元素     border-box  盒子大小为 width    就是说  padding 和 border 是包含到width里面的

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内(inset)/外阴影；

文档流

普通流（标准流）浮动定位

浮动

浮动出现:解决文字环绕的效果后来发现浮动可以做很多事浮动会脱离标准流 不会占有原来的位置浮动 是找的离他最近的父元素浮动的对齐方式是顶部对齐  浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。浮：    加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。漏：    加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。特：    特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。

 清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

我们有时候不方便给父盒子高度 或者不知道父盒子的高度 这个时候就需要清除浮动

怎么去清除浮动?

    clear:both 同时清除左右两侧浮动的影响  

1.给父盒子设置高度  

*2.额外标签法 : 添加一个额外的标签  clear:both   起到分离上部分和下部分的作用          影响了本身html结构  

3.给父盒子一个display:table  但是有缺陷  建议 不要使用  

*4.overflower:hidden  溢出隐藏  

*5.

 .father:after {
        content: ".";/* 这里不建议大家使用"" */
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      }

6. *zoom:1;处理ie6以下的版本兼容问题​  

*7.双伪元素清除浮动

  .clearfix:before,.clearfix:after { 
          content:".";
          display:table;
        }
        .clearfix:after {
         clear:both;
        }
        .clearfix {
          *zoom:1;
        }

总结

以上所述是小编给大家介绍的css 盒模型 文档流 几种清除浮动的方法实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！  

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米