H5+C3布局相关.md

渐变

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background: linear-gradient(direction, color-stop1, color-stop2,...);

径向渐变（Radial Gradients）- 由它们的中心定义

background: radial-gradient(center, shape size, start-color,...,last-color);

变形

2D新转换属性

以下列出了所有的转换属性:

Property	描述	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置

2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

3D转换属性

下表列出了所有的转换属性：

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

过渡

过渡属性

所有的过渡属性:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

div
{
transition-property: width;
transition-duration:1s;
transition-timing-function: linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

盒模型

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

resize：none | both | horizontal | vertical | inherit
box-sizing: content-box | border-box | inherit
outline:outline-color outline-style outline-width outine-offset

resize属性指定一个元素是否应该由用户去调整大小。

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

CSS3伸缩布局盒模型(弹性盒)

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子中常用到的属性:

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

flex

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

**注意：**如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

默认值：	0 1 auto
继承：	否
可动画化：	是，参见个别的属性。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.flex="1"尝试一下

CSS 语法

flex: *flex-grow* *flex-shrink* *flex-basis*|auto|initial|inherit;

属性值

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

媒体查询

设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参数解释：

**width = device-width：**宽度等于当前设备的宽度
**initial-scale：**初始的缩放比例（默认设置为1.0）
**minimum-scale：**允许用户缩放到的最小比例（默认设置为1.0）
**maximum-scale：**允许用户缩放到的最大比例（默认设置为1.0）
**user-scalable：**用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

设置文档模式

IE的文档模式永远都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不过我最近又发现了一个更给力的写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。

进入CSS3 Media写法

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

这个应该算是一个media的一个标准写法，CSS代码：当页面小于960px的时候执行它下面的CSS.

应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){
    body{
        background: #000;
    }
}

回归CSS3 Media

等于960px尺寸的代码：

@media screen and (max-device-width:960px){
	body{
		background:red;
	}
}
@media screen and (min-width:960px){
	body{
		background:orange;
	}
}
我们还可以混合使用上面的用法：
@media screen and (min-width:960px) and (max-width:1200px){
	body{
		background:yellow;
	}
}

Media所有参数汇总

以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面是我总结的它的一些参数用法解释：

**width:**浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：检测输出的设备是网格的还是位图设备。

##盒模型

盒子模型（box model）

在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、边框（border）、外边距（margin）

标准盒模型和怪异盒模型

标准盒模型

标准盒模型（W3C盒子模型），设置的width或height是对实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin
注：除内容content外，其他为上下左右都有

怪异盒模型

怪异盒模型（IE盒子模型），设置的width或height是对实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin

box-sizing的应用

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。（个人认为可以理解为指定盒模型的类型，即上述两种类型）

box-sizing值为content-box时：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（即标准盒模型）
box-sizing值为border-box时：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（即怪异盒模型）
box-sizing值为inherit时：规定应从父元素继承 box-sizing 属性的值。

##选择器

选择器汇总

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有元素	1
element,element	div,p	选择所有元素和元素	1
element element	div p	选择元素内的所有元素	1
element>element	div>p	选择所有父级是元素的元素	2
element+element	div+p	选择所有紧接着元素之后的元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute\|=language]	[lang\|=en]	选择一个lang属性的起始值="EN"的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个元素的第一个字母	1
:first-line	p:first-line	选择每一个元素的第一行	1
:first-child	p:first-child	指定只有当元素是其父级的第一个子级的样式。	2
:before	p:before	在每个元素之前插入内容	2
:after	p:after	在每个元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute=value*]	a[src*="44lan"]	选择每一个src属性的值包含子字符串"44lan"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素

选择器优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

不同级别

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别

同一级别中后写的会覆盖先写的样式

CSS 继承

继承：子元素继承父元素的样式，但是并不是所有属性都是默认继承的。

inherited：yes 来判断属性是否可以继承

无继承性的属性

display：规定元素应该生成的框的类型
文本属性：
- vertical-align：垂直文本对齐
- text-decoration：规定添加到文本的装饰
- text-shadow：文本阴影效果
- white-space：空白符的处理
- unicode-bidi：设置文本的方向
盒子模型的属性：

width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

有继承性的属性

字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表布局属性：list-style-type、list-style-image、list-style-position、list-style
生成内容属性：quotes
光标属性：cursor
页面样式属性：page、page-break-inside、windows、orphans
声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性

元素可见性：visibility
光标属性：cursor

内联元素可以继承的属性

字体系列属性
除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性

text-indent、text-align

