CSS

小tips

写标签时，只写标签名字，然后按Tab键，会帮我们自动补全

ctrl+g 快速跳转行数

基础选择器

选择器分类

基础选择器
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
复合选择器
- 后代选择器 *
- 子选择器
- 并集选择器
- 伪类选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

标签选择器：把某一类标签全部选择出来

p {
	color: green;
}

类选择器：差异化选择不同的标签

<div class="red">变红色</div>

.red {
	color: red;
}

多类名

<div class="pink fontweight font20">张三</div>
<div class="font20">李四</div>
<div class="font14 pink">王五</div>
<div class="font14">李明</div>

id选择器：为标有特定id的 HTMML元素指定特定的样式，只能调用一次

<div id="pink">飞飞鱼</div>

#pink {
	color: pink;
}

通配符选择器：选取页面中所有元素(标签)

* {
	color: red;
}

字体属性

1.字体系列font-family

p {
	font-family: "微软雅黑";
}
div {
	font-family: Arial,"Microsoft YaHei","微软雅黑";
}

2.字体大小font-size

p {
	font-size: 20px;
}
/* 标题标签比较特殊,需要单独指定文字大小 */
h2 {
  font-size: 18px;
}

3.字体粗细font-weight（100-900）

/* 都是加粗 */
.bold {
	font-weight: 700; 
  font-weight: bold;
}
/* 都是变细（默认） */
.h2 {
	font-weight: 400; 
  font-weight: normal;
}

4.文字样式font-style

/* 倾斜 */
p {
	font-style: italic;
}
/* 使斜体标签(em,i)变正常 */
em {
	font-style: normal;
}

5.复合属性font ·可以省略前两项 ·必须按顺序 否则不生效

div {
  /* 样式 粗细 大小 字体 以空格隔开各个属性*/
	/* font: font-style font-weight font-size/line-height font-family; */
  /* font: italic 700 16px "Microsoft yahei" */
  font:  16px "Microsoft yahei"
}

文本属性

1.文本颜色color

表示	属性值
预定义的颜色值	red，greem，blue，pink
十六进制(最常用)	#FF0000，#FF6600，#29D765
RGB代码	rgb(255,0,0) 或者 rgb(100%,0%,0%)

2.对齐文本text-align（只能设置文字水平对齐方式）

属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

3.装饰文本text-decoration

属性值	描述
none	默认。无装饰线
underline	下划线。链接a自带下划线
overline	上划线。
line-through	删除线。

4.文本首行缩进text-indent

p {
	/* 缩进20px（可为负值） */
	font-indent: 20px;
	/* 缩进两个字符 */
  font-indent: 2em;
}

em 是一个相对单位，就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小，则会按照父元素的1个文字大小。

5.行间距line-height

p {
	/* 上间距+下间距+文本高度=行间距 */
 	/* 字体默认大小为16px，则上下间距各为5px */
	line-height: 26px
}

6.文字阴影text-shadow

 p {
   text-shadow: h-shadow v-shadow blur color;
}

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

css样式表

1.内联样式：在HTML元素的style属性中直接编写CSS代码。

<p style="color: red; font-size: 16px;">这是一个红色字体的段落。</p>

2.内部样式表：在HTML文档的<head>标签内使用<style>标签编写CSS代码。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>这是一个红色字体的段落。</p>
</body>
</html>

3.外部样式表：将CSS代码保存在一个单独的文件中，然后在HTML文档中使用<link>标签引入该文件。例如，创建一个名为style.css的文件，内容如下：

p {
  color: red;
  font-size: 16px;
}

然后在HTML文档中引入该文件：

<!DOCTYPE html>
<html>
<head>
  <!-- 输入link按 Tab 键可以自动补全，只需写路径 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>这是一个红色字体的段落。</p>
</body>
</html>

emmet语法

快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成
如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的，可以用自增符号 $
如果想要在生成的标签内部写内容可以用 { } 表示

快速生成CSS样式语法

CSS 基本采取简写形式即可

比如 w200 按tab 可以生成 width: 200px;

比如 lh26px 按tab 可以生成 line-height: 26px;

快速格式化代码

Vscode 快速格式化代码: shift+alt+f

