CSS | Dream's Blog

基础

主要的部分构成：选择器和声明

是写在<head> </head>标签里的，通常在</head>上一行引入<style> </style>标签，这样，样式与内容主题分开，结构更清晰

1. 选择器

标签选择器

将某一类标签全部选择出来，统一设置样式
类选择器 (利用 class="类名"属性)

单独选一个或几个标签，实现差异化
可以给一个标签定义多个类名 (类名之间用空格分开)

语法：(不能用标签名作为类名)

.类名{
    属性1：属性值1;
    ...
}

id选择器 (使用方法和类选择器十分相似)

注：在每个html文件中，id选择器只能调用一次！

语法：

#id名 {
    属性1：属性值1;
    ...
}

通配符选择器 (选择所有标签)

不需要调用，会自动给所有的元素使用样式

语法：

* {
    属性1：属性值1;
    ...
}

2. 字体系列

类型

使用属性font-famliy: '微软雅黑 (Microsoft Yahei)'; # 常用

通常为<body>标签使用该属性，指定整个页面的文字，在其中写多个字体会有较好的兼容性（先后读取）
大小

使用属性font-size: 20px; # 示例(谷歌文字大小默认为16px)
粗细

使用属性font-weight: normal(默认)/bold(粗体)/bolder(特粗体)/lighter(细体)/number(自定义100-900);

eg.

...
<style>
    .num {
        <!-- 这里不要单位,正常文字为 400，加粗为 700-->
        font-weight: 700;
    }
</style>
...

...
<p class="num">Hello,world!</p>
...

样式

使用属性font-style: normal/italic(斜体);
复合属性

可以省略不需要的属性，但必须保留font-size和font-famliy属性

eg.

body {
    <!-- font: font-style font-weight font-size/line-height font-famliy (顺序不可颠倒)-->
    italic 700 16px 'Microsoft Yahei';
}

3. 文本

对齐文本

属性text-align: center/left/right; # 水平对齐，且默认居左对齐
装饰文本

属性text-decoration: none(默认)/underline(下划线)/line-through(删除线)/overline(上划线);
一般用none取消链接的下划线，即：a {text-decoration: none;}
文本缩进 (通常是段落首行缩进)

属性text-indent: 32px/2em;
这样缩进的长度很难确定，可以用另一个相对单位 em，即：当前元素 1个文字的大小
行间距 (包含文本高度、上间距和下间距)
属性text-height: 26px;

4. css引入方式

内部样式表：放在<style> </style>标签中
行内样式表：在元素标签内部的 style属性中定义CSS样式 (样式比较简单的时候使用)

eg.

1	<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

外部样式表：

一.先建一个.css文件 (其中只有样式，没有标签)

二.使用<link>标签引入该文件 (在<head>标签中使用)

1	<link rel="stylesheet" href="css文件路径">

5. Emmet语法

生成标签直接输入标签名按tab键即可，比如：div + tab 可以生成<div></div>
如果想生成多个相同标签，加上 * 即可，比如：div*3 可以生成3个<div>标签
如果有父子级关系的标签，可以用 >，比如：ul>li 可以生成 <ul> <li></li> </ul>
如果有兄弟关系的标签，可以用 +，比如：div+p 可以生成<div></div>和<p></p>
如果生成带有类名或 id名字的，可以直接写 .demo 或 #two

注：默认是生成<div></div>标签，也可以自己修改
        .nav+tab键 —> <div class="nav"></div>
        #two+tab键 —> <div id="two"></div>
         p.nav+tab键 —> <p class="nav"></p>

如果生成的 div类名是有顺序的，可以用自增符号 $ (从一开始自增)

例：

    <!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

如果想要生成的标签内部写内容可以用 {} 表示

例：

1 2	<!-- div{Hello,world!} --> <div>Hello,world!</div>

快速生成样式语法 (只要写开头首字母)

