前端基础知识---CSS

Posted 2021-09-13 wisdomfree

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为负值，元素向右移动。
5.什么是BFC？
答：BFC 即 Block Formatting Contexts (块级格式化上下文)。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。
只要元素满足下面任一条件即可触发 BFC 特性：
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
6.手写clearfix

.clearfix:after{
  content: "",
  display: table;
  clear: both;
}

7.relative和absolute依据什么来定位？
答：relative依据自身来定位。absolute依据往上层查找到的最近一层的定位元素来定位。（定位元素含有absolute，relative或者fixed，如果都没有则依据body来定位）