子元素浮动，父元素高度坍塌
坍塌的原因:父元素的高度是由子元素撑起来的，现在子元素浮动脱离了文档流了，就会不受文档的限制，不在文档里边占据任何空间。就使得 父元素没被撑起来而坍塌。当然父元素要是设计了height就还能显示。
解决办法：
1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。
2、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。
3、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。
4、给父元素添加 overflow：hidden；【后有详解】
5、通过伪类::after清除浮动 【后有详解】
overflow:hidden;
隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。
::after 伪类
利用伪类来清楚浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素
css选择器优先级最高到最低顺序为：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.子选择器（ul > li）
5.后代选择器（li a）
6.伪类选择（a:hover,li:nth-child）
通配符选择 *
题目1:
image.png
1、对于隐藏图片和隐藏元素的背景，Opera不会产生请求。
2、对于隐藏元素的背景，Firefox也不会产生请求。
3、对于尚未插入DOM树的img元素，Opera不会产生请求。
4、基于webkit引擎的Safari和Chrome，支持多背景图。
5、其它情景，所有主流浏览器保持一致。
css权值
image.png
权值跃迁
权值跃迁讨论的问题是，当有11个元素选择器和1个类选择器同时选中同一元素时，哪个选择器的样式会生效。
结论是：权级高的选择器的样式会生效。
理解方式1
因为权值不能跃迁，也就意味着无论有多少个0级的选择器，生效的仍然是1级选择器，因 为选择器的权级无法跃迁。
理解方式2
CSS里面的进制并不是10进制，而是256进制，所以10个低级选择器并不能等于1个高级选择器
权重计算
权重的计算方式得先得到基础的选择器的权重才能进行计算，基础选择器的权重如下：
第一等级选择器：行间样式（内联样式）
第二等级选择器：id 选择器
第三等级选择器：class 选择器，伪类选择器，属性选择器
第四等级选择器：标签选择器，伪元素选择器
通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器：权重为0。
属性选择器:
a[href][title] {color:red;}
伪类选择:
E:link
E:visited
伪元素:
p::first-line
div+css 布局 此处不详说
css 单位 此处不详说
其他
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
box-sizing :
content-box 宽度和高度分别应用到元素的内容框。
border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
inherit 规定应从父元素继承 box-sizing 属性的值。
css flex-flow：
其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：
flex-flow: <flex-direction> || <flex-wrap>
flex-direction: row（初始值） | row-reverse | column | column-reverse 定义item是横轴还是 纵轴
flex-wrap: nowrap（初始值） | wrap | wrap-reverse 定义如何换行
flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。
flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。
justify-content - 轴元素的分布方式
align-items 把整体看做一整条单轴。改变其在纵轴上的布局方式
align-content 把多行看多轴，改变其在纵轴上的布局
align-items 纵轴上如何对齐
align-content 多轴对齐的方式
ｆｌｅｘ：１ 定义元素的宽高多少，自适应
网友评论