<!-- 这是真的强 -->
w200 ---> width: 200;
h200 ---> height: 200;
lh26 ---> line-weight: 26px;
tac ---> text-align: center;
ti2em ---> text-indent: 2em;
tdn ---> text-decoration: none;
...

6. 复合选择器

后代选择器 (选择元素2在元素1里,修改的是最后一个元素的样式)

语法：
元素1 元素2 … {样式声明}          # 元素1和元素2可以是任意基础选择器

例：ul li a {color: pink;}           # 标签选择器
       .nav li a {color: red;}        # 类选择器
子选择器 (修改的是元素2的样式)

只能选择作为某元素的最近一级子元素 # 只有2个元素

语法：
元素1 > 元素2 {样式声明}
并集选择器

选择多组标签，同时为他们定义相同的样式 # 任何形式的选择器都可以作为元素，所有元素样式都修改

语法：
元素1, 元素2, … {样式声明}
伪类选择器

链接 (为确保生效，按照该顺序声明)

a: link # 选择所有未被访问的链接

a: visited # 选择所有已被访问的链接

a: hover # 选择鼠标指针位于其上的链接

a: active # 选择活动链接 (鼠标按下未弹起的链接)

注：在实际应用中，通常只用两个声明 (平常状态和鼠标经过状态)

1 2	a {color: black; text-decoration: none;} a:hover {color: skyblue; text-decoration: underline;}

获取焦点的表单元素
input:focus

7. 元素显示

块元素：独占一行，可以设置高和宽
行元素：一行可以有多个，不可以设置高和宽
行内块元素：是行元素，但却有块元素的特点
转换为块元素：display:block;
转换为行元素：display:inline;
转换为行内块元素：display:inline-block;

实例

