CSS进阶：盒子模型、浮动、定位、伪类、伪元素
目录
标准流：又称文档流，是浏览器在渲染网页显示网页内容时默认的一套排版规则，规定以何种方式排列元素。
常见标准流：
- 块级元素从上往下，垂直布局，独占一行
- 行内元素或行内块元素从左往右水平布局，自动换行
CSS盒子模型：
- 页面中每一个标签，网页中每一个元素都可以看作是一个“盒子”，用盒子视角进行布局
- CSS规定每个盒子分别由：内容区域（content）、内边距区域（padding，在内容和盒子边缘之间）、边框区域（border）、外边距区域（margin，两个盒子之间）构成。
- 内容区域：宽度和高度 ：width/height 数字+px
边框：
上下左右都有边框：如：border:10px solid red;线条种类 solid（实现） dashed（虚线）dotted（点线）
如果只给某个方向单独设置 如：border-left:属性值
border-width:属性值 连写四个值可以顺时针设置四个边
border会撑大盒子的尺寸，写之前需要计算。
注：超链接是行内元素，只对文本生效，要把它改成行内块。
去掉超链接下划线：text-decoration:none；
由于设置成inline-blank导致盒子之间的缝隙，可以通过给父盒子加display-table解决
设置鼠标悬停出背景/文字颜色：.类名 a:hover{背景色/文字颜色}
内边距：
padding属性后最多可以加四个值，表示设置顺时针上右下左四个内边距大小。
如果设置小于四个值：三个值：上 左右 下；两个值：上下 左右
盒子模型自动內减：加上box-sizing：border-box；（CSS3中）
外边距：
margin：同padding
清除默认内外边距：有些浏览器会自带样式。
*（通配符选择器）{margin:0;
padding:0;
}
版心：网页的有效内容。
margin：上下0；左右auto；
display属性：
display属性规定是否/如何显示元素，没有继承性。
用于定义建立布局时元素生成的显示框类型。
每个html元素都有一个默认的display值，具体取决于它的元素类型，大多数默认的display值为block（可见，显示为块级元素，前后带换行符）或inline（默认，此元素会被显示为内联元素，前后没有换行符）。
display:inline-block；将行内元素改为不换行的行内块。使盒子模型中的长宽高生效。
讲解：
隐藏元素：分为两种隐藏：display:none与visibility:hidden。
前者隐藏，实际是删除，不会占用任何空间，后者是隐藏，仍会占据空间。
布局—使用width,max-width,margin-auto
块级元素始终占用可用的全部宽度，尽可能向左和向右伸展。
将宽度指定数据，外边距设置为auto：元素占据指定宽度，并且居中显示，容器内剩余空间在两个外边距之间平均分配。
注：上述如果只用width，无法在不同大小的窗口显示，max-width可以。
CSS定位：
定义相对于其正常位置，或对于父元素，另一个元素甚至浏览器窗口本身的位置。
定位可以让元素自由摆放，一般用于盒子间的层叠
CSS有三种基本的定位机制：普通流，浮动，和绝对定位。
普通流中的元素位置由元素在HTML中的位置决定。
调整行内框可以调整水平内边距，边框，外边框间距
调整垂直内边距，边框，外边距不影响行内框高度，设置行高可以。
position属性：（定位方式）
五种不同的位置值：static,relative,fixed,absolute,sticky
如果使用top,bottom,left和right定位，没有用，不会改变元素位置：除非首先设置position属性。
static:默认下的定位方式，静态
静态定位不受top,bottom,left和right影响
格式position:static;始终根据页面正常流进行定位。
relative：相对于其原有位置进行定位
详解：如果元素有top,bottom,left和right属性，将随着这些属性进行调整，不会对其余的内容进行调整来适应空间。仍占有原来的位置并且具有标签原有的显示模式特点。
fixed：固定的，即使滚动页面，相对位置始终不变
固定定位的元素不会在页面中应放置的位置上留空隙。
absolute：绝对定位
- 先找已经定位的父级，如果有，那么以它为准进行定位。查找就近。
- 有父级，父级没有定位，以body为参照。
- 脱离标准流，不占位置。
- 具备行内块特点。
改变位置：（偏移值）分为两个方向，水平left/right和垂直top/bottom各选一个，一般选取就近原则，如果四个值都有，以left和top为准
重叠元素：对元素定位时，可以与其他元素进行重叠。元素可以设置index值正或负。
比如：在文字下显示logo：z-index:-1 其他元素没有设置z-index值时-1默认在下面。
如果两个定位元素重叠未指定index值，最后写的元素将在顶部。
父元素：直接包含子元素的
子元素：直接被父元素包含的
祖先元素：直接或间接包含后代的，父元素也是
后代元素：直接或间接被祖先元素包含的，子元素也是
兄弟元素：拥有相同父元素的互相叫兄弟元素
(2条消息) CSS第一章：4.元素关系（兄弟、祖后代关系）；关系选择器_css获取兄弟元素_你疯了抱抱我的博客-CSDN博客
注：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
浮动：
两个div改成行内块（display:inline-block）排列在一起时，会有margin，是因为在html代码里换行了
改：将div写到一行（麻烦、不方便看）/浮动解决
特点：
- 浮动元素脱离标准流，不占其位置
- 浮动比标准流高半个级别，可以覆盖标准流中的元素
- 下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动的标签是顶对齐的，参考PS图层关系
- 可以加边距改变顶对齐/浮动后的标签具备行内块特点
- 浮动可以继承，添加float:none可以取消
清除浮动：清除浮动带来的影响
因为子元素浮动后不占位置
解决：
- 可以给父级元素加高度
- 额外标签法：在父级元素内容后添加一个块级元素，给添加的块级元素设置clear:both
- 单伪元素清除法
- 双伪元素清除法
- 给父元素设置overflow:hidden
注：去掉列表符号：ul{list-style:none}
结构伪类选择器：
作用：根据元素在html中的结构关系查找元素，常用于查找父级选择器中的子元素
减少对html中类的依赖，保持代码整洁
伪元素：一般页面中的非主体内容可以使用伪元素
区别：html中的标签是元素，伪元素是由css模拟出的标签效果
种类：
::before 在父元素内容最前面添加一个伪元素
::after 在父元素内容最后面添加一个伪元素
注：必须设置content属性才能生效，伪元素默认是行内元素。
实例： .类名::before{content:’内容’;}改变元素宽高时不生效（行内元素），需要display转成行块
内容可以为空，但content必须有
总结：
1.对于结构伪类选择器的补充：
| 选择器 | 说明 |
|---|---|
| E:first-child{} | 匹配父元素中的第一个子元素，并且是E元素 |
| E:last-child{} | //最后一个 |
| E:nth-child(n) | //第n个 |
| E:nth-last-child(n) | //倒数第n个 |
| 公式 | 作用 |
|---|---|
| 2n,even | 偶数 |
| 2n+1,2n-1,odd | 奇数 |
| -n+5 | 找到前五个 |
| n+5 | 找到后五个 |
静态伪类：选择器常用于超链接（:link/:visited）
动态伪类：对于所有标签都适用（:hover/:active/:focus）
2。盒子模型：W3C标准盒子模型（box-sizing=border-box创建）与IE怪异盒子模型（box-sizing=context-box创建）。与标准盒子模型不同的是怪异盒子的总宽与总高包含盒子外边距margin。
3.浮动特性：
float崩溃特性：
在一个空白div中，如果不设置尺寸，div无高度。添加内容时，内容会把div撑起来。如果只设置高度不设置宽度，div可能会布满全屏（上一级是body）：准确地说，div布满了所在的上一级容器的宽度。高度同理。
如果浮动的子元素撑不起非浮动的父元素，就会出现崩溃。（子元素脱标，父元素在标准流中）
包裹特性：父级元素浮动时，宽度会自适应里面的内容。
3695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
