CSS学习笔记

fmk1023

已于 2022-06-02 15:26:15 修改

阅读量576

点赞数 1

分类专栏： CSS + Less + Sass 文章标签： css 学习 css3

于 2021-01-05 17:56:29 首次发布

本文链接：https://blog.csdn.net/fmk1023/article/details/112183067

版权

CSS + Less + Sass 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、CSS选择器
- 1.1 id 选择器
- 1.2 class 选择器
- 1.3 CSS 伪类
二、盒子模型
- 2.1 border
- 2.2 outline
- 2.3 margin
- 2.4 padding
三、position 定位
- 3.1 static
- 3.2 relative 相对定位
- 3.3 absolute 绝对定位
- 3.4 fixed 固定定位
- 3.5 sticky 粘性定位
四、显示模式
- 4.1 块级元素（block）
- 4.2 行内元素（inline）
- 4.3 行内块元素（ inline-block）
五、Flex布局/弹性盒子
- 5.1 Flex布局介绍
- 5.2 Flex基本概念
- 5.3 Flex容器的属性
- 5.4 Flex项目的属性
六、Grid布局
- 6.1 Flex布局介绍
- 6.2 grid-template-columns/grid-template-rows
- 6.3 grid-column-gap/grid-row-gap/grid-gap
- 6.4 justify-items/align-items
- 6.5 justify-content/align-content
- 6.6 grid-template-areas
七、移动端适配
- 7.1 响应式布局的概念
- 7.2 控制视口（viewport）
- 7.3 媒体查询@media
- 7.4 图片的自适应（fluid image）
- 7.5 自适应图片等素材
- 7.6 不使用绝对宽度
- 7.7 相对大小的字体
- 7.8 vh，vw
- 7.9 选择加载CSS
- 7.10 flex布局
八、CSS 基本属性
- 8.1 text-align
- 8.2 vertical-align
- 8.3 visibility
- 8.4 white-space
- 8.5 overflow
- 8.6 calc()数学运算
- 8.7 !important
九、CSS3属性
- 9.1 box-sizing
- 9.2 CSS3 边框
- 9.3 text-overflow
- 9.4 transform 转换
- 9.6 CSS3 动画
- - 9.6.1 CSS3 @keyframes 规则
- 9.7 box布局
十、CSS 水平&垂直居中
- 10.1 元素居中对齐-使用margin
- 10.2 元素居中对齐-使用padding
- 10.3 文本居中对齐
- 10.4 图片居中对齐-使用margin
- 10.5 使用绝对定位居中
- 10.6 垂直居中 - 使用 line-height
十一、其他知识
- 11.1 BFC是什么？有什么作用？

一、CSS选择器

1.1 id 选择器

以id属性来设置id选择器
CSS 中 id 选择器以 “#” 来定义
一个id只能指定一个元素

<p id="para1">Hello World!</p>

#para1
{
	text-align:center;
	color:red;
}

1.2 class 选择器

以class属性表示
类选择器以一个点"."号显示
class可以在多个元素中使用

<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>

.center
{
	text-align:center;
}

1.3 CSS 伪类

CSS伪类是用来添加一些选择器的特殊效果

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
a:before {} /* css3，在元素前添加内容 */
a:after {} /* css3，在元素后添加内容 */

1.3.1 伪类和CSS类

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>

1.3.2 CSS :first-child

您可以使用 :first-child 伪类来选择父元素的第一个子元素

p:first-child {}

1.3.3 CSS :before

在每个元素之前插入内容

p:before {}

1.3.4 CSS :after

在每个元素之后插入内容

p:after {}

二、盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2.1 border

CSS边框属性允许你指定一个元素边框的样式和颜色。

border:5px solid red;

2.2 outline

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline:<outline-color> | <outline-style> | <outline-width> | <inherit>

2.3 margin

CSS margin(外边距)属性定义元素周围的空间。

2.4 padding

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

三、position 定位