<!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>
        a {
            display: block;
            color: white;
            font-style: 14px;
            width: 230px;
            height: 40px;
            /* 设置背景颜色的透明度 */
            background-color: rgba(69, 71, 71, 0.8);
            text-decoration: none;
            text-indent: 2em;
            /* 小技巧：让行高等于盒子高可以让文字在盒子中垂直居中 */
            line-height: 40px;
        }
        
        a:hover {
            background-color: orange;
        }
        
        div {
            /* background也有复合写法 */
            /* background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置 */
            /* 背景图片会压住背景颜色 */
            background-color: pink;
            /* 宽度默认是与其父标签宽度相同，此处div父标签为body */
            height: 800px;
            /* 默认图片是会平铺的 */
            background-image: url(http://pic.netbian.com/uploads/allimg/210122/195550-1611316550d711.jpg);
            /* 可以设置沿着x轴或y轴平铺 */
            background-repeat: no-repeat;
            /* 可以更好的控制图片的位置(x y)，x、y可以是方位名词，也可以是像素值，也可以混用 */
            /* 若只写一个方位名词，则另一个默认为居中 */
            background-position: center center;
            /* 背景图像可以设置是滚动(scroll<默认>)还是固定(fixed) */
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
    <br>
    <div></div>
</body>

</html>

8. 三大特性

层叠性

若样式出现冲突，遵循就近原则，即：哪个样式离结构(body)近，就执行哪个样式
样式不冲突则不会重叠
继承性

子标签会继承父标签的某些样式，如文本颜色和字号 (text- 、font-、line-、color 可继承)
下例中给 div定义了样式，由于 p为其子标签，所以会继承 div的样式

eg.
div {color: pink; font-size: 16px;}

<div><p>...</p></div>

行高的继承 (line-height)
行高可以跟单位也可以不跟单位

优先级

选择器相同，则执行层叠行
选择器不同，根据权重 # 不管父选择器权重多高，继承的权重为 0

选择器权重

继承或 *; 0,0,0,0

元素选择器 0,0,0,1

(伪)类选择器 0,0,1,0

id选择器 0,1,0,0

行内样式 1,0,0,0

!important 无穷大

注：!important用法： div {color: pink!important;}

a标签比较特殊，浏览器有默认样式，所以不会继承;

复合选择器会有权重叠加的问题 ( ul li {…} 其权重为：0,0,0,2 );

权重会叠加但不会进位。

9. 盒子

盒子模型

边框 (border)       # 边框在盒子外增加，会影响盒子大小

border-width: 5px;       # 边框粗细

border-style: none/ solid(实线)/ dashed(虚线)/ dotted(点线)/ double(双线边框);

border-color: pink;       # 默认黑色

简写：border: 1px solid pink; # 没有顺序

补：四条边可以分别设置 (border-top、border-right、border-left、border-bottom)

border-collapse: collapse; # 合并相邻的边框

内边距 (padding) # 文字与边框间的距离，也会影响盒子大小

有上下左右边距：-top、-bottom、-left、-right

简写：padding: 5px 10px 20px 30px;

1个值：上下左右都是5像素边距

2个值：上下是5像素边距，左右是10像素边距

3个值：上是5像素边距，左右是10像素边距，下是20边距像素

4个值：上是5像素边距，右是10像素边距，下是20px像素边距，左是30px像素边距 # 顺时针

特殊情况：若盒子本身没有指定weight/height属性，则此时 padding不会撑开盒子 (未指定weight，则水平不会撑开，height同理)

外边距 (margin) # 盒子与盒子之间的距离

也有上下左右边距：-top、-bottom、-left、-right
简写：同 padding

让块级盒子水平居中，需满足两个条件：盒子必须指定宽度; 左右外边距都设置为 auto(随机) margin: 0 auto;

使行内元素或行内块元素水平居中，给其父元素添加 text-align: center; 即可。

外边距合并 (塌陷)

(一). 当上下两个相邻的块元素相遇时，若上面的元素有下外边距，下面的元素有上外边距，则这两个元素之间的垂直距离不是上下边距之和，而是其中较大的一个边距值

(二). 对于两个嵌套的块元素，父元素有外边距同时子元素也有外边距，此时父元素会塌陷较大的外边距值

解决方案：一.为父元素定义上边框 (transparent 透明色)
二.为复原不俗定义上内边距
三.为父元素添加 overflow:hidden;

清除内外边距

网页元素很多都带有默认的内外边距，因此，在布局前，首先要清除下网页元素的内外边距

* {padding: 0; margin: 0;}
实际内容 (contend)

10. 新样式

圆角边框 (以所给数值为半径画圆，再与边框边角对比)

常见：

边角为圆弧：border-radius: 10px;

圆：border-radius: 50%; # 正方形高或宽的一半

两边为圆弧：border-radius: 矩形高的一半px;

补：若跟两个数值，则第一个为左上和右下弧度，第二个为右上和左下弧度 (对角线)
若跟四个数值，则依次为左上、右上、右下、左下 (顺时针)
可以只改一个角：border-top-left … (其它照样：先上下后左右)

盒子阴影 (不占用空间)

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

h-shadow: 必需，水平阴影的位置，允许负值

v-shadow: 必需，垂直阴影的位置，允许负值

blur: 可选，模糊距离 # 就是阴影的模糊程度

spread: 可选，阴影的尺寸

color: 可选，阴影的颜色

inset: 可选，将外部阴影改为内部阴影 # 默认为外阴影 (不能写 outset!)
文字阴影

text-shadow: h-shadow v-shadow blur color;
同盒子阴影

浮动定位

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
导航栏一般利用列表来实现 (再 <li>中放 a)

1. 浮动 (float)

语法：
选择器 { float: 属性值; }

属性值只有三个：none/ left /right
特性:
- 浮动元素会脱离标准流的控制移动到指定位置，且不再保留原先的位置，原先的位置可以放置其它盒子
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列，而且浮动的元素是相互贴靠在一起的，中间不会有缝隙，如果父级盒子装不下这些浮动的盒子，多出的盒子会另起一行对齐
- 浮动元素会具有行内块元素的特性，在浮动盒子没有设置宽度时，其宽度由其内容决定 (有浮动时，就不需要转换了)
- 浮动的盒子不会有外边距合并的问题

注：浮动的盒子只会影响后面的标准流，前面的不会；由于父盒子在许多情况下不方便给高度，但子盒子动又不占有位置，最后盒子高度为0时，就会影响面的标准流盒子，因此需要清除浮动 (清除浮动素造成的影响)，如果父盒子有高度就不需要了

语法：

选择器 {clear: 属性值;}

属性值有三个：left/ right/ both

清除浮动方法

一.额外标签法
在浮动元素末尾添加一个空的标签，例如:
<divstyle="clear: both;"></divstyle=>

新的空标签必须是块级元素！

二.父级添加 overflow属性

overflow: hidden/ auto/ scroll;

三.父级添加 :after伪元素 (以下 clearfix父元素)

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;
}

四.父级添加双伪元素

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix: after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

2. 定位

可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其它盒子

定位 = 定位模式 + 边偏移

定位模式 (position)

static # 静态定位
默认，无定位，没有边偏移

relative # 相对定位
元素移动位置时，是相对于它原来的位置来说的，移动后，原来的标准流位置继续占有(不脱标，与浮动不同)

absolute # 绝对定位
元素移动位置时，是相对于它祖先元素来说的，如果没有祖先元素或祖先元素没有定位，则以浏览器(body)为准定位；如果祖先元素有定位，则以最近的一级有定位祖先元素为参考点移动位置；移动后，原来的标准流位置不再占有(脱标，同浮动)

注：这里子盒子是可以移动到祖先元素外的，只需要定义边偏移为负数

fixed # 固定定位
以浏览器的可视窗口为参照点移动元素，不占用原先的位置

小技巧

固定在版心右侧位置：

首先，让固定定位的盒子 left: 50%; 到浏览器可视区的一半位置，再 margin-left: 版心宽度的一半距离px;

sticky # 粘性定位

以可视窗口为参照点移动，占有原先的位置，且必须添加 top/ bottom/ left/ right 其中一个才有效

口诀：子绝父相
因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置位置，则是绝对定位

边偏移

相对于其父元素偏移

top/ bottom/ left/ right: 80px;

叠放次序 (z-index)

{z-index: 1;}

默认是 auto，数值可以是任意值，数值越大，盒子越靠上；如果属性值相同，则按照书写顺序，后来居上

拓展

让定位盒子水平居中：
首先，让固定定位的盒子 left: 50%; 到浏览器可视区的一半位置，再 margin-left: -盒子宽度的一半值px;

垂直居中类似；
浮动元素、绝对定位(固定定位)元素为脱标元素，可以设置高宽；浮动元素只会压住它下面的标准流盒子，但是不会压住下面标准流盒子里面的文字和图片，但是绝对定位(固定定位)会压住下面标准流所有内容

界面

1. 元素的显示和隐藏

display

display: none;· # 隐藏对象，隐藏后不再占有原位置

display: block; # 有显示元素的意思
visibility (inherit/ visible/ collaose/ hidden)

hidden 隐藏元素后继续占有原来的位置
visible 元素可视
overflow (visible/ auto/ hidden/ scroll)

visible 默认可视
hidden 溢出的元素隐藏
scroll 显示滚动条(不管溢不溢出)
auto 溢出时显示滚动条

2. 精灵图 (sprites)

将网页中的一些小背景图像整合到一张大图中，有效减少服务器接受和发送请求的次数
是利用 background-position 移动背景图实现的，需要精确测量每个小背景图片的位置 (盒子以外的背景不会显示)

3. 字体图标 (下载后使用)

将 font文件夹放到根目录下 (此处为入门)，在css样式中声明：
把下载的文件中 style.css里面开头到 font-display: block;} 复制粘贴即可；
使用时，打开下载的文件中 demo.html，找到想使用的字体图标，复制其后面的小框框，粘贴到文本中，再在css中设置字体
font-family: 'icomoon'; (只是示例，要与声明中的保持一致)
因为是字体，所以可以设置大小、颜色等

