CSS学习总结

 1.清除浮动
老生常谈的话题，面试经常问的问题
解决方法有很多种，这里讲几种
1.1 子元素加clear

复制代码代码如下:
<div class=”news”>
<p>Some Text</p>
<br class=”clear”>
</div> .news{
background: gray;
border: solid 1px black;
}
.news p{
float: right;
}
.clear{
clear: both;
}

这种方法可以扩展出很多种不同的方法，如JS动态添加，设置一个公共的类然后添加，或者直接就是一段内联style的html代码，但是原理都是用到了clear这个属性
1.2 父元素BFC化
HTML文档流是盒子模型的，BFC就是组织盒子模型的形式，当元素的类型如标签(p和span)不一样的时候，其表现出来的样子是不一样的。
所以BFC就是让这个元素看起来像盒子的一种代称，BFC全称 Box Formatting Context。CSS2.1还有IFC,即Inline Formatting Context。
BFC布局规则：
•内部的Box会在垂直方向，一个接一个地放置
•Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
•每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
•BFC的区域不会与float box重叠
•BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
•计算BFC的高度时，浮动元素也参与计算
产生BFC的条件：当然普通的块级元素默认呈现块级的样子，但是通过CSS我们可以可以让某些元素呈现BFC的形态（块级形态）
1.根元素(html元素)
2.float不为none的元素(包括left,right,inherit三个，因为float只有四个值)
3.position为absolute或fixed
4.display为inline-block,table-cell,table-caption,flex,inline-flex
5.overflow不为visible(包括hidden,scroll,auto,inherit四个值)
如下面的为在父元素加float属性使其BFC化

复制代码代码如下:
<div class=”news”>
<p>Some Text</p>
<br class=”clear”>
</div> .news{
background: gray;
border: solid 1px black;
}
.news p{
float: right;
}
.clear{
clear: both;
}

2.透明度
2.1 opacity
熟悉CSS3的应该很清楚，不就是opacity嘛。但是在那个没有支持opacity的年代又是怎么做的呢。
opacity属性设置元素的不透明级别。不会被继承，值为0.0(完全透明)到1.0(完全不透明)。
不会继承父元素的属性，但是可以设置inherit来继承父元素的值

复制代码代码如下:
p{
opacity: 0.5;