一些复杂多变的布局，我们可能会用到 position 布局，position 属性提供了 static、relative、absolute、fixed、sticky 等多个值。

3.1 static

position:static 为默认值，被设置了该样式的元素不会被特殊的定位

3.2 relative 相对定位

position:relative 被称为相对布局，TA 的关键点在于「相对谁」，然后通过 top、bottom、 left、 right 等属性设置元素的偏移位置。

TA 的一大特点是不会破坏默认的文档流式布局，在没有设置 top、bottom、 left、 right 等属性时表现和 position:static 为一样规规矩矩坐在自己的位置上。

既然是相对，那肯定就有参照物，而 TA 的参照物就是 TA 自己，也就是说相对 TA 自己原来的位置进行偏移。

这里需要注意，属性 top 和 bottom、left 和 right 是不能同时使用的。如果同时使用 left 和 right ，left 的优先级会更高，qright 不起作用， top 的优先级高于 bottom

适用场景：绝对定位的参考元素位置微调

3.3 absolute 绝对定位

position:absolute 被称为绝对布局，TA 的特点就是会脱离默认文档流式布局

绝对布局与相对布局不同，top、bottom、left、right 可同时设置；如果 top、bottom、 left、 right 都设置为 0，且该元素所有的父元素没有设置 position 属性时，TA 会填充满整个可视区域，如果设置了 position 属性，则填满父元素；

简单来说：父元素可通过设置 position 属性来限制子元素 position:absolute 的活动区域。

3.4 fixed 固定定位

position:fixed 称为固定布局比较好理解，TA 的特点就是把某个元素固定在「可视区域」的某个位置，就算你上下摇摆，TA 还是不会动。

主要用到的场景是一些固定在顶部的导航栏，侧边固定的滑至顶部的按钮等等。

3.5 sticky 粘性定位

position:sticky 就叫 TA 粘性布局。当滚动到某个位置时，设置了position:sticky 的元素会悬停不动

四、显示模式

4.1 块级元素（block）

块级元素的特点：

元素独占一行，在未设置宽度时，其宽度随父容器的宽度
可设置width，height，margin，padding属性
可以容纳内联元素和其他块元素

常见的块级元素有：

<h1~6>、<p>、<form>、<table>、<ul>、<ol>、<li>、<dl>、<hr>、<div>等。

用法：

dispaly:block

4.2 行内元素（inline）

行内元素的特点：

inline元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

常见的行内元素：

<a>、<span>、<img>

用法：

dispaly:inline

4.3 行内块元素（ inline-block）

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

用法：

display:inline-block

让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

五、Flex布局/弹性盒子

Flex 布局教程：语法篇 Flex 布局教程：实例篇

5.1 Flex布局介绍

Flex 布局，可以简便、完整、响应式地实现各种页面布局。

display: flex;

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

5.2 Flex基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

5.3 Flex容器的属性

以下6个属性设置在容器上。

➤flex-direction

➤flex-wrap

➤flex-flow

➤justify-content

➤align-items

➤align-content

5.3.1 flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-direction: row | row-reverse | column | column-reverse;

5.3.2 flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-wrap: nowrap | wrap | wrap-reverse;

5.3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> || <flex-wrap>;

5.3.4 justify-content

justify-content属性定义了项目在主轴上的对齐方式。对齐方式与轴的方向有关。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

justify-content: flex-start | flex-end | center | space-between | space-around;

5.3.5 align-items

align-items属性定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-items: flex-start | flex-end | center |  baseline | stretch;

5.3.6 align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

align-content: flex-start | flex-end | center | space-between  | space-around | stretch;

5.4 Flex项目的属性

➤order

➤flex-grow

➤flex-shrink

➤flex-basis

➤flex

➤align-self

5.4.1 order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: <integer>

5.4.2 flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-grow: <number>;

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

5.4.3 flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-shrink: <number>;

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

5.4.4 flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-basis: <length> | auto;

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