4. 三角形制作

看代码，体会体会
盒子只定义边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形制作</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box1 {
            position: relative;
            /* 宽还是要指定的，不然就默认浏览器一样宽 */
            width: 0;
            margin: 100px auto;
            border-left: 50px solid red;
            border-top: 50px solid skyblue;
            border-right: 50px solid purple;
            border-bottom: 50px solid pink;
        }
        
        .box2 {
            width: 0;
            /* 先定义四条边为透明色 */
            border: 50px solid transparent;
            border-top-color: pink;
            margin: 0 auto;
        }
        
        .box1 .box3 {
            position: absolute;
            width: 0;
            border: 10px solid transparent;
            top: -44px;
            right: -70px;
            border-left-color: turquoise;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box3"></div>
    </div>
    <div class="box2"></div>
</body>

</html>

5. 界面样式

更改用户的鼠标样式 (cursor)

常见的有五种：

default            默认
pointer            小手
move               移动
text                  文本
not-allowed     禁止
表单轮廓

outline: 0/ none;

可以去除默认的蓝色边框 (input)
防止表单域拖拽

resize: none;

防止拖拽文本域 (textarea)
图片和文字垂直对齐

vertical-align: baseline/ top/ middle/ bottom;

注：只对行内元素和行内块元素有效

baseline        默认，元素放在父元素的基线上
top              把元素的顶端与行中最高元素的顶端对齐
middle         把元素放置在父级元素的中部
bottom         把元素的顶端与行中最低的元素的顶端对齐

小bug:
图片底部默认有一个空白缝隙，因为行内块元素会和文字的基线对齐
改变属性值即可或把图片转换为块级元素 (display: block;)

溢出文字用省略号表示

单行文本溢出显示省略号：

需满足三个条件: 1.先强制一行内显示文本 white-space: nowrap;

2.超出的部分隐藏 overflow: hidden;

3.文字用省略号代替超出的部分 text-overflow: ellipsis;

多行文本溢出显示省略号：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;     # 弹性伸缩盒子模型显示
-webkit-line-clamp: 2;    # 限制在一个块元素显的文本的行数
-webkit-box-orient: vertical;     #设置或检索伸盒子对象的子元素的排列方式

C3

1. 2D转换

移动 (translate)

沿着 X、Y轴移动，不会影响其他元素的位置，若使用百分比单位，该百分比是相对于其自身元素的，且对行内标签没有效果

语法:
transform: translate(x,y); 或分开写 transform: translateX(n); transform: translateY(n);
旋转 (rotate)

度的单位是 deg，默认旋转的中心为元素的中心点

语法:
transform: rotate(度数);

中心点：

transform-origin: x y;

默认是 (50% 50%) 即中心点，可以用方位名词 top 等
缩放 (scale)

不会影响其它盒子，也有中心点，配合 overflow: hidden; 可以实现图片放大效果 (跟博客的一样)

语法：
transform: scale(x, y); # x,y 是数字，没有单位，代表原来的倍数，y 默认与 x 一样

可以一起写： transform: translate() rotate() scale();

2. 动画

先定义动画，再使用动画

定义：

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    ...
    100% {
        width: 200px;
    }
}

