其他分享
首页 > 其他分享> > css初步学习笔记

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入门教程,做了图整理了看到的知识,希望之后学的时候更有条理​

 

标签:浮动,after,父级,clearfix,元素,笔记,初步,hidden,css
来源: https://www.cnblogs.com/longlongsmile/p/15781966.html