2021寒假第二周学习总结
CSS选择器权重
计算规则
- 第一等：代表内联样式，如:
style=””，权值为1000。 - 第二等：代表ID选择器，如：
#content，权值为0100。 - 第三等：代表类，伪类和属性选择器，如
.content，权值为0010。 - 第四等：代表元素选择器和伪元素选择器，如
divp，权值为0001。 - 通配符、子选择器、相邻选择器等的。如
*、>、+,权值为0000。 - 继承的样式没有权值。
比较规则
从左往右逐个等级比较，前一等级相等才往后比（1,0,0,0 > 0,99,99,99）
1， 0 ， 0， 0
0, 99 ， 99 ， 99
注意：!important的优先级高于所有选择器
盒子模型
CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。
内容区（content）
内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，
width、height和overflow。
使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。
当overflow属性值为hidden时，溢出部分将不可见；
为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；
当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；
当为auto时，将由浏览器决定如何处理溢出部分。
内边距（padding）
CSS padding属性定义元素边框与元素内容之间的空白区域。
/*按照上、右、下、左的顺序分别设置各边的内边距
各边均可以使用不同的单位或百分比值*/
h1 {padding: 10px 0.25em 2ex 20%;}
/*按照上、左右、下的顺序分别设置各边的内边距*/
h1 {padding: 10px 0.25em 2ex;}
/*按照上下、左右的顺序分别设置各边的内边距*/
h1 {padding: 10px 0.25em;}
/*同时设置各边的内边距*/
h1 {padding: 10px;}
/*分别设置上、右、下、左内边距*/
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
边框（border）
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
/*边框的样式*/
/*这条规则为类名为 aside 的段落定义了四种边框样式：
实线上边框、点线右边框、虚线下边框和一个双线左边框。*/
p.aside {border-style: solid dotted dashed double;}
/*设置边框*/
p {border-style: solid; border-width: 5px;}
注意： 由于
border-style的默认值是none，如果没有声明样式，就相当于border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。
外边距（margin）
位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是
CSS布局的一个重要手段。
设置格式及方式同上
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 当两个垂直外边距相遇时，它们将形成一个外边距。
- 当一个元素包含在另一个元素中时，它们的上和/或下外边距也会发生合并。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
浮动（float）
所谓浮动就是让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本身是何种元素。且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
高度塌陷的问题
在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后，其会脱离文档流，将无法撑起父元素的高度，导致父元素高度丢失。
.outer{
border: 10px red solid;
}
.inner{
width: 100px;
height: 100px;
background-color: silver;
float: left;
}
效果如下：
BFC
开启BFC元素的特点：
- 不会被浮动元素所覆盖
- 子元素和父元素的外边距不会重叠
- 可以包含浮动的子元素
开启BFC的条件：
- 浮动元素，
float除none以外的值； - 定位元素，
position（absolute，fixed）； display 为以下其中之一的值 inline-block，table-cell，table-caption；overflow除了visible以外的值（hidden，auto，scroll）；
使用BFC解决高度塌陷
给outer的CSS代码中添加相应代码效果如下：
float: left;
display: inline-block;
position: absolute;
overflow: hidden;
clear属性
通过clear属性清除浮动元素对当前元素所产生的影响。
可选值：
- left：清除左侧浮动元素对当前元素所产生的影响
- right：清除右侧浮动元素对当前元素所产生的影响
- both：清除两侧浮动元素中产生较大影响的一侧
效果：
使用clear属性解决高度塌陷
.outer::after{
content:'' ;
display: block;
clear: both;
}
使用clearfix属性解决高度塌陷和外边距重叠的问题
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
效果如下（存在外边距重叠）：
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
效果如下：
定位（position）
position属性指定了元素的定位类型。
static
HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到top,bottom,left,right影响。
relative
相对定位元素的定位是相对其正常位置。
absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
<html>
absolute定位使元素的位置与文档流无关，因此不占据空间。
absolute定位的元素和其他元素重叠。
fixed
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
注意：Fixed定位在 IE7 和 IE8 下需要描述!DOCTYPE才能支持。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
文档流
所谓的文档流（
normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。
所谓脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，其他盒子在定位的时候，会当做没看到它，两者位置重叠都是可以的，但是依然在
DOM树中存在。使元素脱离文档流的情况：
float产生的浮动
使用float脱离文档流时，虽然其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。position的absolute和fixed定位。
脱离文档流的特点：
- 块元素：
- 不再独占一行
- 高度和宽度都默认被内容撑开
- 行内元素：同块元素
4971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
