概述

CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS 将网页内容和显示样式进行分离，提高了显示功能。

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）

比如说，有一个样式需要在一百个页面上显示，如果是 html 来实现，那要写一百遍，现在有了 css，只要写一遍。现在，html 只提供数据和一些控件，完全交给 css 提供各种各样的样式。

重点：盒子模型、浮动、定位

CSS 的书写方式，实就是问你 CSS 的代码放在哪个位置。CSS 代码理论上的位置是任意的，但通常写在<style>标签里。

CSS 的书写方式有三种：

行内样式：在某个特定的标签里采用 style 属性。范围只针对此标签。
内嵌样式（内联样式）：在页面的 head 标签里里采用<style>标签。范围针对此页面。
外链样式：引入外部样式表 CSS 文件。这种引入方式又分为两种：
- 3.1 采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 3.2 采用 import 导入，必须写在<style>标签中。然后用类似于@import url(a.css) ;这种方式导入。

基本

背景

body{
    background-color: #fff;
    /* 颜色可以用十六进制、英文如red、rgb(,,) */
    background-image: url(路径);
    background-repeat: no-repeat/repeat-x/repeat-y;
    /* 一般是repeat-x */
    background-position: 0 0;
    /* 两个值，可以是top left也可以是数字px也可以是百分比 */

}

文本

h1{
    color: aliceblue;
    text-align: center/left/right/justify;
    /* 文本对齐方式，justify是等宽对齐 */
    text-decoration: none;
    /* 去除下划线 */
    text-transform: capitalize/uppercase/lowercase;
    /* 文本转化,capitalize是首字母大写 */
    text-indent: 0%;
    /* 缩进 */
    
}

字体

body{
    font-family: 'Courier New', Courier, monospace;
    /* 后面是预备选项 */
    font-style: normal/italic;
    /* 字体样式 */
    font-size: 0%;
    /* 默认16px, em=px/16,通过em成倍扩大缩小 */
}

链接

列表

ul{
    list-style-image: url('a.gif')
    /* 用图像作为列表项标记 */
}

css

h1,h2,h3,h4,h5,h6 {
    color: green;
}
/*外部样式；内部样式；内联样式*/
/*CSS基础*/
body  {
    font-family: Verdana, sans-serif;
}

td, ul, ol, ul, li, dl, dt, dd  {
    font-family: Verdana, sans-serif;
}

p  {
    font-family: Times, "Times New Roman", serif;
}
li strong {
    font-style: italic;
    font-weight: normal;
}
#red {color:red;}
#green {color:green;}
#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
}
div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
}
.center {text-align: center}
td.fancy {
    color: #f60;
    background: #666;
}
[title=W3School]
{
    border:5px solid blue;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
    font-family: Verdana, Arial;
}


/*背景*/
p {background-color: gray;}
/*背景图片*/
body {background-image: url(/i/eg_bg_04.gif);}
/*背景定位*/
body{
    background-image: any.jpg;
    background-position: top;
    background-position:50% 50%;
    background-position:50px 100px;
}

/*文本*/
/*缩进*/
p {text-indent: 5em;}

MDN CSS

CSS选择器

类型选择器	`h1 { }`	类型选择器
通配选择器	`* { }`	通配选择器
类选择器	`.box { }`	类选择器
ID 选择器	`#unique { }`	ID 选择器
标签属性选择器	`a[title] { }`	标签属性选择器
伪类选择器	`p:first-child { }`	伪类
伪元素选择器	`p::first-line { }`	伪元素
后代选择器	`article p` 不仅子代，可隔很多代	后代运算符
子代选择器	`article > p`	子代选择器
相邻兄弟选择器	`h1 + p` 他俩是兄弟，共用父亲	相邻兄弟
通用兄弟选择器	`h1 ~ p`	通用兄弟

元素选择器

文档的元素就是最基本的选择器。根据html元素标签，比如body, h1, p等

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

选择器分组多选逗号

逗号相隔，表示or

以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

类选择器

根据html class

如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：

<h1 class="important">
This heading is very important.
</h1>


.important {color:red;}

也可结合通配选择器：

*.important {color:red;}

*表示文档中所有元素，是选择器分组中的

ID 选择器

根据html id

