一篇CSS的基础知识点汇总

1. 什么是CSS？

• css可以称为css样式表，或者级联样式表
• css也是一种标记语言
• 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
• css是用来美化网页、布局页面的

2. CSS的语法规范

主要由两个部分构成：选择器以及一条或者多条声明

    <style>
        选择器 {样式}
	给谁改样式 {改什么样式}
    </style>

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以键值对形式（属性：属性值）出现，键值对用分号结尾

3. CSS的代码风格

良好的书写风格：样式格式书写、样式大小书写、样式空格风格

样式格式书写

展开格式（更为直观）：

    h3 {
	color : pink;
	font-size : 20px;
    }

样式大小书写

样式用小写书写

样式空格风格

属性值前（冒号后面）保留一个空格
选择器和大括号中间保留空格

4. CSS基础选择器

选择器的作用就是根据不同的需求把不同的标签选出来。简单来说就是选择标签用到的。

选择器的分类：

• 分为基础选择器和复合选择器两大类
  
  

基础选择器是由单个选择器组成的

• 基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器。
  
  

标签（元素）选择器

指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。

标签名 {
	属性：属性值;
	...
}

标签选择器的作用就是把某一类标签全部选择出来。
优点：快速为页面中同类型的标签指定统一的css样式
缺点：不能差异化设置。

类选择器

要差异化不同的标签，单独选择一个或者几个标签，可以使用类选择器。

.类名 {
	属性：属性值;
	...
}
把含有该类的html元素设置为该属性。

调用方式 如:

<div class="类名">Hello World！</div>

注意：

• 类选择器使用“.”（英文）进行标识，后面紧跟类名（自定义），类名不能使用html标签。
• 可以理解为给这个标签起了一个名字，来表示。
• 长名称或者词组可以使用横线来为选择器命名（例如：Hello-World）。
• 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
• 命名要有意义，尽量使别人一眼就知道这个类名的目的（不要写拼音简写）。
• 尽量遵循命名规范。

类选择器——多类名

可以给一个标签指定多个类命名，从而达到更多的选择目的。这些类名都可以选出这些标签。简单来说，就是一个标签有多个名字。

多类名的使用方式
例如

<div class="red font">123</div>

在class属性中些多个类名，各个类名之间必须用空格分开，这个标签可以分别拥有这些类名的样式。

多类名的使用场景

• 可以把一些标签元素相同的样式放到一个类里
  
• 这些标签都可以调用这个公共的类，然后再调用自己独有的类。
  
• 节省CSS代码，统一修改也很方便。

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

#id名 {
	属性：属性值；
	...
}

将id名为xx的元素中的内容设置为某属性值
注意：样式#定义，结构id名调用，只能调用一次。同名id属性只能在每个HTML文档中出现一次

id选择器和类选择器的区别

• 类选择器（class）好比人的名字，一个人可以有多个名字，一个名字也可以被多个人同时使用。
• id选择器好比人的身份证，全国唯一，不能重复。
• 类选择器和id选择器最大的不同在于使用次数上。
• 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

通配符选择器

在CSS中，使用“ * ”定义，表示选取页面中所有的元素。

* {
	属性：属性值；
	...
}

通配符选择器不需要调用，特殊情况才用。

清除所有元素标签的内外边距：

* {
    margin:0;
    padding:0;
}

5. CSS字体属性

字体系列

font-family:'Microsoft Yahei'，'Times New Roman',serif;

字体尽量不要写中文（但也不是不行，但最好还是不要），选择常见字体。
尽量使用系统默认自带字体，保证在任何浏览器中都能显示（谷歌默认是宋体）
如果有多个字体，字体之间要用英文状态的逗号隔开
如果有空格隔开的多个单词组成的字体名字，加引号（单双引号都行）

字体大小

使用font-size属性定义字体大小

    p {	
        font-size:20px;
    }

谷歌浏览器默认文字大小为16px
不同的浏览器可能默认显示的字号不一样，我们尽量给一个明确的大小，不要默认大小
可以给body标签指定整个页面文字的大小
标题标签比较特殊，需要单独指定文字大小

字体粗细

font-weight：normal | bold | bolder | lighter | number;

normal：正常（400）
bold：粗体(700)
bolder：特粗体
lighter：细体
number：数字后面不要加单位。实际开发中 ，提倡使用数字