使用：

div {
    ...
    animation-name: 动画名称;
    animation-duration: 持续时间;
}

属性：

@keyframes 规定动画

animation-name 动画名称

animation-duration 动画完成一个周期需要的时间

animation-timing-function 动画的速度曲线

animation-delay 动画从何时开始，默认为0

animation-iteration-count 动画被播放的次数，默认是1，无限为 infinite

animation-direction 动画是否在下一周期逆向播放，默认 normal，逆播放为 alternate

animation-play-state 动画是否正在运行或暂停 running/ pause

animation-fill-mode 动画结束后状态，保持 forwards / 回到起始 backwards (默认)

简写： animation: 动画名称持续时间运动曲线何时开始播放次数是否反向起始或结束状态; # 有默认的可以不写

3. 3D转换

3D位移 (translate3d)

需配合透视才有效果

多了一个 Z 轴：transform: translate3d(x, y, z); / transform: translateZ(n);
translateZ 后面一般跟单位 px，正方向为屏幕向外，如果没有 x,y 轴移动就写 0
3D旋转 (rotate3d)

可以沿着各种轴旋转，加透视效果更佳

transform: rotate(X/ Y/ Z)(45deg); 沿着 x/ y/ z 轴旋转 45度

transform: rotate3d(x, y, z, deg); 沿着自定义轴旋转，其中 xyz 在 0~1 范围
透视 (perspective)