5.4.5 flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex: none | [ <'flex-grow'>? || <'flex-shrink'>? || <'flex-basis'>

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

5.4.6 align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline |  stretch;

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

六、Grid布局

6.1 Flex布局介绍

CSS：Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

display: grid;

6.2 grid-template-columns/grid-template-rows

定义网格单元的宽高，其单位可以是一个长度(如px、em、rem、vw、vh)或百分比，也可以是网格中自由空间的份数(单位为fr)

.grid {
	display: grid;
	/* grid-template-columns:200px 200px 200px; */
	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows:1fr 1fr;
}

6.3 grid-column-gap/grid-row-gap/grid-gap

指定网格线的大小，也可以说是网格子项之间的间距。

.container{   
  display:grid;   
  grid-template-columns: 100px 50px 100px;   
  grid-template-rows: 80px auto 80px;    
  grid-column-gap: 10px;   
  grid-row-gap: 15px;  
}

6.4 justify-items/align-items

让网格子项的内容和列轴对齐（align-items则相反，是和行轴对齐），这个值对容器里面的所有网格子项都有用。

justify-items: start | end | center | stretch
align-items: start | end | center | stretch;

start：内容和网格区域的左边对齐
end：内容和网格区域的右边对齐
center：内容和网格区域的中间对齐
stretch：填充整个网格区域的宽度（默认值）

6.5 justify-content/align-content

总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式.

justify-content: start | end | center | stretch | space-around | space-between | space-evenly

start:左对齐
end：右对齐
center：居中对齐
stretch：填充网格容器
space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between：两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly：网格间隔相等，包括始末两端

6.6 grid-template-areas

grid-template-areas可以配合grid-area定义一个显式的网格区域。grid-template-areas定义网格区域，然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。

实例：

<div class="container">   
  <div class="item-a"></div>   
  <div class="item-b"></div>   
  <div class="item-c"></div>   
  <div class="item-d"></div>   
</div>

设置CSS样式：

.item-a{   
  grid-area: header;  
}  

.item-b{   
  grid-area: main; 
}  

.item-c{   
  grid-area: sidebar; 
}  

.item-d{   
  grid-area: footer; 
}  

.container{    
  width: 300px;
  height:200px;   
  display:grid;   
  grid-template-columns: 1fr 1fr 1fr 1fr;   
  grid-template-rows: auto;   
  grid-template-areas: "header header header header"   
                       "main main . sidebar"   
                       "header footer header footer";  
}

在上面的代码中，我们将创建一个4乘以3的网格容器，第一行由header区域组成，中间一行由 2 个main区域和1个空单元和1个sidebar区域组成，最后一行由footer区域组成。

七、移动端适配

7.1 响应式布局的概念

响应式网页设计的理念是让 Web 页面在不同尺寸的设备上和窗口上都能得到友好的渲染，以获得良好的浏览体验。
响应式布局可自动调整并适应任何设备屏幕的大小，无论是 PC，平板电脑还是手机。

7.2 控制视口（viewport）

控制视口这一点不论是响应式、自适应还是移动端布局都是最重要的。我们常常会使用这一句：

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

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

7.3 媒体查询@media

使用@media 查询，你可以针对不同的媒体类型定义不同的样式。

创建媒体查询一般需要以下几个部分：媒体类型，媒体特征和逻辑条件。

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

7.3.1 媒体类型

媒体类型是呈现页面的用户设备类型，常见的媒体类型包括以下几种：

all：所有的设备类型，属于默认类型。如下面示例中省略媒体类型时，默认匹配所有类型设备。
screen: 所有非 print 或者 speech 的设备。
print: 打印机设备。
speech: 屏幕阅读器等类似的发声设备。

/* 两种写法意义相同 */
@media (max-width: 320px) {...}
@media all and max-width: 320px {...}

通常需要结合更多的媒体特征来进行判断。

7.3.2 媒体特征

媒体查询支持丰富的设备特征，除了我们最常看到的宽度和高度查询，还有一些其他的媒体特征比如方向、分辨率等对检测设备也很有用

设备特征	取值
width	长度数值，如600px
height	长度数值，如600px

另外，对于部分取值为数值的属性，媒体查询可以使用 min- 或 max- 前缀表示范围，这为媒体查询提供了更方便的判断方式。例如使用 max-width: 320px 表示设备 viewport 的宽度小于等于 320px，min-width: 321px 表示 viewport 宽度大于等于 321px。

@media (max-width: 320px) { /* viewports <= 320px 时的样式*/ }
@media (min-width: 321px) { /* viewports >= 321px 时的样式*/ }

7.3.3 逻辑条件

使用 and 操作符来合并媒体属性
使用 not 可以不在某种条件下使用当前媒体查询规则
使用 only 可以仅在某种条件下使用规则

// 示例是宽度大于 700px 的媒体查询条件，只在横屏情况时使用这个条件。
@media (min-width: 700px) and (orientation: landscape) { ... }

// 媒体查询匹配 viewport 宽度大于 320px 且不是打印机的设备。
@media not print and (min-width: 320px) { ... }

// 仅在 viewport 宽度大于 320px 的屏幕设备中使用
@media only screen and (min-width: 320px) { ... }

7.3.4 使用媒体查询设置断点

选择不同 viewport 的 min-width 和 max-width 的取值，称为选择断点。总结了一套比较具有代表性的设备断点，代码如下：

/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) {...}
/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) {...}
/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) {...}
/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) {...}
/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
@media only screen and (min-width: 1200px) {...}

