css学习交流（一）

来源：互联网发布：绝地求生a卡优化补丁编辑：程序博客网时间：2024/05/21 11:07

1、CSS盒模型
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
2、CSS中盒子模型的计算方式
.box {
box-sizing: content-box / border-box;
}
content-box：一个盒子的总宽=margin+border+padding+width，即width只是指盒子中内容的宽度
border-box: 一个盒子的总宽=margin+width,即width是内容、padding、border的宽度和

3、浮动元素对父层元素带来的影响
影响：一个元素内如果包含了浮动元素，那么该元素的高度可能会变成0。

<html>  <style>   #foot_box{    border:1px solid #ddd;       }       #foot_box ul{    width:140px;     float:left;     line-height:30px;}  </style> <body> <div id="foot_box">        <ul>            <li>购物指南</li>        </ul>        <ul>            <li>配送方式</li>        </ul> </div> </body> </html>

给子元素添加浮动后，父元素div的高度变成了0
原因：浮动元素脱离了文档流，理论上讲，就不在父层容器内
解决方案:
(1)给父元素加overflow:hidden——有副作用（1宽度不够时不仅出现了水平滚动条，还出现了垂直滚动条 2对于单元格td设置尺寸或overflow:hidden不起作用,还需要table为table-layout:fixed状态才行）
(2)为父元素添加后置内容生成
.parent:after {
content: ‘ ’；
display: table;
clear: both;
}
4、子元素的margin-top/bottom的越界问题
这里写图片描述
解决方法：
(1)给父元素加border——有副作用
(2)给父元素加padding-top:1px——有副作用
(3)给父元素加overflow:hidden——有副作用
(4)为父元素添加内容生成：
.parent:before {
content: ‘ ’；
display: table;
}

0 0