复合选择器

后代选择器 *
子选择器 *
并集选择器
伪类选择器

后代选择器

元素1 元素2 { 样式声明 }

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

子选择器

元素1 > 元素2 { 样式声明 }

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管

并集选择器

元素1,元素2 { 样式声明 }

元素1 和元素2 中间用逗号隔开
并集选择器竖着写元素

伪类选择器

链接伪类选择器

标签	解释
`a:link`	未访问的链接
`a:visited`	访问过的链接
`a:hover`	鼠标经过时的链接
`a:active`	鼠标按下但还未弹起时的链接

链接伪类选择器注意事项

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

记忆法：love hate 或者 lv 包包 hao 。

因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

一般实际开发中就用到a:hover

a {
	color: #333;
	text-decoration: none;
}

a:hover {
	color: #369;
	text-decoration: underline;
}

:focus 伪类选择器

选择获得光标的表单

input:focus {
  background-color:yellow;
}

css的显示模式

伪元素默认是行内元素

元素显示模式的转换

转换为块元素：display:block; *
转换为行内元素：display:inline;
转换为行内块：display: inline-block; *

单行文字垂直居中

设置行高等于盒子高度

css的背景

1.背景颜色background-color

background-color: translate;

2.背景图片background-image

background-iamge: none | url(url);

3.背景平铺bacground-repeat

bacground-repeat: repeat | no-repeat | repeat-x | repeat-y;

4.背景图片位置background-position

background-position: x y;
/* 方位名词：top、bottom、center、left、right */
/* 可以只写一个，另一个默认居中 */
/* 两个顺序可以互换 */
background-position: center top;
/* 精确单位：像素、百分数 */
/* 两个顺序不可以互换 */
/* 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中 */
background-position: 20px 50px;
/* 可以混合使用，但是顺序为先x后y */
background-position: center 10px;

5.背景图像固定background-attachment

background-attachment: scroll | fixed;

参数	作用
scoll	背景图像是随对象内容滚动
fixed	背景图像固定

6.复合写法background

div {
	/* background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; */
  background:transparent url(image.jpg) repeat-y fixed top ;
}

7.背景色半透明rgba

CSS3新增属性是IE9+ 版本浏览器才支持的

alpha 透明度 0-1 透明-不透明

background: rgba(0, 0, 0, 0.3)
/* 我们习惯把 0.3的0省略掉 */
background: rgba(0, 0, 0, .3)

css三大特性

层叠性
继承性
优先级
选择器选择器权重
继承或者 * 0
元素选择器 1
类选择器，伪类选择器 10
ID选择器 100
行内样式 style="" 1000
!important 重要的无穷大

选择器	选择器权重
继承或者 *	0
元素选择器	1
类选择器，伪类选择器	10
ID选择器	100
行内样式 `style=""`	1000
!important 重要的	无穷大

权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重。不会有进位。

div ul li ——> 0,0,0,3
.nav ul li ——> 0,0,1,2
a:hover —–—> 0,0,1,1
.nav a ——> 0,0,1,1

盒子模型

盒子模型组成：

边框、外边距、内边距、和实际内容

1.边框border

border : border-width || border-style || border-color;   

div {
  width: 300px;
  height: 200px;
  border-width: 5px;
  border-style: solid; /* 实线 */
  border-style: dashed;/* 虚线 */
  border-style: dotted;/* 点线 */
  border-color: blue;
}

div {
  width: 300px;
  height: 200px;
  /* 边框的复合写法 没有顺序 */
  border: 5px solid blue;
}

表格的细线边框border-collapse

  /* collapse 合并 */
border-collapse: collapse;

2.内边距padding