<p id="intro">This is a paragraph of introduction.</p>
#intro {font-weight:bold;}

伪类与伪元素

这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：

a:hover { }

Copy to Clipboard

它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。

p::first-line { }

基于状态比如超链接

超链接的四种状态

link:链接平常的状态
active:链接被按下的时候
visited:链接被访问过之后
hover:鼠标放到链接上的时候

a:link {
    color: pink;
}

a:visited {
    color: green;
}

a:hover {
    text-decoration: none;
}
    

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

后代选择器空格

（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

子元素选择器 >

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

相邻兄弟选择器 +

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

注意选的是p.

@规则

@import, 告诉 CSS 引擎引入一个外部样式表。

例如，要将额外的样式表导入主 CSS 样式表，可以使用 @import:

@import 'styles2.css';

嵌套 @规则，是嵌套语句的子集，不仅可以作为样式表里的一个语句，也可以用在条件规则组里：

@media, 如果满足媒介查询的条件则条件规则组里的规则生效。

在下面的 CSS 中，我们将给 <body> 元素一个粉红色的背景色。但是，我们随后使用 @media 创建样式表的一个部分，该部分仅适用于视口大于 30em 的浏览器。如果浏览器的宽度大于 30em，则背景色将为蓝色。

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

速记属性

一些属性，如 font, background, padding, border, and margin 等属性称为速记属性–这是因为它们允许您在一行中设置多个属性值，从而节省时间并使代码更整洁。

padding: 10px 15px 15px 5px;

这四行代码是等价的：

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

这一行：

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

与这五行代码是等价的：

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

padding有四个方向

小属性的写法：

	padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 100px;

综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

padding:30px 20px 40px 100px;

如果写了四个值，则顺序为：上、右、下、左。

如果只写了三个值，则顺序为：上、右和左、下。

如果只写了两个值，则顺序为：上和下、左和右。

比如说：

padding: 30px 40px;

则顺序等价于：30px 40px 30px 40px;

要懂得，用小属性层叠大属性。比如：

padding: 20px;
padding-left: 30px;

层叠与继承

样式表层叠——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：

一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些。
一个类选择器稍微具体点，则会选择该页面中有特定 class 属性值的元素，所以它的优先级就要高一点。

一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：

ID：选择器中包含 ID 选择器则百位得一分。
类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
元素：选择器中包含元素、伪元素选择器则个位得一分。

另外

内联样式，即 style 属性内的样式声明，优先于所有普通的样式，无论其优先级如何。这样的声明没有选择器，但它们的优先级可以理解为 1-0-0-0；即无论选择器中有多少个 ID，它总是比其它任何优先级的权重都要高。

有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用——!important。用于修改特定属性的值，能够覆盖普通规则的层叠。

补充：

如果没有选中的，则若第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）
1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

class和id的区别

class用于css的，id用于js的。

1）class页面上可以重复。id页面上唯一，不能重复。 2）一个标签可以有多个class，用空格隔开。但是id只能有id。

同一个标签，携带了多个类名，有冲突：

这里需要补充两种冲突的情况：

1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：定义的样式表中，谁最近，就用谁。
2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。

继承

在默认情况下，一些 css 属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。

继承也需要在上下文中去理解——一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。

CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。

inherit
设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
initial
将应用于选定元素的属性值设置为该属性的初始值。
revert (en-US)
将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer (en-US)
将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
unset
将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

补充

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。

盒模型

块级盒子（Block box）和内联盒子（Inline box）

在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为：

一个被定义成块级的（block）盒子会表现出以下行为：

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽。 默认的，一个块级元素的内容宽度是其父元素的 100%，其高度与其内容高度一致。内联元素的 height width 与内容一致。
每个盒子都会换行
width 和 height 属性可以发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题 (<h1>等) 和段落 (<p>) 默认情况下都是块级的盒子。

如果一个盒子对外显示为 inline，那么他的行为如下：

盒子不会产生换行。
width 和 height 属性将不起作用。内联元素的 height width 与内容一致。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
排列时只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。

所以span后面再接个div，会两行，因为div会换行。后面div被个span套着也会两行。

块级盒子盒模型的各个部分

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content