position

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。
sticky	它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素的距离其父元素的距离达到 sticky 粘性定位要求时；

display

值描述

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

table

此元素会作为块级表格来显示（类似），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似），表格前后没有换行符。）。）。）。）。）。）

）
table-row-group	此元素会作为一个或多个行的分组来显示（类似
table-header-group	此元素会作为一个或多个行的分组来显示（类似
table-footer-group	此元素会作为一个或多个行的分组来显示（类似
table-row	此元素会作为一个表格行显示（类似
table-column-group	此元素会作为一个或多个列的分组来显示（类似
table-column	此元素会作为一个单元格列显示（类似
table-cell	此元素会作为一个表格单元格显示（类似	和	）
table-caption	此元素会作为一个表格标题显示（类似
inherit	规定应该从父元素继承 display 属性的值。

浮动

高度塌陷

清除浮动的方式

在父元素的最后加一个冗余元素并为其设置`clear:both`

div class="box">
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="clear"></div>
</div>

.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clear{ height:0px; clear:both; overflow: hidden;}

####采用伪元素，这里我们使用:after。添加一个类clearfix： （推荐）
在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。
该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题

<div class="box clearfix">
    <div class="div">1</div>
    <div class="div">2</div>
</div>

.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clearfix:after { 
     content:""; 
     display:table; /*采用此方法可以有效避免浏览器兼容问题*/
     clear:both;
}

CSS3新增伪类

新增伪类	作用
p:first-of-type	选择属于其父元素的首个元素的每个元素。
p:last-of-type	选择属于其父元素的最后元素的每个元素。
p:only-of-type	选择属于其父元素唯一的元素的每个元素。
p:only-child	选择属于其父元素唯一的子元素的每个元素。
p:nth-child(n)	选择属于其父元素的第n个子元素的每个元素。
p:nth-last-child(n)	选择属于其父元素的倒数第n个子元素的每个元素。
p:nth-of-type(n)	选择属于其父元素第n个元素的每个元素。
p:nth-last-of-type(n)	选择属于其父元素倒数第n个元素的每个元素。
p:last-child	选择属于其父元素最后一个子元素的每个元素。
p:empty	选择没有子元素的每个元素（包括文本节点）。
p:target	选择当前活动的元素。
:not(p)	选择非元素的每个元素。
:enabled	控制表单控件的可用状态。
:disabled	控制表单控件的禁用状态。
:checked	单选框或复选框被选中。

伪类	作用
:hover	将样式添加到鼠标悬浮的元素
:active	将样式添加到被激活的元素
:focus	将样式添加到获得焦点的元素
:link	将样式添加到未被访问过的链接
:visited	将样式添加到被访问过的链接
:first-child	将样式添加到元素的第一个子元素
:lang	定义指定的元素中使用的语言

##CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

**注释：**Internet Explorer 9 以及更早的版本，不支持 transition 属性。

**注释：**Chrome 25 以及更早的版本，需要前缀 -webkit-。

https://www.w3school.com.cn/css3/css3_transition.asp

transition属性

transform属性

BFC

不定宽高垂直水平居中

元素已知宽高垂直水平居中

布局

不定宽高垂直水平居中

元素已知宽高垂直水平居中

左侧固定右侧自适应中

两侧固定中栏自适应

右侧固定左侧自适应

版权归属：前端江太公

本文链接： https://jiangsihan.cn/archives/h5c3布局相关md

许可协议：本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

0
微信扫一扫

H5+C3布局相关.md

渐变

变形

过渡

盒模型

CSS3伸缩布局盒模型(弹性盒)

flex

CSS 语法

属性值

媒体查询

设置Meta标签

加载兼容文件JS

设置文档模式

进入CSS3 Media写法

回归CSS3 Media

Media所有参数汇总

盒子模型（box model）

标准盒模型和怪异盒模型

标准盒模型

怪异盒模型

box-sizing的应用

选择器汇总

选择器优先级

CSS 继承

无继承性的属性

有继承性的属性

所有元素可以继承的属性

内联元素可以继承的属性

块级元素可以继承的属性

position

display

浮动

清除浮动的方式

在父元素的最后加一个冗余元素并为其设置clear:both

CSS3新增伪类

transition属性

transform属性

BFC

不定宽高垂直水平居中

元素已知宽高垂直水平居中

布局

不定宽高垂直水平居中

元素已知宽高垂直水平居中

左侧固定右侧自适应中

两侧固定中栏自适应

右侧固定左侧自适应

评论区

在父元素的最后加一个冗余元素并为其设置`clear:both`