css初步学习笔记

一、五个问题

（注：此五个问题的解决方案皆出于b站黑马前端视频）

1.块级元素如何居中

（1）为该元素设置width

（2）使该元素左右margin的值为auto

2.内联元素如何居中

答：给该元素的父元素设置样式：text-align: center;

3.嵌套块元素外边距合并导致的塌陷如何处理

塌陷：当给子元素设置上margin时，父元素一并“获得”同样的上margin。

答：

（1）为父元素定义上边框

（2）为父元素定义上内边距

（3）为父元素添加样式overflow：hidden

4.为什么清除浮动

很多情况下，父级元素不太适合设置一个固定的高度，同时在为子元素设置浮动后，影响了下面的布局

5.如何清除浮动

总体策略：闭合浮动

（1）隔墙法：在最后一个浮动的子元素后，添加一个无内容的块级标签，同时该标签应含有样式style="clear:both";

（2）为父级元素添加样式overflow:hidden;

（3）after伪元素清除

.clearfix:after {
/*clearfix是给父元素指定的class值，可以是任何名字*/
    content: "";
    dispaly: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
      /* IE6,7专有；用于照顾低版本浏览器*/
      *zoom : 1; 
}

（4）双伪元素清除

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

 

方法	优点	缺点
额外标签法(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	兼容性问题
父级双伪元素	结构语义化正确	兼容性问题

二、css整理

匆匆略过一遍MDN上的css入门教程，做了图整理了看到的知识，希望之后学的时候更有条理​

 

​