一: css三大特性: 层叠、继承、优先级
1.层叠
层叠：浏览器对多个样式叠加，最终确定结果。
层叠优先级：
- 浏览器默认样式
- 自定义浏览器样式
- 外部引用
- 内部引用
- 内联样式
- 样式冲突，遵从就近原则
- 不冲突，层叠原则
相关题目：
link与@import区别
- 标签：link是html标签，@import是css标签
- 加载：link页面加载同时加载，@import页面加载后加载
- 兼容：link无兼容性问题，@import要css2.1以上
2.继承
子元素继承父元素的属性:
text-，font-，line-,list-,这些元素开头的都可以继承，以及color等
- 文本属性 => text-align,text-indent,text-decoration,color,line-height,word-spacing,letter-spacing
- 字体属性 => font-family,font-size,font-style...
- 列表属性 => list-style,list-style-type,list-style-image
- 表格属性 => border-spacing,border-collapse,caption-side...
3.优先级
- 继承属性 => 0
- 属性选择器 => 1
- 类选择器 => 10
- id选择器 => 100
- style => 1000
- !important; => 10000
权重相同时，优先原则
相关问题:
你知道的选择器：
- id选择器
- class选择器
- 属性选择器
- 子选择器
- 后代选择器
- 通用选择器
- 相邻选择器
二. 盒子模型
1.盒子模型
- 标准盒子模型：(content)，padding，border，margin; box-sizing:content-box;
- ie盒子模型：(content，padding，border)，margin; box-sizing:border-box;
2.盒子模型的五个层次
border - content&padding - background-image - background-color - margin
3. padding&margin的用法总结：
3.1 margin
负margin:
- static元素 =>
特性1：margin-top/margin-left：负值; 会向该方向上移动 该数值;
特性2：margin-bottom/margin-right: 负值; 会将后续的元素拉进来，width:auto;时增长元素的宽度。
- float元素 =>
特性3: float 与 负margin方向相反 会减少宽度，因为元素的完全宽度等于margin，padding，border，width相加而成。
负margin应用:
- 1. 水平垂直居中(特性1)
- 2. 去除items中最后的margin(特性2)
- 3. google 按钮 (特性1)
- 4. 清除li之间(inline-block之间的空隙)
- 5. 圣杯布局/双飞翼布局(特性1)
- 6. 等高布局 父：overflow:hidden; 子： padding-bottom:500px;margin-bottom:-500px;(特性2)
- 7. tab选项卡 margin-right:-1px;margin-left:-1px;
- 8. 图片 文字 对齐 margin:0 3px -3px 0;
- 9. css sticky
.main19-item{
text-align: center;
height: 100%;
width: 100%;
overflow: auto;
display: inline-block;
}
.main19-item .detail-wrapper{
display: inline-block;
min-height: 100%;
margin-bottom: -64px;
}
.main19-item .detail-wrapper .detail-main{
/*min-height: 100%;*/
/*margin-bottom: -64px;*/
padding:0;
}
.main19-item .details-close,.main19-item .pushHeight{
height: 64px;
}
.main19-item .details-close{
font-size: 32px;
}
html
<div class="main main19">
<div class="main19-item">
<div class="detail-wrapper">
<div class="detail-main">
<p>CSS sticky</p>
<p>CSS sticky</p>
<p>margin负值是下面元素上来的方法</p>
<p>CSS sticky</p>
<p>CSS sticky</p>
<p>CSS sticky</p>
</div>
<div class="pushHeight"></div>
</div>
<div class="details-close">
<p>X</p>
</div>
</div>
<p class="page">10</p>
</div>margin：外边距重叠
- 在普通文档流中处于一个BFC中的块级盒子，在垂直方向上会产生重叠。
- 也就是position:absolute与float不为none以及inline-block不会产生外边距重叠。
3.2 padding
注意padding-top/bottom、margin-top/bottom设置百分比(%),是相对父元素width。
- 设置移动端正方形图片
height：1px;
width:100%;
padding-top:100%; =>相对父元素width,所以就为正方形了。
- 元素的竖向百分比相对于容器的高度吗？
不对。height相对容器高度，padding-top/bottom、margin-top/bottom相对容器宽度。
- CSS百分比padding实现比例固定图片自适应布局
.banner {
padding: 15.15% 0 0;
position: relative;
}
.banner > img {
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
}
三. 定位
- static 默认值
- relative 相对于元素本身定位；不脱离文档流；具有偏移属性与z-index属性；
- absolute 相对于第一个定位不为static的父元素定位，（没找到就一直向上到html）;脱离文档流；具有偏移属性与z-index;具有包裹性，跟随性，悬浮性。
- fixed 相对于窗口的特殊absolute.
文档流：
- 指语言文本从左到右，从上到下的渲染，这是html传统布局。
- float(浮动),absolute(绝对定位),fixed(固定定位)三种方式会是元素脱离文档流。
包裹性：
- 元素宽度会缩小到内容宽度。
- float,absolute(fixed),display:inline三种方式都具有包裹性。
absolute应用：
1. 隐藏元素
.hidden{
position:absolute;
top:-9999em;
}
.hidden{
position:absolute;
visibility:hidden;
}
.hidden{
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}2. 等高布局
.content => .content{overflow:hidden;position:relative;} overflow 必须
.left => .left{position:relative;float:left;}
.left_space => .left_space{position:absolute;height:999em;left:0;top:0;}
.left_content => .left_content{position:relative;z-index:1;}
.right => .right{float:right;} 高度999em的绝对定位层位于侧栏容器内，侧栏position为relative
该栏实际元素内容用一个与absolute绝对定位层为兄弟关系的标签层包裹，position为relative，z-index值1或其他
左右栏的父标签需设置overflow:hidden，同时为了兼容IE6/7，需设置position为relative
3. text-align 对absolute/float元素不起作用
核心CSS代码如下：
.sina_backtop_box { text-align: right; }
.sina_backtop { ...; position: fixed; bottom: 100px; }
HTML如下：
<div class="sina_backtop_box">
<a href="#" class="sina_backtop">返回顶部</a>
</div>
4. chrome下 js设置display:block，不会立即生效，要设置transform:translateZ(0);
5. overflow:hidden
body
height: 0; overflow: hidden;
position: absolute; /* 不会被隐藏 */
position: relative;
height: 0; overflow: hidden;
position: absolute; /* 不会被隐藏 */
height: 0; overflow: hidden; position: relative;
position: absolute; /* 会被隐藏 */
height: 0; overflow: hidden;
position: relative;
position: absolute; /* 会被隐藏 */
relative 在overflow前 不隐藏;否则隐藏。 锐欧（r-o)不隐藏。
6. fixed的父元素 有transform会导致fixed元素定位变为absolute方式。
解决方法：
- 1. 父元素 display: inline;
- 2. absolute代替fixed 同时用scrollTop 会抖动。
- 3. absolute代替fixed 父元素{height:100%;overflow:hidden;}
- 4. 我选择的方法 fiexd与absoulte切换法，向右滑动absolute子元素显示，占正常页面时fixed子元素显示。
position跟display、margin collapse、overflow、float这些特性相互叠加
- display:none; 隐藏所有；
- position:absolute/fixed；float不起作用；display具有块状属性；
- float不为none;display具有块状属性；
- margin collapse: absolute/float/inline-block不产生margin重叠
containing block:
- 根元素：padding?padding edge:viewport
- position:fixed:viewport;
- position:relative/static: 最近的block父元素的content box;
- postion:absolute:
存在父元素为block：父元素的content box;
存在父元素为inline：
direction:ltr=>包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ，右、下边是祖先元素生成的最后一个框的右、下内边距边界
direction:rtl=>包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ，左、下边是祖先元素生成的最后一个框的左、下内边距边界
z-index:
层叠顺序：（stacking level）
- background/border
- -zindex
- block
- float
- inline/inline-block
- zindex:auto/0;
- +zindex
层叠上下文：（stacking context）
- 根元素
- zindex不为auto的定位元素
- CSS3与新时代的层叠上下文
- z-index值不为auto的flex项(父元素display:flex|inline-flex).
- 元素的opacity值不是1.
- 元素的transform值不是none.
- 元素mix-blend-mode值不是normal.
- 元素的filter值不是none.
- 元素的isolation值是isolate.
- will-change指定的属性值为上面任意一个。
- 元素的-webkit-overflow-scrolling设为touch.
四.浮动
使元素向左或向右浮动，直到遇到阻挡。
设计初衷
float 最早的设计目的是用于图片，使文字能够环绕在图片周围
特点：浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间使文字环绕图片。
<div style="width:500px;overflow:hidden; _zoom:1;">
<div id="empty" style="float:right;width:1px;height:100px"></div>
<div style="float:right;clear:right;margin:20px">
<img src='' />
</div>
<p>文字</p>
</div>特性：
- 包裹性：元素宽度会缩小到元素的宽度。（float,absolute,inline-block...）
- 破坏性：脱离文档流，高度塌陷。（float,absolute）
float,absolue的区别：
- float脱离文档流，但是占据文本空间。高度塌陷可以清除。
- absolute脱离文档流，不占据文本空间。高度悬浮不可以清除。
清除浮动原理：（其实是影响）
浮动元素撑不起来高度；后面的元素（inline/inline-block）会跟随上来。
清除浮动：
- overflow:hidden;
- clear:both;
- ccdhov；
- cdc（双伪类）
// 3. ccdhov;
.clearfix:after{
content:'';
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix{
zoom:1;
}
// 4. cdc
.clear:before,.clear:after{
content:'';
display:table;
}
.clear:after{
clear:both;
}
.clear{
zoom:1;
}五. display
all：
- inline 行内元素：可以与其他元素在同一行；不能设置宽高、paddingTop/marginTop等垂直方向；具有包裹性；
- block 块状元素：另起一行；可设置宽高；width默认auto;
- inline-block 行内块状元素：可以与其他元素同行；可以设置宽高，paddingTop...；具有包裹行；
- table 相当于table标签；不可设置padding；
- table-cell 表格布局；margin失效，padding响应。
- none 隐藏元素
- flex 弹性布局
标签：
inline标签: span select strong i img input a
block标签: div p h1 ul li ol
inline-block标签: img input
空标签 br hr
应用：
- inline:
1. ie6双边距
2. inline换行
dt:before {
content: '\D\A';
white-space: pre;
}
dt:first-child:before { content: normal; }- inline-block
1. inline-block 元素间，会有空隙
1. font-size:0;
2. margin-left:-3px;
3. letter-spacing 负值
4. word-spacing 负值
5. 标签紧挨
2. 应用到列表布局 -> 优点 不豁牙漏齿的
3. text-align:center; 中心对齐-> 水平居中 text-align:justify 两端对齐布局
4.vertical-align要与inline-block/table-cell同用，才会生效。
- table-cell
1. 多行文字垂直居中
div {
width: 200px;
height: 200px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
div img {
vertical-align: middle;
}2. 左侧固定 右侧自适应
display:table-cell; *display:inline-block; width:2000px; *width:auto;
对于含有连续单词字符的元素 ->
display:table; width:100%; table-layout:fixed; word-wrap:break-word;
3. 等高布局
.list_row{display:table-row;}
.list_cell{display:table-cell; width:30%; padding:1.6%; background-color:#f5f5f5;}
/*中间一个元素背景淡蓝，有别于两边的淡灰色*/
.list_center{background-color:#f0f3f9;}- none
display:none;与visibility:hidden区别：
display:none;不占据空间,js获取不到dom；子元素无法脱离父元素显示；
visibility:hidden;占据空间，js可以获取dom；子元素可以脱离父元素显示；
- flex
display:flex/inline-flex;
六个主要属性：
flex-direction flex-wrap flex-flow justify-content align-items align-content
左边固定右边自适应时： flex：0 0 80px;即不伸缩，固定宽度80px;
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
