关于css:前端基础知识CSS

39次阅读

共计 760 个字符，预计需要花费 2 分钟才能阅读完成。

1. 盒模型宽度计算
答：IE 浏览器默认盒模型为 border-box，其余浏览器默认盒模型为 content-box。元素的理论模型宽度和高度为 offsetWidth 和 offsetHeight。border-box 的 offsetWidth = width，
content-box 的 offsetWidth = width + padding + border。
2.margin 纵向重合问题
答：纵向排列的元素的 margin-top 和 margin-bottom 会重合，重合之后的值取其中的最大值。
解决办法：设置值时，仅设置 margin-top 或者 margin-bottom；应用 padding。
3. 父子元素中子元素设置 margin-top, 父元素会往下掉对应 margin-top 的值的问题
答：⑴. 给父元素添一个大儿子，这个大儿子必须 table。

<div class="d2">       
     <table></table>     <!-- 这里多了页面构造也不太好 -->
     <div class="d3">  
</div>

⑵应用 CSS3 伪元素::before 给父元素增加内容

.d2::before{
     content:"";
     display:table;
}

4.margin 负值问题
答：在默认定位的元素中设置 margin-top 和 margin-left 负值，元素向上，向左挪动；设置 margin-right 负值，同级右侧元素向左挪动，本身不受影响；设置 margin-bottom 负值，同级下方元素向上挪动，本身不受影响。
在相对定位的元素中设置 top 为 0 和 margin-top 为负值，元素向上挪动；设置 bottom 为 0 和 margin-bottom 为负值，元素向下挪动；设置 left 为 0 和 margin-left 为负值，元素向左挪动；设置 right 为 0 和 margin-right 为负值，元素向右挪动；

正文完