透视写在被观察元素的父盒子上面，透视越小，观察元素越大，单位是 px
3D呈现 (transform-style)

控制子元素是否开启三维立体环境
代码写给父级，但影响的是子盒子

transform-style: flat; 默认，不开启

transform-style: preserve-3d; 开启

4. 浏览器私有前缀

只是为了兼容老版本的写法，了解即可

-moz-：    firefox 浏览器pera
-ms-：      ie 浏览器
-webkit-：   chrome、safari 浏览器
-o-：            Opera 浏览器

扩充

1. HTML5 新增的语义化标签

<header>: 头部标签

<nav>: 导航标签

<article>: 内容标签

<section>: 定义文档某个区域

<aside>: 侧边栏标签

<footer>: 尾部标签

新增的多媒体标签：

注：谷歌浏览器默认是禁止自动播放，需添加 muted

音频：<audio src="文件地" controls="controls"></audio>

autoplay/ controls/ loop 同 video

视频：<video src="文件地" controls="controls"></video>

属性值：

autoplay: autoplay; 视频就绪自动播放

controls: controls; 向用户显示播放控件

width/ height: ...px; 设置播放器的高宽

loop: loop; 是否循环播放

preload:autu/ none; 是否预先加载

poster: imgurl; 加载等待的画面图片

muted: muted; 静音播放

新增的 input类型

type="email/ url/ data/ time/ month/ week/ number/ tel/ search/ color"

限制输入类型

tel: 手机号码

search: 搜索框

color: 生成一个颜色选择表单

属性

required: required; # 拥有该属性表示其内容不能为空

placeholder: 提示文本; # 表单的提示信息，存在默认值时将不显示

例：input::placeholder {color: pink;} 修改字体颜色

autofocus: autofocus; # 自动聚焦属性

autocomplete: off/ on; # 为什么可以记住之前的输入，就是这个属性，默认是 on

multiple: multiple; # 可以多选文件提交

2. CSS3 新增的特性

属性选择器：

E[att]                选择具有 att 属性的 E元素
E[att=”val”]      选择具有 att 属性且属性值等于 val 的E元素
E[att^=”val”]    匹配具有 att 属性且值以 val 开头的E元素
E[att$=”val”]    匹配具有 att 属性且值以 val 结尾的E元素
E[att*=”val”]     匹配具有 att 属性且值中含有 val 的E元素

结构伪类选择器:

E:first-child           匹配父元素中第一个子元素 E; 例：ul li: first-child {color: pink;}
E:last-child            匹配父元素中最后一个子元素 E;
E:nth-child(n)        匹配父元素中第n个子元素 E;
E:first-of-type        指定类型 E 的第一个
E:last-of-child        指定类型 E 的最后一个
E:nth-of-child(n)     指定类型 E 的第 n 个

注：n 是数字；可以是关键字：even偶数，odd奇数；也可以是公式：ul li: nth-child(n) {color: pink;} 意思是从 0开始，每次加 1，往后计算，且这里必须是 n，不能是其他字母；