文字样式

    p {
	font-style：normal;
    }

normal：默认值，浏览器会显示标准的字体样式 font-style:normal;
italic：浏览器会显示斜体的字体样式。(一般不使用，一般将倾斜的改成不倾斜)

<em>下课</em> （em标签使字体倾斜）

使用
em {
	font-style：normal；
}
将字体改成不倾斜的字体。

字体的复合属性

可以这样书写以 节约代码：

body {
	font:font-style font-weight font-size/line-height font-family;
}

line-height：行高

复合属性的书写顺序不能改
不需要设置的属性可以省略，但是必须保留font-size和font-family属性。否则font属性将不起作用。

6. CSS的文本属性

文本颜色

color：pink |十六进制（#ff0000）|RGB（rgb（255,0,0））

十六进制中，两两字符相同的颜色可以简写，如 #000

对齐文本

text-align属性 用于设置元素内文本内容的水平对齐方式 属性值可以设置为：left、center、right

装饰文本

text-decoration属性规定添加到文本的装饰。可以添加下划线、删除线、上划线等。

属性值有：

• none：默认。没有装饰线（最常用）一般用来去除a标签默认样式的下划线。
• underline：下划线。链接a自带下划线（常用）
• overline：上划线。（几乎不用）
• line-through删除线。（不常用）

主要记住怎么删除和添加下划线。

文本缩进

text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进 （只缩进首行）

