一、盒子模型
1. 构成
盒子模型由内容盒、内边距、边框和外边距构成
2. 外边距（margin）
使用方法：
1.单边外边距属性
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
2.简写属性
margin:25px 50px 75px 100px;
/*上边距为25px
右边距为50px
下边距为75px
左边距为100px*/
margin:25px 50px 75px;
/*上边距为25px
左右边距为50px
下边距为75px*/
margin:25px 50px;
/*上下边距为25px
左右边距为50px*/
margin:25px;
/*所有的4个边距都是25px*/
注意：
<body>元素的margin属性值默认为8px- 当垂直排列的两个元素外边距相遇时，浏览器会自动合并成二者中的较大值，但行内(inline)元素框、浮动框与绝对地址框不会合并
3. 内边距（padding）
使用方法与外边距相似
4. 边框（border）
（1）边框样式 border-style 属性
（2）边框颜色 border-color 属性
border-color属性用于设置边框的颜色。可以设置的颜色：
-
name - 指定颜色的名称，如 “red”
-
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
-
Hex - 指定16进制值, 如 “#ff0000”
-
还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
（3）边框宽度 border-width 属性
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
（4）简易表示法 border 属性
语法
border: border-style border-color border-width;
（5）边框圆角 border-radius 属性
语法
border-radius: length|% [[[length|%] length|%] length|%]
注意:
-
每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
-
如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
（6）图样边框 border-image 属性
语法
border-image: source slice width outset repeat|initial|inherit;
5. 盒子阴影 box-shadow 属性
语法
box-shadow: h-shadow v-shadow blur spread color inset;
6. 盒子大小 box-sizing 属性
规定容器元素的最终尺寸计算方式
语法
box-sizing: content-box|border-box|inherit:
补充：
-
如果创造了一个
<div>没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)，同时你设置 width:100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为：100px(width)+210px(padding)+2*10px(border)=140px，所以你会得到一个比你预期（100px）还要更大的容器，结果就是会破坏网页布局。（注意：容易 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。） -
如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式：br{box-sizing:border-box}），那么我们创建一个和上段中相同设置的
<div>容器时，那么他的最终宽度即为 100px, 那么它的内容部分（content）的有效宽度变成了 100px-210px-210px =60px; 所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。
总结：
-
W3C标准盒模型（content-box），border、padding 的设置会破坏元素宽高，必须得重新计算，非常麻烦（除了在IE浏览器，默认就是标准盒模型，所以可以用 box-sizing 来转换）；
-
IE（怪异）盒模型（border-box），border、padding 的设置不会影响元素的宽高，这非常实用（且因为IE盒模型不是标准，所以才有 box-sizing 这个标准属性来设置，将它标准化）【IE6/5 是怪异模型，IE7开始是标准盒模型】
7. 内容溢出处理
语法
overflow: visible|hidden|scroll|auto;
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
overflow-y: visible|hidden|scroll|auto|no-display|no-content;
8. outline 属性
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
语法
outline: outline-color, outline-style, outline-width;
outline-offset：设置轮廓框架在 border 边缘外的偏移值
9. 可调整大小 resize 属性
语法
resize: none | both | horizontal | vertical:
二、多栏布局
1. 栏数量和宽度 columns 属性
（1）栏数量 column-count 属性
语法
column-count: auto | number | initial | inherit;
auto: 默认值（单栏），但是会根据colunm-width属性值自动调整number: 栏的数量
（2）栏宽度 column-width 属性
语法
column-width: auto | number | initial | inherit;
auto: 默认值（单栏），但是会根据colunm-count属性值自动调整number: 指定栏的最佳宽度，并非绝对宽度，浏览器会根据窗口宽度调整
（3）简易表示法 columns 属性
语法
columns: auto | column-count column-width | initial | inherit;
2. 栏间距 column-gap 属性
语法
column-gap: normal | number | initial | inherit;
normal: 默认值，W3C建议为1emnumber: 指定栏间距值
3. 栏线 column-rule 属性
（1）栏线类型 column-rule-style 属性
语法
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
（2）栏线颜色 column-rule-color 属性
语法
column-rule-color: color;
color: 颜色值
（3）栏线颜色 column-rule-width 属性
语法
column-rule-width: thin | medium | thick | length;
（4）简易表示法 column-rule 属性
语法
column-rule: column-rule-width column-rule-style column-rule-color;
4. 跨栏显示 column-span 属性
语法
column-span: none | all;
none: 默认值，不跨栏显示all: 跨栏显示
5. 栏填充方式 column-fill 属性
语法
column-fill: balance | auto;
balance: 默认值，将内容平均分割auto: 填满一栏后再填充下一栏
6. 换栏和换页
（1）在之前换栏/页 break-before 属性
语法
break-before: auto | always | avoid | left | right | page | colunm | avoid-page | avoid-column;
auto: 默认值，由浏览器自动调整always: 特定位置处换栏/页avoid: 特定位置处不换栏/页left: 换页，下一页在左页right: 换页，下一页在右页page: 特定位置处换页column: 特定位置处换栏avoid-page: 特定位置处不换页avoid-column: 特定位置处不换栏
（2）在之后换栏/页 break-after 属性
语法
break-after: auto | always | avoid | left | right | page | colunm | avoid-page | avoid-column;
属性同上
（3）在元素中换栏/页 break-inside 属性
语法
break-inside: auto | avoid;
auto: 默认值，由浏览器自动调整avoid: 特定元素内不换栏/页
三、定位与网页排版
1. 区块层级与行内层级
- 区块层级(block)：在新的一行放置，常见元素：
<div><hn><p><pre> - 行内层级(inline)：在同一行放置，常见元素：
<a><img><span>
2. 盒子大小极限
语法
max-width: none | length | % | initial | inherit;
max-heigth: none | length | % | initial | inherit;
nin-width: none | length | % | initial | inherit;
min-heigth: none | length | % | initial | inherit;
3. display 属性
语法
display: none | block | inline | inline-block | ...;
4. position 属性
语法
position: absolute | fixed | relative | static | sticky | inherit | initial;
absolute: 相对于浏览器窗口左上角，窗口卷动时元素随之卷动fixed: 相对于浏览器窗口左上角，窗口卷动时元素不随之卷动relative: 相对于正常位置定位static: 以正常顺序（即HTML文件代码顺序）排序，对于区块盒子，沿竖直方向由上往下显示；对于内层级，沿水平方向从左至右显示sticky: 粘性定位的元素是依赖于用户的滚动，在position: relative与position: fixed定位之间切换
（注意：元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。）
5. float 属性
float 属性指定一个盒子（元素）是否应该浮动
注意： 绝对定位的元素忽略float属性
语法
float: none | left | rignt | inherit;
6. clear 属性
clear 属性指定段落的左侧或右侧不允许浮动的元素
语法
clear: none | left | rignt | both | inherit;
7. 叠放次序 z-index 属性
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
语法
z-index: auto | number | inherit;
8. 显示或隐藏 visibility 属性
语法
visibility: visible | hidden | collapse | inherit;
9. object-fit 属性
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等
语法
object-fit: fill | contain | cover | scale-down | none | initial | inherit;
10. 垂直对齐 vertical-align 属性
语法
vertical-align: baseline | sub | super | top | ...;
vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
四、弹性容器
1. 弹性容器声明
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
语法
display: flex | inline-flex;
flex: 将此元素声明为区块(block)层级的弹性容器inline-flex: 将此元素声明为行内(inline)层级的弹性容器
2. 版面方向 flex-direction 属性
语法
flex-direction: row | row-reverse | column | column-reverse
row：横向从左到右排列（左对齐），默认的排列方式row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面column：纵向排列column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
3. 多行排列 flex-wrap 属性
语法
flex-wrap: nowrap |wrap | wrap-reverse | initial | inherit;
nowrap: 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器wrap: 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行wrap-reverse: 反转 wrap 排列
4. 方向和行数简易表示法 flex-flow 属性
这是 flex-direction 和 flex-wrap 属性的简易表示法：
语法
flex-flow: flex-direction flex-wrap | initial | inherit;
5. 排列顺序 order 属性
默认排序按照元素在代码中出现的顺序排列，当元素设置order属性值后，排列时order较小者在前
语法
order: number | initial | inherit;
number: 默认值为0，可为正整数
6. 增加区块对象宽度 flex-grow 属性
用于设置或检索弹性盒子元素的放大比例
语法
flex-grow: number | initial | inherit;
number: 默认值为0，是相对于其他版面区块元素的放大比例
7. 缩减区块对象宽度 flex-shrink 属性
用于设置或检索弹性盒子元素的缩小比例
语法
flex-shrink: number | initial | inherit;
number: 默认值为0，是相对于其他版面区块元素的缩小比例
8. 调整前区块宽度 flex-basis 属性
用于设置或检索弹性盒伸缩基准值，即设定浮动元素的宽度
语法
flex-basis: number | auto | initial | inherit;
number: 按长度设定宽度auto: 默认值，根据内容设定宽度
9. 增减区块宽度简易表示法 flex 属性
这是 flex-grow 、flex-shrink 和 flex-basis 属性的简易表示法：
语法
flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;
auto: 相当于flex-grow: 1flex-shrink: 1flex-basis: auto
10. 横向对齐 justify-content 属性
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
语法
justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;
11. 行内纵向对齐 align-items 属性
设置或检索弹性盒子元素在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
语法
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
12. 重写 align-self 属性
align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。align-self 属性可重写该容器的 align-items 属性。
语法
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
13. 纵向对齐 align-content 属性
在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
语法
align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
3022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