CSS 中组成一个块级盒子需要：

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height. 内容的宽度、高度（不是盒子的宽度、高度）。在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。这个IE模型不一样，忽略IE模型
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

如下图：

Diagram of the box model

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。

备注： margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到 margin。

以上是标准模型的计算，也是浏览器默认规则，替代模型不常用，但如果看到 box-sizing: border-box; 就需要知道它是替代模型了，替代模型里长宽不算padding和border

外边距

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。

外边距折叠

理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。

有许多规则规定了什么时候外边距会折叠，什么时候不会折叠。相关更多信息，请参阅外边距重叠。现在首先要记住的事情是，外边距会折叠这个事情。如果你用外边距创建空间而没有得到你想要的效果，那这可能就是这个原因。

标准文档流中，竖直方向的margin不叠加，取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。

内边距

内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是 0 或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。

内联盒子

记住下面就行了，效果可参考推不开就代表有重叠。

width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

使用 display: inline-block

display 有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用：您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。对外的表现是行内元素（不会独占一行）

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：

设置width 和height 属性会生效。
padding, margin, 以及border 会推开其他元素。

溢出

限制了盒子的长和宽，可能会发生文字溢出等。

overflow属性

针对溢出，可以设置盒子属性overflow: hidden 直接多余的截掉，估计也没人用。这个是加滚动条overflow: scroll

overflow: scroll 是x和y都滚动。
overflow-y: scroll 设置在y滚动

如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用overflow: auto。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。

其他解决办法

参考下面调整大小，设置min-height等

CSS 的值与单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

`in`	英寸	1in = 2.54cm = 96px
`pc`	十二点活字	1pc = 1/6th of 1in
`pt`	点	1pt = 1/72th of 1in
`px`	像素	1px = 1/96th of 1in

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。

单位	相对于
`em`	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
`ex`	字符“x”的高度
`ch`	数字“0”的宽度
`rem`	根元素的字体大小
`lh`	元素的 line-height
`vw`	视窗宽度的 1%
`vh`	视窗高度的 1%
`vmin`	视窗较小尺寸的 1%
`vmax`	视图大尺寸的 1%

px也可以理解为相对单位，比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的

所以我们先认为px是相对单位。

分辨率

经常听到分辨率这个词，分辨率又是以像素为单位的。分辨率指的是宽度上和高度上最多能显示的物理像素点个数。指的是块屏幕的像素尺寸。750X1334指的是横向有750个像素，纵向有1334个像素。屏幕尺寸指的是设备对角线的长度。

调整大小

注意使用百分比作为元素外边距（margin）或填充（padding）的单位时，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。在我们的示例中，所有的外边距或填充都是宽度的 10%。请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。

min-和 max-尺寸

除了让万物都有一个确定的大小以外，我们可以让 CSS 给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它至少有个确定的高度，你应该给它设置一个min-height属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

这在避免溢出的同时并处理变化容量的内容的时候是很有用的。

图像、媒体和表单元素

图像

如果你把一张图片放在一个盒子里，而这张图片的原始长和宽比盒子的小或大，那么这张图要么缩在盒子里，要么就从盒子里面溢出。你需要决定如何处理这样的溢出。

强制拉伸：一个常用的方法是将一张图片的 max-width 设为 100%。这将会使图片的尺寸小于等于盒子。这个技术也会对其他替换元素video等起作用。box有了宽度后，对内部image设置max-width=100%

也可以设置object-fit: contain; 让图片裁剪可以以多种方式被调整到合乎盒子的大小。示例中我们使用了值 cover 来缩小图像，同时维持了图像的原始比例。这样图像就可以充满盒子。但由于比例保持不变，图像多余的一部分将会被盒子裁切掉。

如果我们使用值 contain，图像就会被缩放到足以完整地放到盒子里面的大小。如果它和盒子的比例不同，将会出现“开天窗”的结果。

你可能也想试试 fill 值，它可以让图像充满盒子，但是不会维持比例。

表单

在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用 body 中或者一个父元素中定义的字体，你需要向你的 CSS 中加入这条规则。

button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
}

Copy to Clipboard

文本布局

text-align 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

left: 左对齐文本。
right: 右对齐文本。
center: 居中文字
justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如 hyphens，打破一些更长的词语。