div{
    text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

p {
    text-indent:2em;
}

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

行间距（上间距+文本高度+下间距）

line-height属性可以设置行间的距离（行高），可以控制文字行与行之间的距离
修改行高修改的是上下间距。上下间距相等

单行文字垂直居中的原理： 让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

7.CSS的引入方式

按照CSS书写的位置（或者引入方式，CSS样式表可以分为三大类）：

• 行内样式表（行内式）
• 内部样式表（嵌入式）
• 外部样式表（链接式）

内部样式表

是写到HTML页面内部。是将所有的CSS代码抽取出来的，单独放到一个style标签中

    <style>
        div {
            color:red;
	}
    </style>

理论上可以放到HTML文档的任何地方，但一般会在文档的head标签中
这种方式方便控制当前整个页面中的元素样式设置
代码结构清晰，但没有实现结构与样式完全分离
这种使用内部样式表核定CSS，通常也被称为嵌入式引用，这种方式是我们练习时常用的方式。

行内样式表

是在元素标签内部的style属性中设定CSS样式。适合于简单修改样式。

<div style="color:red; font-size:12px;">好好学习</div>

书写繁琐，没有体现出结构与样式相分离的思想，不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
使用行内样式设定css，通常也称为行内式引入

外部样式表

开发中使用最多。样式单独写到css文件里，之后把css引入到HTML文件中使用。
在HTML文件中，使用link标签引入这个文件。

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

使用外部样式表设定CSS，通常被称为外链式或者链接式引用。

8. Chrome调试工具

按F12或者右击空白处，点击检查。
Ctrl+滚轮可以放大或者缩小开发者工具代码大小
CSS样式改动数值可以通过上下箭头或者直接输入。

如果点击元素却没有样式引人，可能是类名或者样式引入错误。
如果有样式，但是样式前面有黄色感叹号提示，则是样式属性书写错误。

9. Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高HTML/CSS的编写速度,VScode内部已经集成该语法.

快速生成HTML结构语法

1. 生成标签：直接输入标签名，按tab键 比如div然后tab键就可以生成一对div
2. 如果想要生成多个相同标签 加上*，比如div*3 然后按tab键 可以快速生成3对div
3. 如果是父子级可以使用>, 比如ul>li然后tab键
4. 如果是兄弟级可以使用+，比如div+p 然后tab键
5. 比如带有类名或者id名字的，可以直接写.demo或者#two 然后tab键，如果不想生成div的，可以在.或者#前面加上约束，比如ul.demo 然后tab键
6. 如果想要生成的div是有顺序的，可以使用自增符$
7. 如果想要在生成的标签里写内容可以用{内容}表示，比如div{好好学习}

同一列填入相同值shift+alt拖动鼠标左键拉下去，填入值即可。
快速生成css样式：输入样式缩写即可。
加上属性值可以写成属性缩写属性值 比如w100结果就是width:100;

10. 快速格式化代码

快捷键：shift+alt+f

也可以设置保存页面时，自动格式化代码:
文件-->首选项-->设置，搜索format，勾上Editor：Format On Save

11. CSS的复合选择器

建立在基础选择器上，可以高效准确的选择目标元素（标签） 由两个或多个基础选择器通过不同方式组合成的

复合选择器包括：后代选择器、子（元素）选择器、并集选择器、伪类选择器等

后代选择器

又称包含选择器，可以选择父元素里面的子元素。 写法：把外层标签写在前面，内层标签写在后面，中间用 空格 分隔。内层标签就是外层标签的后代。
例如：

ul li {
	样式
}

意思是选择ul中的所有的li，最终修改的是li的样式，ul起限定作用。

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

最终选择的是元素2，元素2可以是“儿子”，也可以是“孙子”，只要是元素1的后代即可。

元素1和元素2可以是任意基础选择器（标签选择器、类选择器、id选择器和通配符选择器）

子元素选择器

只能选择作为某元素的最近一级子元素。即选亲儿子元素。

.hot>a {
	样式声明
}

选择元素1（例如class="hot"）里面的所有直接后代（子元素）元素2（例如a）,最终选择改变样式的是元素2

并集选择器（重要）

可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

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

表示选择元素1、元素2和元素3

逗号可以认为是和的意思

约定的语法规范，并集选择器竖着写

链接伪类选择器

用于向某些选择器添加特殊效果，比如给链接添加特殊效果、选择第1个、第n个元素。

伪类选择器最大的特点是 用冒号（：）表示，比如 ：hover 或 ：first-child
伪类选择器有很多，比如链接伪类、结构伪类等。

链接伪类选择器

• a:link 选择所有未被访问的链接
• a:visited 选择所有已被访问的链接
• a:hover 选择鼠标指针位于其上的链接
• a:active 选择活动链接（鼠标按下未弹起的链接）

注意：为了确保生效，按照LVHA（link、visited、hover、active）的顺序声明（LV包HAO）
因为a链接在浏览器中具有默认样式，所以实际开发中需要给链接单独指定样式

链接伪类在实际开发中的写法

a {
	color:grey;
}

a:hover {
	color:red;  /*鼠标经过的时候，由原来的灰色变成红色*/
}

focus伪类选择器

用于选取获得焦点的表单元素
焦点就是光标，一般情况input表单元素才能获取
因此这个选择器主要针对表单元素来说

input:focus {
    background-color:yellow;
}

12. CSS的元素显示模式

什么是元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占一行，比如一行可以放多个span

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点就可以更好的布局我们的网页

HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素。

块元素的特点：
比较霸道，自己独占一行
高度、宽度、内外边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素

注意：
文字类的元素内不能使用块级元素
p标签主要用于存放文字，因此p里面不能放其他块级元素，特别是不能放div
同理，h1-h6都是文字类的块级标签，里面也不能放其他块级元素

行内元素

常见的有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
<span>标签是最典型的行内元素（有时称为内联元素）。

行内元素的特点：
相邻行内元素在一行上，一行可以显示多个
宽、高直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意：
行内元素不允许放块级元素
链接里面不允许放链接
a标签可以放块级元素，但是给a转换一下块级模式最安全

行内块元素

行内元素有几个特殊的标签：  <img />、<input />、<td>,他们同时具有块元素和行内元素的特点。

行内块元素的特点：
和相邻行内元素（行内块元素）在一行上，但他们之间有空白缝隙，一行可以显示多个（行内元素的特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度、行高、外边距以及内边距都可以控制（块级元素特点）

总结：

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度、高度	容器的100%	容器可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度、高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

元素显示模式的转换（重点）

简答理解：一个模式元素想要另外一种模式元素的特性（比如想要增加a标签的触发（点击）范围）

转换为块元素：（重要）

display: block;

转换为行内元素：

display: inline;

转换为行内块元素：(重要)

display: inline-block;

Snipaste取色

截取图片，将鼠标移到图上需要取色的地方
shift键转换需要获得的颜色格式（十六进制表示）
按C即可得到十六进制颜色

13. CSS的背景

背景颜色

background-color：颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景元素为透明色

背景图片

background-image属性描述了元素的背景图片
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片
优点是非常便于控制位置（精灵图也是一种应用场景）

background-image：none(默认) | url();

背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性

background-repeat:repeat(默认平铺)|no-repeat|repeat-x|repeat-y；

我们写代码一般都是让它不平铺（no-repeat）
页面元素既可以添加背景元素也可以添加背景图片，只不过背景图片会压住背景颜色

背景位置

利用background-position属性改变图片在背景中的位置

backgroun-position：x y;  (参数x和y代表坐标，可以使用方位名词或者精确单位)

参数值	说明
length	百分数 、由浮点数字和单位标识符组成的长度值。
position	top、center、bottom、left、cente、center、right

参数是方位名词

参数如果是方位名词，则两个值的前后顺序无关，比如left top和top left效果一样

如果只指定了一个方位名词，另一个值省略，则第二个默认居中对齐。

参数有精确单位

如果参数是精确坐标，那么第一个一定是x坐标，第二个一定是y坐标。（x，y）有严格的顺序。

如果只指定了一个数值，那该数值一定是x坐标，另一个默认垂直居中。

background-position:20px 40px;

参数是混合单位

如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是x坐标，第二个值是y坐标

background-position:center 40px; 水平居中，垂直图片距离顶部有40px距离

背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment否器可以制作数据额滚动的效果

background-attachment:scroll;背景图像随对象内容滚动
background-attachment:fixed;背景图像固定

背景属性复合写法

将背景属性的代码合并写在同一属性background中。从而节约代码量。
使用简写属性时，没有特定的书写顺序，一般的习惯的约定顺序为：

**background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置;(实际开发提倡)**

背景颜色半透明

background:rgba(0,0,0,0.3);

最后一个参数是alpha透明度，取值范围在0-1之间。
0 是完全透明，1 是完全不透明
习惯上会把0.3写成 .3
背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
i9+版本的浏览器支持，但在实际开发中，我们不太关注兼容性的写法，可以放心使用。

14. CSS的三大特性

层叠性、继承性、优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
层叠性主要解决样式冲突的问题。

层叠性原则：
样式冲突，遵循的是就近原则。离哪个样式近，就执行哪个样式。
样式不冲突不会层叠

继承性

子标签会继承父标签的某些样式，比如文本颜色和字号。 子承父业
在Chrome的调试工具中会出现 inherited(继承)from 父标签
恰当使用可以简化代码，降低css的复杂性
子元素可以继承父元素和文字相关的一些样式（text-、font-、line-）

行高的继承性：

body {
	font：12px/1.5 Microsoft Yahei;
}

行高可以加单位也可以不加单位
如果子元素没有设置行高，就会继承父元素的行高为1.5
此时子元素的行高是：当前文字大小*1.5
这样的写法最大的优势就是子元素可以根据自己的文字大小自动调整行高（实际开发中常见）

优先级

选择器相同，执行层叠性
选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important 重要的	∞无穷大

样式；前加上 !important

优先级注意点： 权重是由四位数组成，但不会有进位
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重永远是0

优先级权重的叠加：（重要）
权重叠加：如果是复合选择器，就会有权重叠加，需要计算权重。遇到后代选择器，把权重累加

不会有进位：举个例子比如说有十个标签选择器，也只会变成0,0,0,10。
比较的时候是逐位比较。

• 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

15. 盒子模型

网页布局有三大核心：盒子模型、浮动和定位。

网页布局的本质： 利用CSS摆盒子。
先准备好相关的网页元素，基本都是盒子
利用CSS设置好盒子的样式，然后放到相应的位置
在盒子里装入内容

盒子模型的组成

把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个装内容的容器。
CSS盒子模型本来就是一个盒子，封装周围的HTML元素，它包括：边框、外边框、内边距、实际内容。

内边距（padding）：内容（content）和边框（border）的距离
外边距（margin）:盒子和盒子之间的距离

边框（border）

边框由三部分组成：边框宽度（粗细）、边框样式、边框颜色

border：border-width | border-style | border-colors

常用边框样式：
solid: 实线边框
dashed: 虚线边框
dotted: 点线边框

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框简写：

border：1px solid red;  没有顺序

边框分开写法：
border-top:1px solid red;  上边框
boeder-bottom：1px deshed red；下边框
其他边框同理。

表格的细线边框

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

例如：

th{
	height:20px
}

table,
td,th {
	border:1px solid pink;
	border-collapse:collapse;
	text-align:center;
}

边框会影响盒子的实际大小
最后像素=盒子+边框

解决方法：
测量盒子时不带边框
width和height减去边框（注意边框分左右）

内边距（padding）

设置盒子的内容和边框的距离

属性：padding-left、padding-right、padding-top、padding-bottom

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像素

padding值会影响盒子的大小
就是说，如果盒子已经设置了宽度和高度，再指定内边距，会撑大盒子。

解决方法：
修改weight和height，减去多出来的内边距的大小

注意：

给盒子宽度不合理，比如说导航栏某选项字数不一样多的时候。给盒子padding合理，让padding撑开盒子，使选项左右两边padding值距离相同。

如果盒子本身没有指定width属性和height属性，padding不会撑开盒子大小。只要有width，就一定会撑开。(注意)

外边距（margin）

用于设置外边框，即盒子和盒子的距离

属性：margin-left  margin-right  margin-top  margin-bottom

margin的简写方式（复合属性）和padding一样

外边距可以让块级盒子水平居中，但是必须满足两个条件:

1. 盒子必须指定了宽度width
2. 盒子左右外边距都设置为auto

header {
	width:960px;
	margin:0(随便设置) auto;
}

以上做法是让块级元素水平居中

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

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

主要有两种情况：

1. 相邻块元素垂直外边距的合并
2. 嵌套块元素垂直外边距的塌陷

相邻块元素垂直外边距的合并

.damao {
	margin-bottom:100px;
}
.ermao {
	margin-top:200px;
}

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离取两个中的较大者
解决方案: 尽量只给一个盒子添加margin值。

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

对于（两个）嵌套关系（父子关系）的块元素，父元素有上外边距的同时，子元素也有上外边距，此时父元素会塌陷较大的外边距值（父元素会随着子元素一起掉下来...）

解决方法：

1. 给父元素定义上边框（border：1px solid transparent;）其他颜色也可以
2. 可以为父元素定义内边距（padding：1px;）
3. 可以为父元素添加overflow：hidden

浮动、固定、绝对定位的盒子不会有塌陷问题。

清除内外边距

网页很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前要清除网页元素的内外边距。

    * {
	padding:0;
	margin:0;
    }

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

PS的一些及基本操作

ctrl+r打开标尺

按住空格键，鼠标可以变小手，拖动视图

用选区拖动可以测量大小

ctrl+d可以取消选区，或者在空白处点击取消选区。

其实我用的是fireworks...

圆角边框

border-radius属性用于设置元素的外边框圆角

border-radius:像素值（数值或者百分比）;

像素值为height时没有圆角。把角换成半径为 该像素值的圆 的弧。

圆形：
使border-radius:正方形盒子的一半（50%）
50%等价于宽度和高度的一半，等价于正方形盒子边的一半，推荐写50%，不用计算

圆角矩形：
盒子是矩形
border-radius:高度的一半

高度的一半怎么写？

.juyuan {
        width: 300px;
        height: 100px;
        background-color: hotpink;
        border-radius: 50x;
}

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、左下角、右下角。
跟两个值是改变对角线

只想改变一个值可以分开写：

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

盒子阴影

box-shadow属性为盒子添加阴影。

box-shadow:h-shadow v-shadow blur spread color inset 
box-shadow:水平 垂直 模糊距离 阴影尺寸 阴影颜色 内/外阴影

原先盒子没有阴影，但鼠标放上去就添加阴影效果代码：

div:hover{
	box-shadow:10px 10px 20px 1px hotpink;
}

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

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

文字阴影

text-shadow属性

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

16. 网页布局

网页布局的本质——用CSS来摆放盒子，把盒子摆到相应位置。
盒子摆到相应位置，布局自然就完成了。

传统网页布局的三种方式：标准流（普通流）、浮动、定位。

实际开发中，一个页面基本都包含了这三种布局方式（移动端有新的布局方式）

标准流

标签按照默认方式排列。

块元素会独占一行，从上向下排列：
常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右排列，碰到父元素边缘则会自动换行。
常用元素：span、a、i、em等

标准流是最基本的布局方式

浮动

1. 为什么需要浮动？
2. 如何让多个块级盒子排成一行？
   (可以使用行内块元素，但是盒子之间会有空隙，默认多少像素不确定，难以控制)
3. 如何实现一个盒子中两个盒子的左右对齐
   

总结上述问题：

• 有很多的布局效果，标准流没办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素默认标签的排列方式。
• 浮动最典型的应用就是让多个块元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

什么是浮动

float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘

选择器 {float：属性值;}

属性值	描述
none	元素不浮动（默认）
left	元素向左浮动
right	元素向右浮动

浮动特性（重点！！！）

1. 浮动的元素会脱离标准流(脱标)
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会有行内块元素的特性

浮动的元素会脱离标准流(脱标)

• 脱离标准流的控制，移动（浮）到指定位置（动）
• 浮动的盒子不再保留原先的位置，让其他标准流占有

浮动的元素会一行内显示并且元素顶部对齐

• 如果多个盒子都设置了浮动，他们会按照属性值一行内显示并且顶端对齐排列。
• 浮动的元素是互相贴在一起的，(不会有缝隙)如果父级宽度装不下这些盒子，多出的盒子另起一行对齐

浮动的元素会具有行内块元素的特性。

• 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性
• 如果行内元素有了浮动，则不需要转换块级\行内块元素，可以直接给高度和宽度
• 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的大小根据内容来定
• 行内元素同理，加了浮动，就有了行内块元素的特性

注意：

浮动元素经常和标准流父级搭配使用

为了约束浮动元素的位置，我们网页布局一般采取的策略是：
先用标准流的父级元素排列上下位置，之后内部子元素采取浮动排列左右位置。

一个盒子里有多个盒子，如果其中一个盒子浮动了，那么其他兄弟盒子也应该浮动。就是说“一浮全浮”，防止引起问题。
浮动的盒子只会影响浮动的盒子后面的标准流，不会影响前面的标准流。

div没有内外边距，，但是ul有，使用的时候要清除内外边距

标准流的父元素都是有高度的，但是理想状态是让子盒子撑开父盒子。但是不写高度会影响下面的标准流，导致其移位（浮动的盒子脱标了）。所以要清除浮动。

清除浮动

为什么要清除浮动？

• 由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，父级盒子高度为0时会影响下面的标准流盒子。

清除浮动的本质：
清除浮动元素脱离标准流（脱标）造成的影响
如果父盒子本身有高度，就不需要清除浮动
清除浮动之后，父盒子就会根据浮动的子盒子自动监测高度。父盒子有了高度，就不会影响下面的标准流了。

选择器：{clear：属性值}
实际工作中，几乎只用clear：both;

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

清除浮动的策略是：闭合浮动。只让浮动在父盒子内部影响。

清除浮动的方法

1. 额外标签法（隔墙法）W3C推荐的做法（实际开发还是不推荐）
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 父级添加双伪元素

1. 额外标签法

在浮动元素末尾加一个空标签。
优点：通俗易懂、书写方便
缺点：添加许多标签
注意：空标签必须是块级元素

2. 父级添加overflow属性

给父级添加overflow属性时，将其属性值设置为hidden，auto或scroll。<br/ 常见overflow: hidden;<br/ 优点：代码简洁
缺点：无法显示溢出的部分。（overflow: hidden;）

3. 父级添加after伪元素

额外标签法的升级版，也是给父元素添加

.clearfix:after {
	content:"";     必须有。
	display:block;  因为伪元素默认为行内元素。
	height:0;
	clear:both;
	visibility:hidden;
}
.claerfix {
	/*IE6、7专有*/
	*zoom:1
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝等

4. 父级添加双伪元素

也是给父元素添加

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

优点：代码更简单
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

定位

浮动可以让多个块级盒子一行没有任何缝隙排列，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内部移动位置，或者固定屏幕中某个位置，并且可以压住其他盒子。

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

• 定位模式决定元素的定位方式。通过CSS的position属性设置。

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

边偏移

• 边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right属性。

边偏移属性	示例	描述
top	top：80px；	顶端偏移量，定位元素相对于其父元素上边线的距离
bottom	bottom：80px；	底端偏移量，定位元素相对于其父元素下边线的距离
left	left：80px；	左侧偏移量，定位元素相对于其父元素左边线的距离
right	right：80px；	右侧偏移量，定位元素相对于其父元素右边线的距离

静态定位static（了解）

元素默认的定位方式，无定位的意思。

选择器：{
    position:static;
}

静态定位按照标准流特性摆放位置，它没有边偏移。
在布局时很少使用。

相对定位relative（重要）

元素移动位置时，是相对于他原来的位置说的（自恋型）

选择器 {
    position:relative;
    top:100px;
    left:100px;
}

相对定位的特点：（务必记住）

• 移动位置的时候是参照自己原来的位置。
  
• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式继续对待它。（不脱标，继续保留原来的位置）
  
• 最典型的应用是给绝对定位当爹...

绝对定位absolute（重要）

绝对定位是元素在移动位置时是相对于它的祖先元素（父元素）来说的（拼爹型）

选择器{
    position:absolute;
    top:100px;
    left:100px;
}

绝对定位的特点：（务必记住）

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置。
• 绝对定位不再占有原先的位置，相当于脱标

子绝父相的由来：

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

相对定位和绝对定位的使用场景：

1. 绝对定位和相对定位到底有什么使用场景呢？
   
2. 为什么说相对定位给绝对定位当爹呢？
   

例如上图：
如果三个小盒子都加了浮动，就会在一行使用。

• 子级绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响其他兄弟盒子
• 父盒子一定要加定位限制子盒子在父盒子里显示。
• 父盒子布局时，需要占有位置（必须保留原来的定位，不影响原来页面的布局），因此父元素只能是相对定位

相对定位经常用作绝对定位的父级。

总结：因为父级需要占有位置，因此位置是相对定位，子盒子不需要占有位置，则是绝对定位。
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

固定定位fixed

固定定位是元素固定于浏览器的可视区的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会变。

选择器{
	position:fixed;
}

固定定位的特点：（务必记住）

1. 以浏览器的可视窗口为参照点移动元素。

• 和父元素没有任何关系
• 不随滚动条滚动

2. 固定定位不再占有原先的位置

• 固定定位也是脱标的，可以看作是一种特殊的绝对定位

固定定位小技巧-固定到版心右侧
小算法：

1. 走浏览器宽度的一半
2. 利用margin走版心盒子宽度的一半距离。

.fixed {
	/*走浏览器宽度的一半*/
	position:fixed;
	left:50%;
	/*利用margin 走版心盒子宽度的一半距离。*/
	margin-left:400px;
	
	width:50px;
	height:150px;
}

粘性定位sticky（了解）

可以被认为是相对定位和固定定位的混合。
兼容性差，不多使用，网页上看到的大多是JS做的。

选择器{
/*只写position这一句是会被看做相对定位*/
	position:sticky;
	top:0px;
}

特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位的特点）
2. 占有原先位置（相对定位的特点），不脱标
3. 必须添加top、left、bottom中的一个才有效。

定位的叠放顺序z-index

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

选择器{
	z-index:1;
}

数值可以是正整数、负整数或者0，默认是auto，数值越大，盒子越往上。
如果属性值相同，则按照书写顺序后来居上
数字后面不能加单位 只有定位的盒子才有z-index属性

定位的拓展

加了绝对定位的盒子不能使用margin:0 auto;实现水平居中。
方法：

往left走50%父容器宽度的一半
margin负值，往左边走 自己盒子宽度（200px）的一半（-100px）

绝对定位的盒子垂直居中

top走整个高度的一半 top=50%高
margin-top为自己盒子高度(200px)的一半（-100px）

这个粉盒子水平居中、垂直居中。

定位的特殊性

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

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小。

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

浮动元素、绝对定位（固定定位）的元素都不会触发该问题

浮动元素不会压住下面标准流的文字（图片）

只会压住他下面标准流的盒子

绝对定位（固定定位）会完全压住下面标准流的所有的内容

浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果的。文字会围绕浮动元素

17. 元素的显示和隐藏

类似广告网站，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。
本质：让一个元素在页面内隐藏或显示出来、

display属性：（重点）

用于设置一个元素该如何显示
display:none；隐藏元素，且不再占有原来的位置。（用处更多，重点）
display:block；除了转换为块级元素之外，还有显示元素的意思。

visibility可见性

visibility:visible; 元素可视
visibilty:hidden; 元素隐藏，继续占有原来的位置

overflow溢出

overflow属性指定了如果内容溢出一个元素的框（超过指定的高度及宽度）时，会发生什么

overflow: visible | auto | hidden | scroll

一般情况下。我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但是如果有定位的盒子,慎用overflow: hidden; 因为它会隐藏多余的部分。