css常用语法
声明：本笔记受益于 B站黑马pink老师 前端入门课程，在此特别致敬。
一、文字样式
1.1 单行文字垂直居中
css未直接提供代码解决，其他的解决方案：让文字的行高等于盒子的高度。
原理：行高 = 上间距 + 文字高度 + 下间距。设置行高等于盒子高度，上下间距自动等高分配。
div {
width: 100px;
height: 40px;
/* 设置div盒子内的文字行高等于盒子高度 */
line-height: 40px;
}
1.2 取消超链接下划线
text-decoration: none;
1.3 给文字带上下划线
text-decoration: underline;
1.4 段落缩进
em是一个相对单位，就是当前元素( font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
text-indent: 2em; /*缩进两个字符*/
1.5 行高
行高由三部分组成：上间距、文字高度、下间距。行间距30px，文字高度16px，则上下间距均为7px。
line-height: 30px;
1.6 去除 li 前小圆点
list-style: none;
1.7 尖括号代码
< /* 表示 < 左括号 */
> /* 表示 > 右括号 */
二、选择器
复合选择器由两个或多个基础选择器，通过不同的方式组合而成的。
复合选择器包括：后代选择器、子选择器、并集选择器、链接伪类选择器等等。
2.1 选择器区分表
| 选择器 | 作用 | 特征 | 用法 |
|---|---|---|---|
| 后代选择器 | 用来选择后代 | 可以是子孙后代 | 符号是空格 .nav span |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 符号是逗号 .nav, .header |
| 链接选择器 | 选择不用状态的链接 | 跟链接有关 | 重点记住 a{} 和 a:hover 实际开发中的用法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单有关 | input:focus 记住这个写法 |
2.2 链接伪类选择器
链接伪类选择器，同时使用时注意如下先后顺序：L V H A （love hate）
:link /*鼠标未点击时*/
:visited /*鼠标点击过后*/
:hover /*鼠标经过时*/
:active /*鼠标点击未弹起*/
2.3 focus伪类选择器
:focus伪类选择器，用于选择获得焦点的表单元素。
/*举例*/
input:focus {
backgroud-color: green;
}
三、显示模式
3.1 元素模式区分表
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块元素 | 一行只能放一个块元素 | 可以设置宽高 | 父容器的100% | 容器可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 本身内容的宽度 | 注意：行内块元素之间默认有（缝隙）间距 |
3.2 行转块
行内元素转为块元素。 display: block;
块级元素一行之内存放一个，可以设置宽高。
/*示例*/
a {
width: 100px;
height: 50px;
/* 将行内元素a 转换为了 块级元素 */
display: block;
}
3.3 块转行
块元素转为行内元素。 display: inline;
行内元素一般直接设置宽高无效，根据内容撑满。
/*示例*/
div {
/* 将块级元素div 转换为了行内元素 */
display: inline;
}
3.4 行转行内块
行内元素转为行内块元素。display: inline-block;
行内块元素既可以设置宽高，又可以在同一行排列多个。
/*示例*/
span {
width: 100px;
height: 50px;
/* 将行内元素span 转换为了 行内块元素 */
display: inline-block;
}
四、背景样式
4.1 背景平铺
/* 默认背景图片横纵向都平铺 */
background-repeat: repeat;
/* 默认背景图片修改为不平铺 */
background-repeat: no-repeat;
/* 背景图片横向平铺 */
background-repeat: repeat-x;
/* 背景图片纵向平铺 */
background-repeat: repeat-y;
4.2 背景图片位置
利用 background-position: x y; 属性可以改变图片在背景中的位置。
参数代表的是：x坐标和y坐标。可以使用方位名词（top、center、left…） 或者 精确单位（10px）。
如果只指定了一个方位名词，另一个值省略，则默认另一个值为center 居中对齐。
如果指定的两个值都是方位名词，则先后顺序无关，如 left top 和 top left 效果一致，其他严格按照先x后y顺序。
如果只指定一个精确数值，则该数值一定是x坐标，另一个默认垂直居中。
/* 图片居 上 中 对齐 */
background-position: top center;
/* 图片居 水平居右 对齐 */
background-position: right center;
/* 图片居 水平居左 对齐 */
background-position: left;
/* 图片居 左20px垂直居中 对齐 */
background-position: 20px;
/* 图片居 距顶部20px水平居中 对齐 */
background-position: center 20px;
4.3 背景固定
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
/* 背景图片滚动，默认滚动 */
background-attachment: scroll;
/* 背景图片固定 */
background-attachment: fixed;
4.4 背景色半透明
css3 为我们提供了背景颜色半透明效果。
/* 最后一个参数是 alpha 透明度，取值范围在 0~1 之间 这里示例是黑色半透明 */
background: rgba(0, 0, 0, 0.3);
/* 实际开发中习惯性的把 0.3 写成 .3 */
background: rgba(0, 0, 0, .3);
4.5 背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量。
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺字为:
background: 背景颜色 背景图片地址 背景平铺 背景图片是否滚动 背景图片位置；
五、css三大特性
5.1 层叠性
相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
层叠性原则：
样式冲突，遵循的是就近原则，那个样式离结构近，就执行那个样式。
样式不冲突，不会层叠。
5.2 继承性
子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
子元素可以继承父元素的样式（text- ，font- ， line- 这些元素开头的可以继承，以及 color 属性。）
行高的继承性
body {
color: red;
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素body的行高 1.5 */
/* 这个1.5就是 当前元素 文字大小的1.5倍，14*1.5=21px 所以当前元素行高为21px */
font-size: 14px;
}
5.3 优先级
当一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行。
!important 直接在css某条语句后加，例如 span { color: red !important; }
该表中选择器权重由上而下权重逐级增加。注意继承的权重是 0 ，如果该元素没有直接选中，不管父元素权重多高，子元素权重都是0。
| 选择器 | 权重 |
|---|---|
| 继承 或者 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style=" " | 1，0，0，0 |
| !important 最重要的 | 无穷大 |
5.4 权重叠加
如果是复合选择器，会有权重叠加的问题。注意：权重虽然会叠加,但是永远不会有进位。
/* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */
ul li {
color: green;
}
/* li 的权重是 0,0,0,1 1 */
li {
color: red;
}
/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */
.nav li {
color: pink;
}
六、盒子模型
6.1 边框
border可以设置元素的边框，注意：边框会影响盒子的实际大小。边框有三部分组成：边框宽度、边框样式、边框颜色。
border: border-width || border-style || border-color
border: 1px solid red; /* 没有先后顺序 */
border-top: 2px solid yellow; /* 通过-top、bottom、left、right 给边框四周个性化添加样式 */
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
collapse 单词是合并的意思。
border-collapse: collapse;表示相邻的边框合并在一起。
table,
td {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
}
| 边框语法 | 可取值 |
|---|---|
| border-width | 5px、10px等 |
| border-style | solid 实线边框、dashed 虚线边框、dotted 点线边框 等 |
| border-color | red、#AEEEEE等 |
| border-collapse | collapse |
6.2 padding内边距
注意：padding可能会影响（撑大）盒子的大小。如果盒子本身没有指定 width/height 属性，则此时 padding 不会撑开盒子大小。
padding 内边距复合写法格式如下表。
| 值的个数 | 表达意思 |
|---|---|
| padding: 5px; | 1个值，表示上下左右都有5像素内边距。 |
| padding: 5px 10px; | 2个值，表示上下内边距是5像素，左右内边距是10像素。 |
| padding: 5px 10px 20px; | 3个值，表示上内边距5像素 左右内边距10像素 下内边距20像素。 |
| padding: 5px 10px 20px 30px; | 4个值，表示上边距5像素 右10像素 下20像素 左30像素，顺时针。 |
6.3 margin外边距
margin 外边距复合写法格式如下表。
| 值的个数 | 表达意思 |
|---|---|
| margin : 5px; | 1个值，表示上下左右都有5像素外边距。 |
| margin : 5px 10px; | 2个值，表示上下外边距是5像素，左右外边距是10像素。 |
| margin : 5px 10px 20px; | 3个值，表示上外边距5像素 左右外边距10像素 下外边距20像素。 |
| margin : 5px 10px 20px 30px; | 4个值，表示上外距5像素 右10像素 下20像素 左30像素，顺时针。 |
6.4 外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
6.4.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。而是取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案：尽量只给一个盒子添加 margin 值。
6.4.2 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
塌陷问题解决方案
/* 1、可以为父元素定义上边框 透明的1像素上边框 */
border: 1px solid transparent;
/* 2、可以为父元素定义上内边距 */
padding-top: 1px;
/* 3、可以为父元素添加 overflow: hidden */
overflow: hidden;
/* 4、还有其他方法，比如 浮动、固定、绝对定位的盒子不会有塌陷跟合并问题。 */
6.5 盒子水平居中
6.5.1 块级元素水平居中
外边距可以让块级盒子水平居中，但是必须满足两个条件：
1、盒子必须指定宽度（width）。
2、盒子左右的外边距都设置为 auto。
/* 以下三种都可以 第三种最常用 */
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
6.5.2 行内、行内块元素水平居中
行内元素或者行内块元素水平居中：给其父元素添加 text-align: center 即可。
行内元素或者行内块元素可以抽象的看成是 “块内文字”。
6.6 清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除一下网页元素的内外边距。
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
* {
margin: 0;
padding: 0;
}
6.7 圆角边框
/* 圆角边框，单位一般为数值（px）或者 百分百 */
border-radius: 10px;
/* 圆角边框，这里的50%指的是div宽、高度的一半 */
border-radius: 50%;
/* 设置div左上角为5px圆角 */
border-top-left-radius: 5px;
/* 设置div盒子 左上、右下10px; 右上、左下20px 圆角边框属性，对角线 */
border-radius: 10px 20px;
/* 设置div盒子 左上10px; 右上、左下20px; 右下30px 圆角边框属性 */
border-radius: 10px 20px 30px;
/* 设置div盒子 左上5px、右上10px、右下20px、左下30px 的圆角边框属性，顺时针 */
border-radius: 5px 10px 20px 30px;
6.8 盒子阴影
css3中新增了盒子阴影，我们可以用 box-shadow 属性为盒子添加阴影。
默认的是外阴影（outset），但是不可以写这个单词，否则阴影无效。
盒子阴影不占空间，不会影响其他盒子排列。
box-shadow: h-shadow v-shadow blur spread color inset;
| 可选值 | 描述 |
|---|---|
| h-shadow | 必填，水平阴影的位置。允许负值。 |
| v-shadow | 必填，垂直阴影的位置。允许负值。 |
| blur | 选填，模糊距离。 |
| spread | 选填，阴影的尺寸。 |
| color | 选填，阴影的颜色。 |
| inset | 选填，将外部阴影改为内部阴影。 |
七、浮动
7.1 传统网页布局三种方式
传统网页布局三种方式：标准流、浮动、定位。
总结∶有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。浮动可以改变元素标签默认的排列方式。
浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则︰多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
7.2 浮动语法
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘。
/* 默认不浮动 none */
float: none/left/right;
7.3 浮动特性
1、浮动元素会脱离标准流(脱标)。
脱离标准普通流的控制（浮）移动到指定位置（动)，(俗称脱标)。浮动的盒子不再保留原先的位置。
2、浮动的元素会一行内显示并且元素顶部对齐。
3、任何添加浮动的元素会具有行内块元素的特性。
4、如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
5、浮动的盒子中间是没有缝隙的，是紧挨着一起的。
6、浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
7.4 浮动使用策略
为了约束浮动元素位置，我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
所有内部子元素都要添加浮动，浮动才不会出问题，一浮全浮。
7.5 清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
/* 同时清除左右两侧浮动的影响 常用 */
clear: both;
/* 清除左侧浮动的影响 */
clear: left;
/* 清除右侧浮动的影响 */
clear: right;
清除浮动方法（策略）是闭合浮动。
为什么要清除浮动？
1、父级没高度。
2、子盒子浮动。
3、影响下面布局，我们就应该清除浮动。
7.5.1 额外标签法
额外标签法也称为隔墙去，是W3C推荐的做法（不常用）。注意：要求这个新的空标签必须是块级元素。
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=" clear:both”>，或者其他标签〔如 br 等)。
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。
7.5.2 父级添加overflow属性
可以给父级元素添加 overflow 属性，将其属性值设置为 hidden、auto、scroll。注意是给父元素添加代码。
优点：代码简洁。
缺点：无法显示溢出的部分。
7.5.3 父级添加after伪元素
:after 方式是额外标签法的升级版。也是给父元素添加。
优点：没有增加标签，结构更简单。
缺点：需要照顾低版本浏览器。
代表网站：百度、淘宝、网易等。
<body>
<div class="box clearfix">
<div class="sonbox1">子盒子1</div>
<div class="sonbox1">子盒子2</div>
</div>
</body>
/* 以后使用直接复制这两块代码 需要清除浮动的父元素直接添加 clearfix 类名 */
/* :after 是为了照顾 IE7 以下的兼容性 */
.clearfix:after {
/* after 伪元素必填属性 */
content: '';
/* 必须是块级盒子 */
display: block;
/* 隐藏这个盒子 */
height: 0;
/* 清除浮动核心代码 */
clear: both;
/* 隐藏这个盒子 */
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
7.5.4 父级添加双伪元素
这里也是给父元素添加。
优点：结构更简单。
缺点：需要照顾低版本浏览器。
代表网站：小米，腾讯等。
/* 以后使用直接复制这三块代码 需要清除浮动的父元素直接添加 clearfix 类名 */
.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
八、定位
定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
8.1 定位模式
定位模式决定元素的定位方式，它通过 css 的 position 属性来设置，其值可以分为四个：
| 可取值 | 语义 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|---|
| static | 静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative | 相对定位 | 否（占有位置） | 相对于自身位置移动 | 常用 |
| absolute | 绝对定位 | 是（不占有位置） | 最近带有定位的祖先元素 | 常用 |
| fixed | 固定定位 | 是（不占有位置） | 浏览器可视区域 | 常用 |
| sticky | 粘性定位 | 否（占有位置） | 浏览器可视区域 | 当前阶段少 |
8.2 边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top: 80px | 顶部偏移量，定义元素相对于父元素上边线的距离。 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于父元素下边线的距离。 |
| left | left: 80px | 左侧偏移量，定义元素相对于父元素左边线的距离。 |
| right | right: 80px | 右侧偏移量，定义元素相对于父元素右边线的距离。 |
8.3 静态定位 static
静态定位是元素的默认定位方式，无定位的意思，很少用到。
静态定位按照标准流特性摆放位置，它没有边偏移。
position: static;
8.4 相对定位 relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自我型）。
相对定位特点：
1、它是相对于自己原来的位置移动的（移动位置的时候参照点是自己原来的位置）。
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
3、大多用来给父元素添加相对定位，配合子元素绝对定位。
position: relative;
/* 后面在指定边偏移 */
top: 100px;
left: 100px;
8.5 绝对定位 absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
绝对定位特点：
1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3、决定定位不占有原来的位置。（脱标） 可理解为永远漂浮在页面最顶层。
position: absolute;
8.5.1 子绝父相
子绝父相：子级使用绝对定位，父级则需要使用相对定位。
子绝父相的由来：
1、子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2、父盒子需要加定位限制子盒子在父盒子内显示。
3、父盒子布局时，需要占有位置，因此父亲只能是相对定位。
总结∶因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
8.5.2 绝对定位盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
left：50%；让盒子的左侧移动到父级元素的水平中心位置。
margin-left：-100px；让盒子向左移动自身宽度的一半。
8.6 固定定位 fixed
固定定位是元素固定在浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会发生改变。
固定定位的特点：
1、以浏览器的可视窗口为参照点移动元素。
2、跟父元素没有任何关系，不随着滚动条滚动。
3、固定定位不在占有原先的位置。固定定位也是脱标的，可以看做特殊的绝对定位。
position: fixed;
8.6.1 固定在版心右侧
小算法：
1、让固定定位盒子 left：50%，走浏览器可视区（也可以看做版心）的一半位置。
2、让固定定位盒子 margin-left 版心宽度的一半距离。多走版心宽度的一半位置。
如此，就可以让固定定位的盒子贴着版心右侧对齐。
8.7 粘性定位 sticky
粘性定位可以被认为是相对定位和固定定位的混合。当前阶段使用较少。
粘性定位的特点：
1、以浏览器的可视窗口为参照点移动元素。（固定定位特点）
2、粘性定位占有原先的位置。（相对定位特点）
3、必须添加 top、left、right、bottom 其中一个才生效。
4、跟页面滚动搭配使用，但是兼容性差，IE不支持。一般如此效果使用js 完成。
position: sticky;
/* 必须添加 top、left、right、bottom 其中一个才生效。 */
top: 10px;
8.8 定位叠放次序
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序（z轴）。
数值可以是正整数、负数或者是0，默认是 auto，数值越大，盒子越靠上，但是数值后面不能加单位。
如果属性值形同，则按照书写顺序，后来居上。
只有定位的盒子才有 z-index 属性。
/* 设置了z-index 为1，就比默认的auto更靠上 */
z-index: 1;
8.9 定位特性
绝对定位和固定定位也和浮动类似。
1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3、脱标的盒子不会触发外边距塌陷。浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
4、绝对定位（固定定位）会完全压住盒子。
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)，但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。
九、元素的显示与隐藏
类似网站广告的应用，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。
本质：让一个元素在页面中隐藏或者显示出来。
9.1 display 属性
display 属性用于设置一个元素应如何显示。后面应用广泛，搭配 js 可以做很多的网页特效。
/* 隐藏对象 */
display: none;
/* 除了转换为块级元素之外，同时还有显示元素的意思 */
display: block;
display 隐藏元素后，不再占有原来的位置。
9.2 visibility 属性
visibility 属性用于指定一个元素应可见还是隐藏。
visibility 隐藏元素后，继续占有原来的位置。
/* 元素可视 */
visibility: visible;
/* 元素隐藏 */
visibility: hidden;
如果隐藏元素想要原来位置，就用 visibility: hidden
如果隐藏元素不想要原来的位置，就用 display: none
9.3 overflow 属性
overflow 属性指定了如果内容溢出一个元素的框（超过其指定的高度及宽度），会采取的措施。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超过部分隐藏掉 |
| scroll | 内容不管是否超出框，总是显示滚动条 |
| auto | 内容超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用 overflow：hidden 因为它会隐藏多余的部分。
十、css属性书写顺序
建议遵循以下顺序：
| 顺序 | 类型 | 参照 |
|---|---|---|
| ① | 布局定位属性 | display / position / float / clear / visibility / overflow （建议 display 第一个写，关系到模式） |
| ② | 自身属性 | width / height / margin / padding / border / background |
| ③ | 文本属性 | color / font / text-decoration / text-align / vertical-align / white-space / break-word |
| ④ | 其他属性（css3） | content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient… |
十一、css进阶
11.1 精灵图
精灵技术目的︰为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
使用精灵图核心总结∶
1.精灵图主要针对于小的背景图片使用。
2.主要借助于背景位置来实现 background-position。
3.一般情况下精灵图都是负值。(千万注意网页中的坐标︰x轴右边走是正值，左边走是负值，y轴同理。)
精灵图是有诸多优点的，但是缺点很明显。
1．图片文件还是比较大的。
2．图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
11.2 字体图标
11.2.1 选用场景
字体图标使用场景∶主要用于显示网页中通用、常用的一些小图标。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点
轻量级∶一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性∶本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
●兼容性:几乎支持所有的浏览器，请放心使用
注意∶字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结:
1、如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2、如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
11.2.2 字体图标的引入
下载完毕之后，注意原先的文件不要删，后面会用。
1、把下载包里面的 fonts 文件夹放入页面根目录下。
2、在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。一定注意字体文件路径的问题。
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
3、打开下载包中html文件，在需要标签的位置添加小图标，完成。
11.2.3 字体图标的追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
1、打开网址，把压缩包里面的selection.json从新上传。
2、然后选中自己想要新的图标，从新下载压缩包。
3、替换原来的文件即可。
11.3 三角
.box{
width: 0;
height: 0;
/* 兼容性问题 */
line-hight: 0;
/* 兼容性问题 */
font-size: 0;
/* 主要代码 */
border: 50px solid transparent;
border-left-color: pink;
}
11.4 鼠标
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor: pointer;
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
11.5 轮廓线
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
/* 取消表单轮廓 none或者 0 */
outline: none;
11.6 文本域防脱拽
实际开发中，我们文本域右下角是不可拖拽的。
textarea {
resize: none;
}
11.7 行内、行内块垂直居中
CSS的 vertical-align 属性使用场景∶经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
官方解释︰用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
vertical-align: baseline | top | middle | bottom
| 属性值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
11.8 图片底部留白缝隙问题
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
<style>
.box {
border: 2px solid red;
}
</style>
<div class="box">
<img src="https://img2.baidu.com/it/u=2084968526,3585579896&fm=253&fmt=auto&app=120&f=JPEG?w=350&h=350" alt="">wewew
</div>
主要解决方法有两种:
1、给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的)
2、把图片转换为块级元素 display: block;
11.9 溢出文字省略
11.9.1 单行文本溢出省略
/* 1、强制一行显示文本，默认是 normal */
white-space: nowrap;
/* 2、超出部分隐藏 */
overflow: hidden;
/* 3、文字用省略号替代超出部分 */
text-overflow: ellipsis;
11.9.2 多行文本溢出省略
多行文本溢出省略，有较大兼容性问题，适合于 webKit 浏览器或移动端（移动端大部分是 webKit 内核）
这种效果更推荐让后端来实现，因为
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型展示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: bertical;
十二、常见布局技巧
12.1 margin 负值
当给浮动的一列盒子都添加边框时，可能会出现相邻边框重叠的问题。
解决方案：
/* 这里的1指的是与每个盒子设置的边框大小一致 向左移动1个边框像素大小的距离 */
margin-left: -1;
如果还需实现鼠标经过某个盒子的时候，显示当前盒子完整边框的效果。
**解决方案：**提高当前盒子的层级即可(如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index：1 )
12.2 文字环绕
浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。当给盒子内的元素添加 float 后，盒子内的文字会自动环绕。
12.3 三角强化
实现直角三角形样式。
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
12.4 页面初始化
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
text-decoration: none
}
/* 京东独有的 */
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
十三、html5 新特性
新特性都具有兼容性，需要 IE9+ 以上的浏览器才支持。
13.1 新增的语义化标签
汪意∶
这种语义化标准主要是针对搜索引擎的，这些新标签页面中可以使用多次。
在IE9中，需要把这些元素转换为块级元素其实，我们移动端更喜欢使用这些标签。
13.2 新增的多媒体标签
主要有两个，音频：audio 视频：video
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。
13.2.1 视频 video
当前 video 标签元素支持三种视频格式（MP4、WebM、Ogg）：尽量使用 MP4 格式。
<video src="" controls="controls" ></video>
| 属性 | 取值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加 muted 来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 设置播放器高度 |
| loop | loop | 是否循环播放 |
| preload | auto（预先加载视频）、none（不预先加载视频） | 规定是否预先加载视频（如果有了 autoplay 就忽略该属性） |
| src | url | 视频 URL 地址，必填 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
13.2.2 音频 audio
当前 audio 标签元素支持三种视频格式（MP3、Wav、Ogg）：尽量使用 MP3 格式。
<audio src="" controls="controls" ></audio>
| 属性 | 取值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音频就绪自动播放，谷歌浏览器将自动播放禁用了 |
| controls | controls | 向用户显示播放控件 |
| loop | loop | 是否循环播放 |
| src | url | 音频 URL 地址，必填 |
13.3 新增的 input 类型
| 新增type属性 | 描述 |
|---|---|
| search | 搜索栏 |
| tel | 手机号码 |
| color | 生成一个颜色选择表单 |
| url | 限制用户输入必须为 URL 类型 |
| date | 限制用户输入必须为 日期 类型 |
| time | 限制用户输入必须为 时间 类型 |
| month | 限制用户输入必须为 月份 类型 |
| week | 限制用户输入必须为 周 类型 |
| number | 限制用户输入必须为 数字 类型 |
13.4 新增的表单属性
| 新增表单属性 | 取值 | 描述 |
|---|---|---|
| required | required | 拥有该属性表示其内容不能为空，表示一个：必填 字段 |
| placeholder | 提示文本 | 表单提示信息，默认不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off / on | 记住提交记录。当用户在字段开始键入时，浏览器基于之前键入过的值，显示出曾经填写的选项。默认on打开。需要放在表单内，同时加上name属性，同时成功提交。 |
| multiple | multiple | 可以多选文件提交，与文件域搭配使用 |
十四、css3 新特性
14.1 属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。下表中选择符也可不带引号，如：E[att=val]
注意∶类选择器、属性选择器、伪类选择器，权重为10，即 0， 0， 1， 0。
| 选择符 | 描述 |
|---|---|
| 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 元素 |
14.2 结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
/* 选择 ul 里面的第一个孩子 li */
ul li:first-child {
}
/* 选择 ul 里面所有偶数个的孩子 li */
ul li:nth-child(even) {
}
/* 将 div 所有的的孩子排序，如果第一个孩子是 p 元素 则选中，不是则不选中 */
div p:nth-child(1){
}
/* 选择 div 中第一个类型为 p 的孩子 */
div p:first-of-type {
}
/* 选择 div 中第一个类型为 span 的孩子 */
div span:nth-of-type(1){
}
nth-child (n) 选择某个父元素的一个或多个特定的子元素。n可以是数字，关键字和公式。
n如果是数字，就是选择第n个子元素，里面数字从1开始。
n可以是关键字：even偶数，odd奇数。
n可以是公式，默认从0、1、2、3…开始。n(所有)、2n(偶数个)、n+3(第3、4、5…个，从第三个开始)、-n+3(第3、2、1个，前三个)
| 选择符 | 描述 |
|---|---|
| E:first-child | 匹配父元素中第一个子元素 E |
| E:last-child | 匹配父元素中最后一个子元素 E |
| E:nth-child(n) | 匹配父元素中第 n 个子元素 E |
| E:first-of-type | 指定类型 E 的第一个 |
| E:last-of-type | 指定类型 E 的最后一个 |
| E:nth-of-type(n) | 指定类型 E 的第 n 个 |
14.3 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 描述 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意∶
1、before和after创建一个元素，但是属于行内元素。
2、新创建的这个元素在文档树中是找不到的，所以我们称为伪元素语法: element::before{ } 。
3、before和after必须有content属性。content: ’ '，用单引号括起来,可以留空。
4、伪元素选择器和标签选择器一样，权重为1。
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e';
font-size: 20px;
}
14.4 css3 盒子模型
CSS3中可以通过 box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况∶
- box-sizing:content-box 盒子大小为width + padding + border（以前默认的)。
- box-sizing:border-box盒子大小为width。
如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了。
前提padding和border不会超过width宽度。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
14.4 图像模糊
css3中的 filter 属性将模糊或者颜色偏移等图形效果应用于元素。
/* blur是一个模糊处理函数，数值越大越模糊 */
filter: blur(5px);
14.5 calc 函数
calc 函数可以在声明css属性值时执行一些计算，括号内可以使用 + - * / 来进行计算。
/* 永远比父盒子的宽度小30px */
width: calc(100% -30px);
14.6 过渡
过渡( transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另外一个状态。可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持( ie9以下版本）但是不会影响页面布局。我们现在经常和 :hover 一起搭配使用。
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性︰想要变化的css属性，宽度、高度、背景、颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间:单位是秒(必须写单位）比如0.5s。
- 运动曲线︰默认是ease(可以省略)。
- 何时开始︰单位是秒(必须写单位)可以设置延迟触发时间默认是0s（可以省略)。
注意：谁变化给谁加。如果需要变化多个属性用逗号隔开。如： transition: width .5s , height .5s;
十五、2D转换
15.1 移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似于定位。
/* 语法 */
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
重点：
定义2D转换中的移动，沿着 X 和 Y 轴移动元素。
translate 最大的优点：不会影响到其他元素的位置。
translate 中的百分比单位是相对于自身元素的 translate:(50%,50%);
对行内标签没有效果。
15.2 旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
/* 语法 */
transform: rotate(度数);
重点：
rotate 里面跟度数，单位是 deg 比如 rotate（45deg）
角度为正时，顺时针，负时，为逆时针。
默认旋转的中心点是元素的中心点，或者是元素X轴和Y轴的50%处。
旋转点可以通过 ： transform-origin 改变，属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom这样的关键词。
15.3 缩放 scale
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
/* 语法，注意其中的 x 和 y 用逗号分隔。 */
transform: scale(x,y);
注意：
transform: scale(1,1); 宽和高都放大一倍，相当于没有放大。
transform: scale(2,2); 宽和高都放大了2倍。
transform: scale(2); 只写一个参数，默认第二个参数与第一个一致，相当于 scale（2,2）
transform: scale(0.5,0.5) 缩小。
scale 缩放最大的优势：可以设置装换中心点缩放，默认以中心点缩放，而且不会影响到其他的盒子。
15.4 综合写法
同时使用多个2D转换，其语法格式为：
transform: tianslate() rotate() scale()...等
注意：
其语法的先后顺序会影响转换的效果。（如果先旋转会改变坐标轴的方向）
当我们同时有位移和其他属性的时候，注意要将位移放在最前。
十六、动画
16.1 基本使用
制作动画分为两步：
1、先定义动画。
2、再使用（调用）动画。
1、用 keyframes 定义动画（类似定义类选择器）
动画序列
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。
@keyframes 动画名 {
0%{
width:100px;
}
100%{
width:200px;
}
}
2、元素使用动画
div{
width: 200px;
height: 200px;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
16.2 动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state 属性。 |
| animation-name | 规定@keyframes动画的名称。（必须） |
| animation-duration | 规定动画一个周期所花费的秒或毫秒，默认是 0 。（必须） |
| animation-timing-function | 规定动画的速度曲线，默认是 “ease” |
| animation-delay | 规定动画何时开始，默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数，默认是1 ，无限播放为：infinite。 |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是 “normal” ，alternate 逆播放。 |
| animation-play-state | 规定动画是否正在运行或者暂停，默认是 “running” ，还有 “pause”。 |
16.3 动画简写属性
/* 简写属性 */
animation ：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态；
简写属性里面不包含：animation-play-state
暂停动画：animation-play-state：puased；经常和鼠标经过等效果配合。
想要动画走回来，而不是直接跳回来：animation-direction: alternate ;
盒子动画结束后，停在结束位置：animation-fill-mode: forwards
扫一扫
1605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