7.4 图片的自适应（fluid image）

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

这只要一行CSS代码：

img { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

最好还是根据不同大小的屏幕，加载不同分辨率的图片。

7.5 自适应图片等素材

这里我们常对图片做处理，处理的方法有很多我们可以采用HTML5 picture 标签，利用该标签可以在不同设备中显示不同的图片。如下代码：

<picture>
    <source media="(max-width: 36rem)"
        srcset="img/ad001-l-480w.png"/>
   <source srcset="img/ad001-l-1600w.png"/>
   ![](img/ad001-l.png)
</picture>

source 代表你要显示图片的源，media代表你需要什么条件下显示该图片，srcset 须填写图片路径d s代码片意思是当设备视口宽度大于36rem 时显示 ad001-l-480w.png 这张图片，若小于 36rem 则使用ad001-l-1600w.png 这张图片，要是浏览器不支持 picture 则使用 img 标签中的图片。picture 详细信息可查看 MDN-picture 同样的这里需要注意在 IE9&IE9以下浏览器想使用 picture 须导入 polyfill ，如 html5shiv.js 。

7.6 不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

CSS代码不能指定像素宽度：

width: xxx px;

可以指定百分比宽度或自适应：

width: xxx %;
width: auto;

7.7 相对大小的字体

由于px是相对固定单位，字号大写直接被定死，无法随着浏览器进行缩放。

提到相对单位，最熟悉最常见的就是em和rem。

7.7.1 em

em是元素相对于自身的 font-size。如果自身没有设置字体大小，则根据父级元素设置大小。

<style>
  h1 {
    font-size: 20px;
    margin: 1em; /* 1em = 20px */
  }
  p {
    font-size: 14px;
    padding: 1em; /* 1em = 14px */
  }
  .outer {
    font-size: 12px;
  }
  .inner {
    font-size: 2em;
    padding: 1em; /* 1em = 24px */
  }
</style>

7.7.2 rem

rem= root em，顾名思义就是相对于根元素的em，是根据根元素来计算出 CSS 像素点的大小。根元素就是，而它的默认字体大小是 16px。


h1 {
  font-size: 20px;
  margin: 1rem; /* 1rem = 16px */
}
p {
  font-size: 1rem; /* 1rem = 16px */
}

所以，如果我们改变根元素的字体大小，页面上所有使用rem的元素都会被重新计算元素属性并重绘。

7.7.3 em vs rem

em和rem都是相对单位，两者都可以用来做响应式布局的单位。根据它们的特性，em和rem互有优劣。

em- 对于模块化的页面元素比较好，比如 Web Components 标签，标签内的元素都根据父元素计算像素大小，只需设置最外层父元素的字体大小就可同时影响子元素，保持自定义元素具有一定的模块封闭性。但em比较难以追溯，需要逐层向上排查显式设置了字体大小的元素。
rem- 方便是rem最大的好处，只需知道的字体大小即可计算当前的实际像素大小。

7.8 vh，vw

vh和vw都是相对于视口 viewport 进行计算的单位。

vw- viewport width，视口宽度，1vw = 1% 视口宽度
vh- viewport height，视口高度，1vh = 1% 视口高度

7.9 选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

7.10 flex布局

八、CSS 基本属性

8.1 text-align

text-align 属性规定元素中的文本的水平对齐方式。

text-align:center

在设置父元素具有text-align:center属性的基础上，必须设置子元素（要居中的元素）的display:inline-block或者display:inline，即只能实现行内块的水平居中。

8.2 vertical-align

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

vertical-align:middle;

8.3 visibility

visibility属性指定一个元素是否是可见的。
提示:即使不可见的元素也会占据页面上的空间。请使用 “display” 属性来创建不占据页面空间的不可见元素。

visibility:visible | hidden | collapse | inherit

8.4 white-space

white-space属性指定元素内的文本是否换行

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的
```
 标签。
```
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

8.5 overflow

overflow 属性规定当内容溢出元素框时发生的事情。

overflow: scroll;

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

8.6 calc()数学运算

CSS有一个特殊的calc()函数，用于做基本的数学运算

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

8.7 !important

使样式CSS不被覆盖

div{font-size:50px !important;}

九、CSS3属性

9.1 box-sizing

box-sizing 属性允许你以某种方式定义某些元素的盒模型

box-sizing: content-box|border-box|inherit:

W3C 标准盒模型（默认）：
content-box：padding和border不被包含在定义的width和height之内。
IE 盒模型（常用）：
border-box：padding和border被包含在定义的width和height之内。

9.2 CSS3 边框

9.2.1 box-shadow

box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

9.2.2 border-radius

在 CSS3 中 border-radius 属性被用于创建圆角

border-radius:25px;

9.2.3 border-image

border-image 属性允许你指定一个图片作为边框

border-image:url(border.png) 30 30 round;

9.3 text-overflow

指定当文本溢出包含它的元素，应该发生什么

clip：修剪文本。
ellipsis：显示省略符号来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。

text-overflow: clip|ellipsis|string;

溢出文本以…显示

.urlTime {
    width: calc(100% - 25px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 32px;
    vertical-align: middle;
    text-align: left;
  }

9.4 transform 转换

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform: none|transform-functions;

9.4.1. 平移 translate

沿着 x 轴方向平移transform:translateX(平移量)；
沿着 y 轴方向平移transform:translateY(平移量)；
沿着 z 轴方向平移transform:translateZ(平移量)；

其中，平移的单位可以是像素值 px 或百分比。需要注意的是如果设置百分比的话，元素的平移量是相对于元素自身尺寸进行的。

9.4.2 旋转 rotate

沿着 x 轴方向旋转transform:rotateX(旋转角度)；
沿着 y 轴方向旋转transform:rotateY(旋转角度)；
沿着 z 轴方向旋转transform:rotateZ(旋转角度)；

旋转的单位可以是度 deg 或圈数 (turn)。

9.4.3 缩放 scale

沿着 x 轴方向缩放transform:scaleX(缩放比例)；
沿着 y 轴方向缩放transform:scaleY(缩放比例)；
沿着 x,y 轴双方向缩放transform:scale(缩放比例)；

9.5 transition 过渡

transition 属性设置元素当过渡效果

四个简写属性为：

transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

transition: property duration timing-function delay;

9.6 CSS3 动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

9.6.1 CSS3 @keyframes 规则

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

9.7 box布局

在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block

不同的浏览器要做不同的兼容：firefox(-moz)、opera(-0)、chrome/safari（-webkit)。

 display:box; // css3盒子模型
 display:-moz-box;
 display:-webkit-box;

9.7.1 box-flex 排列占比

box-flex:number;

1）占父级元素宽度的number份
2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数
3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份

9.7.2 box-orient 排列方式

box-orient:horizontal/vertical

子代按水平排列或竖直排列。

1）horizontal 水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
2）vertical 垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。

9.7.3 box-direction 排列顺序

box-direction:normal/reverse

确认子代的排列顺序。

1）normal 默认值，子代按html顺序排列
2）reverse 反序

9.7.4 box-align 垂直对齐方式

box-align:start/end/center/stretch

子代的垂直对齐方式。

1）start 垂直顶部对齐
2）end 垂直底部对齐
3）center 垂直居中对齐
4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。

9.7.5 box-pack 水平对齐方式

box-pack:start/end/center

子代的水平对齐方式。

1）start 水平左对齐
2）end 水平右对齐
3）center 水平居中对齐

9.7.6 line-clamp 文本显示行数

可以限制在一个块元素显示的文本的行数，需要与box-orient:vertical 一起使用

-webkit-line-clamp: 1; // line-clamp 文本显示行数
-webkit-box-orient: vertical;  // 盒子模型方向

十、CSS 水平&垂直居中

10.1 元素居中对齐-使用margin

使用margin:auto实现元素的水平垂直居中

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

10.2 元素居中对齐-使用padding

在父级元素中设置padding，实现垂直居中对齐。

.center {
    padding: auto 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

10.3 文本居中对齐

使用text-align: center实现行内元素或者行内块元素的水平居中

.center {
    text-align: center;
    border: 3px solid green;
}

10.4 图片居中对齐-使用margin

使用 margin: auto; 并将它放到块元素中

img {
    display: block;
    margin: auto;
    width: 40%;
}

10.5 使用绝对定位居中

使用绝对定位和transform 属性来设置垂直居中

.center p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

10.6 垂直居中 - 使用 line-height

在父级元素上设置line-height等于height

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

十一、其他知识

11.1 BFC是什么？有什么作用？

参考文档

1.BFC 全称：Block Formatting Context，名为 “块级格式化上下文”。

2.BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

3.简单列举几个触发BFC使用的CSS属性：

	overflow: hidden
	display: inline-block
	position: absolute
	position: fixed
	display: table-cell
	display: flex

4.BFC解决了以下主要的问题：（1）使用Float脱离文档流，高度塌陷（2）Margin边距重叠（3）两栏布局

5.使用Float脱离文档流，高度塌陷：

	/--给box设置完float结果脱离文档流，使container高度没有被撑开，从而背景颜色没有颜色出来--/
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
        }
    </style>

    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    
    /--解决方法：使用BFC--/
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
            display: inline-block; /--添加行内块元素，触发BFC--/
        }
    </style>

6.Margin边距重叠：

	/--两个盒子的margin外边距设置的是10px，可结果显示两个盒子之间只有10px的距离，这就导致了margin塌陷问题，这时margin边距的结果为最大值，而不是合 --/
    <style>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>

    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    
    /--为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响）--/
    <div class="container">
        <div class="box"></div>
        <p><div class="box"></div></p>
    </div>

7.两栏布局：

	/--第二个div元素为300px宽度，但是被第一个div元素设置Float脱离文档流给覆盖上去了--/
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;">
        非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处
    </div>
    
    /--解决此方法我们可以把第二个div元素设置为一个BFC--/
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;display:flex;">
        非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处
    </div>