line-height 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的 1.5 倍，你可以使用这个：

line-height: 1.5;

CSS排版

传统布局方式： float+position，新布局方式: flex, grid等

弹性盒子Flexbox

Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。

参考

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素（被称之为 flex 容器（flex container）。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）

弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。

align-items 控制 flex 项在交叉轴上的位置。

默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。我们的第一个例子在默认情况下得到相等的高度的列的原因。
在上面规则中我们使用的 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。
你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。查看 align-items 了解更多。

justify-content 控制 flex 项在主轴上的位置。

默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
你也可以用 flex-end 来让 flex 项到结尾处。
center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
而我们上面用到的值 space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

Grid 布局

Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

fr这个单位可灵活地定义网格的行与列的大小。这个单位表示了可用空间的一个比例。

网格间隙gutter，grid-gap: 20px;

标准文档流

标准文档流

标准文档流的特性

（1）空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格。

（2）高矮不齐，底边对齐：

（3）自动换行，一行写不满，换行写。

浮动float

浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。

浮动的元素脱离了正常文档流，紧随其后的元素排布在它的“后方”。后面元素不能设置margin推开它。

性质： 参考

性质1：浮动的元素脱标脱离标准流，相当于float的单独有一个流。 span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。
性质2：浮动的元素互相贴靠
性质3：浮动的元素有“字围”效果 标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。
性质4：收缩收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

一个父亲是不能被浮动的儿子撑出高度的。

清除浮动

一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响，我们需要停止它；这是通过添加 clear 属性实现的。

clear 属性接受下列值：

left：停止任何活动的左浮动
right：停止任何活动的右浮动
both：停止任何活动的左右浮动

定位技术

定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另一个位置。定位 (positioning) 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。

有一些非常有用的技术在特定的布局下依赖于position属性。同时，理解定位 (positioning) 也能够帮助你理解正常布局流 (normal flow)，理解把一个元素移出正常布局流 (normal flow) 是怎么一回事。

有五种主要的定位类型需要我们了解：

静态定位（Static positioning）是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
相对定位（Relative positioning）允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计（design pinpointing）非常有用。相对原来位置没移出布局流
绝对定位（Absolute positioning）将元素完全从页面的正常布局流（normal layout flow）中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <html> 元素边缘固定，或者相对于该元素的最近被定位祖先元素（nearest positioned ancestor element）。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。相对html边缘。
- 绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
- 一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
固定定位（Fixed positioning）与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。相对屏幕
粘性定位（Sticky positioning）是一种新的定位方式，它会让元素先保持和 position: static 一样的定位，当它的相对视口位置（offset from the viewport）达到某一个预设值时，它就会像 position: fixed 一样定位。

参考

千古

为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除。

如何让单行文本垂直居中

小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。这个很好理解。

如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：

或者使用vertical-align: middle; 属性

vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。

color是字体颜色。

background-color将填充所有border以内的区域。

margin相关

margin塌陷/margin重叠

标准文档流中，竖直方向的margin不叠加，取较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。

盒子居中`margin:0 auto;`

margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了：

margin-left: auto;
margin-right: auto;

盒子居中的简写为：

margin:0 auto;

对上方代码的理解：上下的margin为0，左右的margin都尽可能的大，于是就居中了。

注意：

（1）只有标准流的盒子，才能使用margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
（2）使用margin:0 auto;的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的width，那么它的width就是霸占整行，没有意义）
（3）margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;

善于使用父亲的padding，而不是儿子的margin

如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。

margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。

所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。

CSS3

CSS3在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

如何让一个元素水平垂直居中？

如何让一个元素水平垂直居中？

水平居中可以直接margin auto即可。垂直这样不行。

在要居中元素不知道长宽下，使垂直和水平都居中。可以使用absolute定位 + top,left 50% + transform -50%。如下

如果知道长宽，可以搭配margin，但一般都不知道高度的，宽度可以限定，不常用不推荐此方法。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .father {
        position: relative;
        min-height: 500px;
        background: pink;
      }
      .son {
        position: absolute;
        background: red;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son">
				 AAAA
      </div>
    </div>
    <script></script>
  </body>
</html>

CSS笔记

概述

基本

背景

文本

字体

链接

列表

css