补：

公式
2n	偶数
2n+1	奇数
5n	5 10 …
n+5	从第5个开始
-n+5	前5个
…

伪元素选择器

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

创建一个元素，属于行内元素，必须有 contend 属性

通过 box-sizing 来指定盒模型，有两个值：content-box / border-box

box-sizing: content-box; 默认，盒子大小为 width + padding + border

box-sizing: border-box; 盒子大小为 width

其它

图片模糊处理：
filter: 函数(); 例：filter: blur(5px); blur为模糊处理，数值越大越模糊

在声明属性值时执行一些计算(加减乘除)：
calc() 例：width: calc(100% - 80px); 永远比父盒子小80像素

过渡(渐变)：
常与 hover一起使用

transition: 要过渡的属性花费时间运动曲线何时开始;

要过渡的属性：若有多个属性，利用逗号来分离，所有属性用 all
运动曲线：默认是 ease (逐渐慢下来，可以省略)
何时开始：单位是秒，可以设置延迟时间，默认是 0s (可以省略)

网站图标：
1.先制作 favicon图标 (白嫖：https://www.mi.com/favicon.ico 制作：http://www.bitbug.net)
2.favicon图标放到根目录下
3.引入favicon图标 ( <link rel="shortcut icon" href="favicon.ico"> )

移动端布局

流式布局

视口（了解）

layout viewport 布局视口
visual viewport 视觉视口
ideal viewport 理想视口（meta // 终于知道这是干啥的了）

几乎每个 html 文件都用到了这个，到底是什么意思呢

元素	作用
width	宽度，设置为 device-width 即设备宽度（理想视口）
user-scalable	用户是否可以缩放
initial-scale	初始的缩放倍数
max/minimum-scale	最大最小缩放比

二倍图
前提：在移动端显示网页时，由于手机屏幕为更清晰的显示，在本为1个像素点的空间中添加了更多的像素点(iPhone8 为例)，设置 1px 时，移动端会显示 2px，所以开发时将图片准备为需要大小的两倍，使得在移动端中照片放大也不会变模糊（多倍图同理）

background-size: 图片的宽度图片的高度;

只写一个参数, 肯定是宽度, 高度省略了, 会等比例缩放
里面的单位可以跟% , 是相对于父盒子来说的
cover 等比例拉伸，要完全覆盖div盒子，可能有部分背景图片显示不全
contain 高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了，可能有部分空白区域

注：对于精灵图来说，缩放是针对整张图片的

Flex 布局

原理
通过给父盒子添加 flex 属性，来控制盒子的位置和排列方式

注：任何一个容器都可指定为 flex 布局

父项常见属性

flex-direction: 设置主轴的方向

属性值
row	默认值，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content: 设置主轴上的子元素排列方式

属性值
flex-start	默认值，从头部开始
flex–end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

flex-wrap: 设置子元素是否换行

默认是不换行的，如果父元素装不下，会缩小子元素的宽度

属性值
nowrap	默认值，不换行
wrap	换行

align-content: 设置侧轴上的子元素的排列方式（多行,在单行下是无效的）

属性值
flex-start	默认值，在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴的中间排列
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

align-items: 设置侧轴上的子元素的排列方式（单行）

属性值
flex-start	默认值，从上到下
flex-end	从下到上
center	挤在一起居中
stretch	拉伸

flex-flow: 复合属性，相当于同时设置了 flex-direction 和 flex-wrap

子项常见属性

flex: 子项目占的份数
align-self: 控制子项自己在侧轴的排列方式
order: 属性定义子项目的排列方式 (数值越小月靠前)

补：
颜色渐变
// 方向默认为 top
background: linear-gradient(起使方向, 颜色1, 颜色2, …)
// 浏览器中必须加私有前缀
background: -webkit-linear-gradient(left, pink, skyblue)