CSS3笔记(2)——盒子模型+多栏+定位+弹性容器

2020-11-03 分类于前端作者 Amoniaa ~8.06K 字阅读次

一、盒子模型

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*/

1
2
3

margin:25px 50px;
/*上下边距为25px
  左右边距为50px*/

1 2	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` 属性

语法

1	border: border-style border-color border-width;

（5）边框圆角 `border-radius` 属性

语法

1	border-radius: length\|% [[[length\|%] length\|%] length\|%]

注意:

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

（6）图样边框 border-image 属性
语法

1	border-image: source slice width outset repeat\|initial\|inherit;

5. 盒子阴影 `box-shadow` 属性

语法

1	box-shadow: h-shadow v-shadow blur spread color inset;

6. 盒子大小 `box-sizing` 属性

规定容器元素的最终尺寸计算方式

语法

1	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. 内容溢出处理
语法

1
2
3

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（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
语法

1	outline: outline-color, outline-style, outline-width;

outline-offset：设置轮廓框架在 border 边缘外的偏移值
9. 可调整大小 resize 属性
语法
1
resize: none | both | horizontal | vertical:

二、多栏布局

1. 栏数量和宽度 `columns` 属性

（1）栏数量 `column-count` 属性

语法

1	column-count: auto \| number \| initial \| inherit;

auto: 默认值（单栏），但是会根据 colunm-width 属性值自动调整
number: 栏的数量
（2）栏宽度 column-width 属性
语法
1
column-width: auto | number | initial | inherit;
auto: 默认值（单栏），但是会根据 colunm-count 属性值自动调整
number: 指定栏的最佳宽度，并非绝对宽度，浏览器会根据窗口宽度调整

（3）简易表示法 `columns` 属性

语法

1	columns: auto \| column-count column-width \| initial \| inherit;

2. 栏间距 `column-gap` 属性

语法

1	column-gap: normal \| number \| initial \| inherit;

normal: 默认值，W3C建议为1em

number: 指定栏间距值

3. 栏线 `column-rule` 属性

（1）栏线类型 `column-rule-style` 属性

语法

1	column-rule-style: none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset;

（2）栏线颜色 `column-rule-color` 属性

语法

1	column-rule-color: color;

color: 颜色值
（3）栏线颜色 column-rule-width 属性
语法
1
column-rule-width: thin | medium | thick | length;

（4）简易表示法 `column-rule` 属性

语法

1	column-rule: column-rule-width column-rule-style column-rule-color;

4. 跨栏显示 `column-span` 属性

语法

1	column-span: none \| all;

none: 默认值，不跨栏显示
all: 跨栏显示
5. 栏填充方式 column-fill 属性
语法
1
column-fill: balance | auto;
balance: 默认值，将内容平均分割
auto: 填满一栏后再填充下一栏
6. 换栏和换页
（1）在之前换栏/页 break-before 属性
语法
1
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 属性
语法
1
break-after: auto | always | avoid | left | right | page | colunm | avoid-page | avoid-column;
属性同上
（3）在元素中换栏/页 break-inside 属性
语法
1
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` 属性

语法

1	display: none \| block \| inline \| inline-block \| ...;

4. `position` 属性

语法

1	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属性

语法

1	float: none \| left \| rignt \| inherit;

6. `clear` 属性

clear 属性指定段落的左侧或右侧不允许浮动的元素

语法

1	clear: none \| left \| rignt \| both \| inherit;

7. 叠放次序 `z-index` 属性

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

语法

1	z-index: auto \| number \| inherit;

8. 显示或隐藏 `visibility` 属性

语法

1	visibility: visible \| hidden \| collapse \| inherit;

9. `object-fit` 属性

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等

语法

1	object-fit: fill \| contain \| cover \| scale-down \| none \| initial \| inherit;

10. 垂直对齐 `vertical-align` 属性

语法

1	vertical-align: baseline \| sub \| super \| top \| ...;

vertical-align 属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

四、弹性容器

1. 弹性容器声明

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

语法

1	display: flex \| inline-flex;

flex: 将此元素声明为区块(block)层级的弹性容器
inline-flex: 将此元素声明为行内(inline)层级的弹性容器
2. 版面方向 flex-direction 属性
语法

1	flex-direction: row \| row-reverse \| column \| column-reverse

row：横向从左到右排列（左对齐），默认的排列方式
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
3. 多行排列 flex-wrap 属性
语法
1
flex-wrap: nowrap |wrap | wrap-reverse | initial | inherit;
nowrap: 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器
wrap: 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse: 反转 wrap 排列
4. 方向和行数简易表示法 flex-flow 属性
这是 flex-direction 和 flex-wrap 属性的简易表示法：

语法

1	flex-flow: flex-direction flex-wrap \| initial \| inherit;

5. 排列顺序 `order` 属性

默认排序按照元素在代码中出现的顺序排列，当元素设置order属性值后，排列时order较小者在前

语法

1	order: number \| initial \| inherit;

number: 默认值为0，可为正整数
6. 增加区块对象宽度 flex-grow 属性
用于设置或检索弹性盒子元素的放大比例

语法

1	flex-grow: number \| initial \| inherit;

number: 默认值为0，是相对于其他版面区块元素的放大比例
7. 缩减区块对象宽度 flex-shrink 属性
用于设置或检索弹性盒子元素的缩小比例

语法

1	flex-shrink: number \| initial \| inherit;

number: 默认值为0，是相对于其他版面区块元素的缩小比例
8. 调整前区块宽度 flex-basis 属性
用于设置或检索弹性盒伸缩基准值，即设定浮动元素的宽度