div {
  width: 300px;
  height: 200px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

复合写法

值的个数	表达意思
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像素顺时针

如果盒子本身没有指定 width/height 属性,则此时 padding 不会撑开盒子大小

3.外边距margin

div {
  width: 300px;
  height: 200px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

复合写法

值的个数	表达意思
margin: 20px;	1个值，代表上下左右都有20像素内边距;
margin: 20px 10px;	2个值，代表上下内边距是20像素左右内边距是10像素;
margin: 5px 10px 20px;	3个值，代表上内边距5像素左右内边距10像素下内边距20像素;
margin: 5px 10px 20px 30px;	4个值，上是5像素右10像素下20像素左是30像素顺时针

4.块级盒子水平居中

指定了宽度（width）
左右外边距设为 auto

.header{
  width: 1920px;
  margin: 0 auto;
}

注意:

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可.

5.嵌套块元素垂直外边距的塌陷

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden。

border: 1px solid transparent;
padding: 1px;
overflow: hidden;

6.清除内外边距

 * {
    padding: 0;   /* 清除内边距 */
    margin: 0;    /* 清除外边距 */
  }

注意:

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

7.盒子阴影box-shadow

.box {
  box-shadow: h-shadow v-shadow blur spread color inset; 
}

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影（outset）改为内部阴影。

注意：

默认的是外阴影（outside），但是不可以写这个单词，否则导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

8.圆角边框border-radius

.box {
  border-radius: 10px;
  border-radius: 50%;
  border-radius: 5px 10px 15px 20px;
}

可以分开写：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

9.清除无序列表 li 的小圆点list-style

li {
  list-style: none;
}

浮动

传统网页布局的三种方式

普通流（标准流）
浮动
定位

标准流（普通流/文档流）

所谓的标准流: 就是标签按照规定好默认方式排列

块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

浮动

div {
  float: none; 
  float: left;
  float: right;
}

浮动特性

浮动元素会脱离标准流
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

注意：

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

网页布局策略

网页布局第一准则

先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

网页布局第二准则

先设置盒子大小,之后设置盒子的位置

常见网页布局

注意：

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

清除浮动

清除浮动本质

清除浮动元素造成的影响，浮动的子标签无法撑开父盒子的高度

注意：

如果父盒子本身有高度，则不需要清除浮动清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动样式

div {
  clear: left | right | both;
}

实际工作中，几乎只用 clear: both;

清除浮动的策略是：闭合浮动

清除浮动的多种方式

额外标签法

在浮动元素末尾添加一个空的标签。

<div style="clear: both"></div>

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

父级添加 overflow 属性

overflow: hidden | auto | scroll;

优点：代码简洁

缺点：无法显示溢出的部分

注意：是给父元素添加代码

父级添加 :after 伪元素

:after 方式是额外标签法的升级版。给父元素添加

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

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

 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;
 }

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站：百度、淘宝网、网易等

父级添加双伪元素

给父元素添加

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

.clearfix:before,
.clearfix:after {
  content: "";   
  display: table;  
} 

.clearfix:after {
  clear: both; 
} 

.clearfix {
  *zoom: 1; 
}

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等

总结

清除浮动的方式	缺点
额外标签法(隔墙法)	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	溢出隐藏
父级:after伪元素	由于IE6-7不支持:after，兼容性问题
父级双伪元素	由于IE6-7不支持:after，兼容性问题

CSS 属性书写顺序

边框背景不能忘，文字属性紧跟上

样式顺序有讲究，否则显得不专业

转换浮动藏溢出，宽高边距接着列

建议遵循以下顺序

1.布局定位属性:

display / position / foat / clear / visibility / overflow

( 建议 display第一个写，毕竟关系到模式 )

2.自身属性:

width / height / margin / padding / border / background

3.文本属性 :

color / font / text-decoration / text-align / vertical-align / white-space / break-word

4.其他属性 ( CSS3 ):

content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient..

页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路，具体如下：

1.必须确定页面的版心（可视区），我们测量可得知。

2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.

3.一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则

4.制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.

5.所以, 先理清楚布局结构,再写代码尤为重要.

开发注意

元素一浮都浮

导航栏

实际开发中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法

行内块元素会有缝隙，使用浮动，可以去缝隙

浮动的元素不会有外边距塌陷的问题，可以放心加padding-top

定位

定位 = 定位模式 + 边偏移

定位模式 (position)

静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed

边偏移

top
bottom
left
right

div {
  position: static | relative | absolute | fixed;
}

静态定位static

按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的

相对定位relative

相对于自己原来的位置来移动的
相对定位并没有脱标

绝对定位absolute

是相对于它的祖先元素来移动的
完全脱标
父元素没有定位，则以浏览器为准定位（Document 文档）
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

子绝父相

子级是绝对定位的话，父级要用相对定位。

固定定位fixed

可以在浏览器页面滚动时元素的位置不会改变。
以浏览器的可视窗口为参照点移动元素。
脱标

提示：IE 6 等低版本浏览器不支持固定定位。

粘性定位sticky

可以被认为是相对定位和固定定位的混合

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。 兼容性较差，IE 不支持

注意：

边偏移需要和定位模式联合使用，单独使用无效；
top 和 bottom 不要同时使用；
left 和 right 不要同时使用。
如果一个盒子既有left属性也有right属性，则默认会执行left属性。同理 top bottom会执行 top

定位的应用

元素固定在版心左侧位置

<style>
    .w {
        width: 800px;
        height: 1400px;
        background-color: pink;
        margin: 0 auto;
    }

    .fixed {
        position: fixed;
        /* 1. 走浏览器宽度的一半 */
        left: 50%;
        /* 2. 利用margin 走版心盒子宽度的一半距离 */
        margin-left: 405px;
        width: 50px;
        height: 150px;
        background-color: skyblue;
    }
</style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>

堆叠顺序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

属性值：正整数、负整数或 0，默认值是 0（auto），数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。

注意：

z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

div {
  z-index: 1; 
}

绝对定位的盒子居中

垂直居中

position: absolute;
top: 50%;
margin-top: 1/2 height;

水平居中

position: absolute;
left: 50%;
margin-top: 1/2 width;

加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

定位特殊特性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

前面我们讲过， display 是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等

脱标的盒子不会触发外边距塌陷

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

元素的显示与隐藏

display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏

display

display: none 隐藏对象
display: block 除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置。

visibility

visibility: visible 元素可视
visibility: hidden 元素隐藏

visibility 隐藏元素后，继续占有原来的位置

overflow

overflow: visible 溢出可视（默认）

overflow: hidden 溢出隐藏

overflow: scroll 溢出的部分显示滚动条不溢出也显示滚动条

overflow: auto 溢出的时候才显示滚动条不溢出不显示滚动条

溢出显示隐藏但是只是对于溢出的部分处理

注意：

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用 overflow:hidden 因为它会隐藏多余的部分

精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

使用精灵图核心总结:

1.精灵图主要针对于小的背景图片使用。

2.主要借助于背景位置来实现—background-position。

3.一般情况下精灵图都是负值。(千万注意网页中的坐标:x轴右边走是正值，左边走是负值，y轴同理。)

字体图标

优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

推荐下载网站:

icomoon字库

阿里 iconfont 字库

字体图标的引入

icomoon字库

1.下载完毕之后，注意原先的文件不要删，后面会用。

2.把下载包里面的 fonts 文件夹放入页面根目录下

3.在 CSS 样式中全局声明字体

/* 字体声明 */
@font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
   url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
   url('fonts/icomoon.woff?7kkyc2') format('woff'),
   url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

4.从网页复制小图标

5.html 标签内添加小图标。

6.给标签定义字体。

span {
  font-family: "icomoon";
  font-size: 20px;
  color: #fff;
}

注意：

务必保证这个字体和上面@font-face里面的字体保持一致

字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。

css三角

div {
  width: 0; 
  height: 0;
  border: 50px solid transparent;
  border-color: red green blue black;
  /* 照顾兼容性 低版本的浏览器 */
  line-height:0;
  font-size: 0;
 }

京东三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;  
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>

一个span标签实现铅笔样式

用户界面样式

1.光标样式cursor

li { cursor: pointer; }

属性值	描述
default	箭头默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.轮廓线outline

去掉输入框的边框线

<input type="text">

input, textarea{
	outline: none | 0;
}

3.防止拖拽文本域resize

<textarea name="" id="" cols="30" rows="10"></textarea

textarea{  	
   resize: none;
}

vertical-align

图片、文本域和文字实现垂直居中对齐

前提：

元素必须是行内块或者行内元素才能使用这个属性。图片和文本域都属于行内块元素

/* 默认按基线对齐 */
vertical-align : baseline | top | middle | bottom 

<img src="img/first.jpg">测试文字居中对齐
<style>
img {
  vertical-align: middle;
}
</style>

如果是块级元素，则

i {
	display: inline-block;
  vertical-align: middle;
}

解决图片底部默认空白缝隙问题

bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

给图片添加 vertical-align: middle | top | bottom 等。(提倡使用的)
把图片转换为块级元素 display: block;

溢出的文字省略号显示

单行文本

/*1. 先强制一行内显示文本*/  
white-space: nowrap;  （ 默认 normal 自动换行）     
/*2. 超出的部分隐藏*/  
overflow: hidden;     
/*3. 文字用省略号替代超出的部分*/  
text-overflow: ellipsis;

测试：

<div>啥也不说，此处省略一万字</div>

<style>
div {
  width: 150px;
  height: 80px;
  background-color:pink;
  margin: 100px auto;
	/* 这个单词的意思是如果文字显示不开自动换行 */
	/* white-space: normal;*/
	/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示*/
	white-space: nowrap;
	/* 2.溢出的部分隐藏起来 */
	overflow: hidden;
	/* 3.文字溢出的时候用省略号来显示*/
	text-overflow: ellipsis;
</style>

多行文本

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端 ( 移动端大部分是webkit内核 )

/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单

常见布局技巧

margin负值的运用

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性，只对图片做左浮动就行，文字不会被压住

翻页设计

页码在页面中间显示:

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center ; 行内块元素会水平会居中

直角三角形

<style>
    .box1 {
        width: 0;
        height: 0;
        /* 把上边框宽度调大 */
        /* border-top: 100px solid transparent;        border-right: 50px solid skyblue; */
        /* 左边和下边的边框宽度设置为0 */
        /* border-bottom: 0 solid blue;        border-left: 0 solid green; */
        /* 1.只保留右边的边框有颜色 */
        border-color: transparent red transparent transparent;
        /* 2. 样式都是solid */
        border-style: solid;
        /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
        border-width: 100px 50px 0 0;
    }
</style>
</head>

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

京东价格样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS三角强化的巧妙运用</title>
    <style>
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="price"> <span class="miaosha"> ￥1650 <i></i> </span> <span class="origin">￥5650</span> </div>
</body>

</html>

css初始化

京东初始化代码

/* 把我们所有标签的内外边距清零 */
* {
  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 {
  color: #666;
  text-decoration: none
}

a:hover {
  color: #c81623
}

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;
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  color: #666
}

.hide,
.none {
  display: none
}

/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0
}

.clearfix {
  *zoom: 1
}

宋体 \5B8B\4F53
黑体 \9ED1\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

HTML5新特性

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

语义化标签（★★）

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的

<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签

多媒体标签

audio 音频
video 视频

视频标签- video

 <video src="media/mi.mp4"></video>

兼容写法

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

<video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持 <video> 标签播放视频
</video >

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	px	设置播放器宽度
height	px	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
lpreload	auto(预先加载视频) none(不应加载视频)	规定是否预加载视频(如果有了autoplay 就忽略该属楚)
src	url	视频url地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

<video src="media/mi.mp4" 
       autoplay="autoplay" 
       muted="muted"  
       loop="loop" 
       poster="media/mi9.jpg">
</video>

音频标签-audio

兼容性

<audio  controls="controls">
    <source src="horse.ogg" type="audio/ogg" >
    <source src="horse.mp3" type="audio/mp4" >
    您的浏览器暂不支持 audio 元素
</audio >

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
src	url	要播放的音频的 URL。

<audio src="media/music.mp3" 
			 autoplay="autoplay" 
			 controls="controls">
</audio>

新增的表单元素

<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
    <ul>
        <li>邮箱: <input type="email" /></li>
        <li>网址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>时间: <input type="time" /></li>
        <li>数量: <input type="number" /></li>
        <li>手机号码: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>颜色: <input type="color" /></li>
        <!-- 当我们点击提交按钮就可以验证表单了 -->
        <li> <input type="submit" value="提交"></li>
    </ul>
</form>

常见输入类型

text password radio checkbox button file hidden submit reset image

新的输入类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color'	生成一个颜色选择表单

新增的表单属性

属性	值	说明
required	required	必填
placeholder	提示文本	存在默认值将不显示
autofocus	autofocus	自动聚焦
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=“on”，关闭autocomplete=“off” 需要放在表单内，同时加上 name 属性，同时成功提交
multiple	multiple	可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色

input::placeholder{color: pink;}

CSS3新特性

属性选择器
结构伪类选择器
伪元素选择器

属性选择器[]

 /* 只选择 文本框 中有value属性的 */
input[value] {    
  color: pink;
}
/* 只选择 文本框 中有 type=text 属性的标签  */
input[type=text] {    
  color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {    
  color: red;
}
/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$=data] {    
  color: blue;
}
/* 选择首先是span 然后 具有class属性 并且属性值包含 icon 元素 */
span[class$="icon"] {    
  color: green;
}

注意：

类选择器、属性选择器、伪类选择器，权重为 10。

结构伪类选择器

选择符	简介
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个

E:first-child

匹配父元素的第一个子元素E

<style>
    ul li:first-child {
        background-color: red;
    }
</style>
<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
</ul>

E:nth-child(n)（★★★）

匹配到父元素的第n个元素

n是从0开始，每次递增1

/* odd是奇数 even是偶数 */
ul li:nth-child(2 | odd | even | 公式) {
    background-color: red;
}

一些常用公式

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15
n+5	从第五个开始（含第五个）到最后
-n+5	前五个

辨析：

E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

总结：

结构伪类选择器一般用于选择父级里面的第几个孩子

nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

关于 nth-child(n) 我们要知道 n 是从 0 开始计算的，要记住常用的公式

如果是无序列表，我们肯定用 nth-child 更多

类选择器、属性选择器、伪类选择器，权重为10

伪元素选择器★★★

权重是1
属于行内元素
element::before { }
必须有 content 属性，如无内容，可写 content: ''
新创建的这个元素在文档树中找不到

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

应用场景一：字体图标

在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的编码

步骤：

结构中定义div盒子
在style中先申明字体 @font-face
在style中定义after伪元素 div::after{…}
在after伪元素中设置content属性，属性的值就是字体编码
在after伪元素中设置font-family的属性
利用定位的方式，让伪元素定位到相应的位置；记住定位口诀：子绝父相

应用场景二：遮罩层

步骤：

在 style 中，给外层 div 盒子，设置:before伪元素
content: ''
给这个遮罩设置宽高，背景颜色，默认是隐藏的
当鼠标移入到 div盒子时候，让遮罩显示，利用 hover 来实现

应用场景三：清除浮动

额外标签法也称为隔墙法，是 W3C 推荐的做法。
父级添加 overflow 属性
父级添加after伪元素
父级添加双伪元素

父级添加 :after 伪元素

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

.clearfix:after {  
   content: "";  /* 伪元素必须写的属性 */
   display: block;  /* 插入的元素必须是块级 */ 
   height: 0;  /* 不要看见这个元素 */ 
   clear: both;  /* 核心代码清除浮动 */ 
   visibility: hidden;  /* 不要看见这个元素 */  
 } 

 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;
 }

父级添加双伪元素

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

.clearfix:before,
.clearfix:after {
  content: "";   
  display: table;  /* 转换为块级元素并且一行显示 */ 
} 

.clearfix:after {
  clear: both; 
} 

.clearfix {
  *zoom: 1; 
}

盒子模型

box-sizing: content-box
盒子大小为 width + padding + border （默认的）
box-sizing: border-box
盒子大小为 width

模糊filter

blur模糊处理数值越大越模糊

filter: blur(5px);

计算calc函数

width: calc(100% - 30px);

过渡★★★

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

进度条案例

<style>
.bar {
  width: 150px;
  height: 15px;
  border: 1px solid red;
  border-radius: 7px;
  padding: 1px;
}

.bar_in {
  width: 50%;
  height: 100%;
  background-color: red;
  /* 谁做过渡给谁加 */
  /* transition: width .7s; */
  transition: all 0s;
}

.bar:hover .bar_in {
	width: 100%;
  color: blue;
}
</style>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>