乐趣区

关于css:前端基础知识CSS

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 为负值,元素向右挪动;

退出移动版