语法

1	flex-basis: number \| auto \| initial \| inherit;

number: 按长度设定宽度
auto: 默认值，根据内容设定宽度
9. 增减区块宽度简易表示法 flex 属性
这是 flex-grow 、flex-shrink 和 flex-basis 属性的简易表示法：

语法

1	flex: flex-grow flex-shrink flex-basis \| auto \| initial \| inherit;

auto: 相当于 flex-grow: 1 flex-shrink: 1 flex-basis: auto

10. 横向对齐 `justify-content` 属性

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

语法

1	justify-content: flex-start \| flex-end \| center \| space-between \| space-around \| initial \| inherit;

11. 行内纵向对齐 `align-items` 属性

设置或检索弹性盒子元素在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

语法

1	align-items: stretch \| center \| flex-start \| flex-end \| baseline \| initial \| inherit;

12. 重写 `align-self` 属性

align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。align-self 属性可重写该容器的 align-items 属性。

语法

1	align-self: auto \| stretch \| center \| flex-start \| flex-end \| baseline \| initial \| inherit;

13. 纵向对齐 `align-content` 属性

在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

语法

1	align-content: stretch \| center \| flex-start \| flex-end \| space-between \| space-around \| initial \| inherit;

Amoniaa

一、盒子模型

1. 构成

2. 外边距（margin）

3. 内边距（padding）

4. 边框（border）

（1）边框样式 border-style 属性

（2）边框颜色 border-color 属性

（3）边框宽度 border-width 属性

（4）简易表示法 border 属性

（5）边框圆角 border-radius 属性

（6）图样边框 border-image 属性

5. 盒子阴影 box-shadow 属性

6. 盒子大小 box-sizing 属性

7. 内容溢出处理

8. outline 属性

9. 可调整大小 resize 属性

二、多栏布局

1. 栏数量和宽度 columns 属性

（1）栏数量 column-count 属性

（2）栏宽度 column-width 属性

（3）简易表示法 columns 属性

2. 栏间距 column-gap 属性

3. 栏线 column-rule 属性

（1）栏线类型 column-rule-style 属性

（2）栏线颜色 column-rule-color 属性

（3）栏线颜色 column-rule-width 属性

（4）简易表示法 column-rule 属性

4. 跨栏显示 column-span 属性

5. 栏填充方式 column-fill 属性

6. 换栏和换页

（1）在之前换栏/页 break-before 属性

（2）在之后换栏/页 break-after 属性

（3）在元素中换栏/页 break-inside 属性

三、定位与网页排版

1. 区块层级与行内层级

2. 盒子大小极限

3. display 属性

4. position 属性

5. float 属性

6. clear 属性

7. 叠放次序 z-index 属性

8. 显示或隐藏 visibility 属性

9. object-fit 属性

10. 垂直对齐 vertical-align 属性

四、弹性容器

1. 弹性容器声明

2. 版面方向 flex-direction 属性

3. 多行排列 flex-wrap 属性

4. 方向和行数简易表示法 flex-flow 属性

5. 排列顺序 order 属性

6. 增加区块对象宽度 flex-grow 属性

7. 缩减区块对象宽度 flex-shrink 属性

8. 调整前区块宽度 flex-basis 属性

9. 增减区块宽度简易表示法 flex 属性

10. 横向对齐 justify-content 属性

11. 行内纵向对齐 align-items 属性

12. 重写 align-self 属性

13. 纵向对齐 align-content 属性

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

（1）边框样式 `border-style` 属性

（2）边框颜色 `border-color` 属性

（3）边框宽度 `border-width` 属性

（4）简易表示法 `border` 属性

（5）边框圆角 `border-radius` 属性

（6）图样边框 `border-image` 属性

5. 盒子阴影 `box-shadow` 属性

6. 盒子大小 `box-sizing` 属性

8. `outline` 属性

9. 可调整大小 `resize` 属性

1. 栏数量和宽度 `columns` 属性

（1）栏数量 `column-count` 属性

（2）栏宽度 `column-width` 属性

（3）简易表示法 `columns` 属性

2. 栏间距 `column-gap` 属性

3. 栏线 `column-rule` 属性

（1）栏线类型 `column-rule-style` 属性

（2）栏线颜色 `column-rule-color` 属性

（3）栏线颜色 `column-rule-width` 属性

（4）简易表示法 `column-rule` 属性

4. 跨栏显示 `column-span` 属性

5. 栏填充方式 `column-fill` 属性

（1）在之前换栏/页 `break-before` 属性

（2）在之后换栏/页 `break-after` 属性

（3）在元素中换栏/页 `break-inside` 属性

3. `display` 属性

4. `position` 属性

5. `float` 属性

6. `clear` 属性

7. 叠放次序 `z-index` 属性

8. 显示或隐藏 `visibility` 属性

9. `object-fit` 属性

10. 垂直对齐 `vertical-align` 属性

2. 版面方向 `flex-direction` 属性

3. 多行排列 `flex-wrap` 属性

4. 方向和行数简易表示法 `flex-flow` 属性

5. 排列顺序 `order` 属性

6. 增加区块对象宽度 `flex-grow` 属性

7. 缩减区块对象宽度 `flex-shrink` 属性

8. 调整前区块宽度 `flex-basis` 属性

9. 增减区块宽度简易表示法 `flex` 属性

10. 横向对齐 `justify-content` 属性

11. 行内纵向对齐 `align-items` 属性

12. 重写 `align-self` 属性

13. 纵向对齐 `align-content` 属性

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可