CSS3基础一篇完结（豪豪的备忘录）

绪论

css简介

1.CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. ​ 有时我们也会称之为 CSS样式表或级联样式表。 ​ CSS 是也是一种标记语言 ​ CSS 主要用于设置 HTML
2.页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
3.CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。 CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离

⭐css语法规范

1. 使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。
2. CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4.属性和属性值之间用英文“:”分开
5.多个“键值对”之间用英文“;”进行区分
例如：

    <style>
        h4 {
            color: blue;
            font-size: 100px;
        }
    </style> </head> ```

css代码风格：

1. 样式格式书写
    1.紧凑格式   
        h3 { color: deeppink;font-size: 20px;}
    2.展开格式   
     h3 {
        color: pink;
        font-size: 20px;    
     }
    强烈推荐第二种格式， 因为更直观。
    2. 样式大小写风格
        1.小写格式
            h3 {
            color: pink;
            }
        2.大写格式
              H3 {
            COLOR: PINK;   
            }
        强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
        3. 样式空格风格
    1. h3 {
        color: pink;    
        }
    属性值前面，冒号后面，保留一个空格
    选择器（标签）和大括号中间保留空格
    css选择器的作用
    答：选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。
    简单来说，就是选择标签用的。
    ​   

css基础选择器

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

标签选择器：

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法：
​ 标签选择器{
​ 属性：属性值
​ …
​ }
作用：
​ 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
###类选择器
​ 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.
语法：
​ .类名 {
​ 属性1: 属性值1;
​ …
​ }
​ 结构需要用class属性来调用 class 类的意思

<div class="类名"> 变红色 </div>

1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
​ 2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
​ 3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
​ 4.可以理解为给这个标签起了一个名字，来表示。
​ 5.长名称或词组可以使用中横线来为选择器命名。
​ 6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。
​ 7.命名要有意义，尽量使别人一眼就知道这个类名的目的。
​ 8.命名规范：见附件（ Web 前端开发规范手册.doc）

多类名选择器

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

多类名的具体使用。

> 			<div class="red font20">亚瑟</div>
    注意：
    ​        1.在标签class 属性中写 多个类名
    ​        2.多个类名中间必须用空格分开
    ​        3.这个标签就可以分别具有这些类名的样式

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
​ HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
​ 语法：
​ #id名 {
​ 属性1: 属性值1;
​ …
​ }
​ 注意：id 属性只能在每个 HTML 文档中出现一次
id选择器和类选择器的区别：
​ 1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
​ 2.id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
​ 3.id 选择器和类选择器最大的不同在于使用次数上。
​ 4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

⭐通配符选择器

        属性1: 属性值1;  
        ...
            }
    通配符选择器不需要调用， 自动就给所有的元素使用样式
    特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)
      * {
               margin: 0;
               padding: 0;
            }  ```

⭐选择器总结

---

# ⭐⭐⭐css字体属性

字体大小

CSS 使用 font-size 属性定义字体大小。
语法：
​ p {
​ font-size: 20px;
​ }
​ 1.px（像素）大小是我们网页的最常用的单位
​ 2.谷歌浏览器默认的文字大小为16px
​ 3.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
​ 4.可以给 body 指定整个页面文字的大小

字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。
语法：
​ p {
​ font-weight: bold;
​ }

1.学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
2.实际开发时，我们更喜欢用数字表示粗细
字体样式：
CSS 使用 font-style 属性设置文本的风格。
语法：
p {
font-style: normal;
}

字体的综合写法

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

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

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

---

字体总结

---

⭐⭐⭐css文本属性

文本颜色

color 属性用于定义文本的颜色。
语法：
​ div {
​ color: red;
​ }
开发中最常用的是十六进制

文本对齐

ext-align 属性用于设置元素内文本内容的水平对齐方式。
语法：
div {
text-align: center;
}

修饰文本

语法：
​ div {
​ text-decoration：underline；
​ }

重点记住如何添加下划线 ? 如何删除下划线 ? 其余了解即可。

文本缩进

语法：
div {
text-indent：20px；
}
div {
首行缩进2字符
text-indent：2em；
}
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
语法：
​    p { 
​        line-height: 26px;
​    }
​    行高的文本分为 上间距  文本高度 下间距 = 行间距

⭐⭐⭐css样式表

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

行内样式表（行内式

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
​     语法：
​   <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
1.style 其实就是标签的属性在双引号中间，写法要符合 CSS 规范
​2.可以控制当前的标签设置样式
​3.由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，
只有对当前元素添加简单样式的时候，可以考虑使用
​4.使用行内样式表设定 CSS，通常也被称为行内式引入

内部样式表（嵌入式

内部样式表（内嵌样式表）是写到html页面内部.
是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
​        语法：
​            <style>
​                div {
​                color: red;
​                font-size: 12px;
​                }
​            </style>
1.<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
2.通过此种方式，可以方便控制当前整个页面中的元素样式设置
3.代码结构清晰，但是并没有实现结构与样式完全分离
4.使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

外部样式表（链接式

实际开发都是外部样式表. 适合于样式比较多的情况.
 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
​    引入外部样式表分为两步：
​    1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
​        2. 在 HTML 页面中，使用<link> 标签引入这个文件。
​        语法：
​            <link rel="stylesheet"  href="css文件路径">

chrome调试工具

1.Ctrl+滚轮 可以放大开发者工具代码大小。
2.左边是 HTML 元素结构，右边是 CSS 样式。
3.右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。
4.Ctrl + 0 复原浏览器大小。
5.如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
6.如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

⭐⭐⭐emmet语法

​

简介

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。

​ 快速生成HTML结构语法

​ 快速生成CSS样式语法

快速生成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;

快速格式化代码

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

也可以设置 当我们 保存页面的时候自动格式化代码:

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

​ “editor.formatOnType”: true,

​ “editor.formatOnSave”: true

⭐⭐⭐css的复合选择器

什么是复合选择器

在 CSS中，可以根据选择器的类型把选择器分为***基础选择器***和***复合选择器***，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
​ 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）
​ 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

定义：

​ 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。
语法说明：

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

例子：

子选择器

定义：

​ 子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

​ （简单理解就是选亲儿子元素）

语法：

​ 上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。

语法说明：

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

例子：

并集选择器

定义
并集选择器可以选择多组标签,
同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

​ 上述语法表示选择元素1 和 元素2。

语法说明：

• 元素1 和 元素2 中间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择器通常用于集体声明

例子：

伪类选择器

定义：

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

语法：

​ 伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

链接伪类选择器

定义：

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

语法：

​ 伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

​ a:link 没有点击过的(访问过的)链接 ​ a:visited 点击过的(访问过的)链接
​ a:hover 鼠标经过的那个链接 ​ a:active 鼠标正在按下还没有弹起鼠标的那个链接

链接伪类选择器注意事项

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

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

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

链接伪类选择器实际工作开发中的写法：

：focus伪类选择器

定义：
:focus 伪类选择器用于选取获得焦点的表单元素。

​ 焦点就是光标，一般情况 类表单元素才能获取

例子：

复合选择器总结

---

⭐⭐⭐css的显示模式

什么是元素的显示模式

定义：

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

作用：

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

元素显示模式的分类

块元素

常见的块元素：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

​

标签是最典型的块元素。

块级元素的特点：

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

注意：

​ 文字类的元素内不能放块级元素

<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>  同理，
<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素 ```

行内元素

常见的行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

​ 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

• 相邻行内元素在一行上，一行可以显示多个。

• 高、宽直接设置是无效的。

• 默认宽度就是它本身内容的宽度。

• 行内元素只能容纳文本或其他行内元素。

注意： 链接里面不能再放链接

特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

行内块元素

常见的行内块标签：

<img />、<input />、<td>

​ 它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

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

元素显示模式总结

元素显示模式的转换

简单理解:
​ 一个模式的元素需要另外一种模式的特性 ​ 比如想要增加链接 <a> 的触发范围。

转换方式

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

单行文字垂直居中的代码

解决方案:

​ 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

简单理解:

​ 行高的上空隙和下空隙把文字挤到中间了，

​ 如果行高小于盒子高度,文字会偏上，

​ 如果行高大于盒子高度,则文字偏下。

⭐⭐⭐css的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

样式名称：

​ background-color 定义元素的背景颜色

使用方式：

其他说明：

​ 元素背景颜色默认值是 transparent（透明）

背景图片

样式名称：

​ background-image 定义元素的背景图片

使用方式：

背景平铺

样式名称：

​ background-repeat 设置元素背景图像的平铺

使用方式：

背景图片的位置

样式名称：

​ background-position 属性可以改变图片在背景中的位置

使用方式：

其他说明：

1、参数是方位名词

​ 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

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

2、参数是精确单位

​ 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

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

3、参数是混合单位

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

背景图片的固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

其他说明：

​ background-attachment 后期可以制作视差滚动的效果。

背景样式合写

背景合写样式：

​ background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

使用方式：

背景色半透明

CSS3 提供了背景颜色半透明的效果。
使用方式：

• 最后一个参数是 alpha 透明度，取值范围在 0~1之间
• 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);

注意：

• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

背景总结

⭐⭐⭐css的三大特性

层叠性

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

​ 层叠性原则:

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠
  

继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

子元素可以继承父元素的样式：

​ （text-，font-，line-这些元素开头的可以继承，以及color属性）

继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

行高的继承性：

css body { font:12px/1.5 Microsoft YaHei； }

• 行高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父元素的行高为 1.5
• 此时子元素的行高是：当前子元素的文字大小 * 1.5
• body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级 当同一个元素指定多个选择器，就会有优先级的产生。

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

选择器优先级计算表格：

优先级注意点:

1. 权重是有4组数字组成,但是不会有进位。

2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…

3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.

5. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

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

• 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

⭐⭐⭐盒子模型

网页布局的本质

网页布局的核心本质： 就是利用 CSS 摆盒子。

盒子模型组成

盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

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

⭐边框

边框的使用

1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；

2、语法：

表格的细线边框

边框会影响实际盒子的大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

• 测量盒子大小的时候,不量边框。
• 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

内边距（padding）

内边距的使用方式

1、padding 属性用于设置内边距，即边框与内容之间的距离。
2、语法：

内边距会影响盒子的实际大小

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

• 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
• 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

​ 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

外边距（margin）

外边距的使用方式

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

外边距典型应用

外边距可以让块级盒子水平居中的两个条件：

• 盒子必须指定了宽度（width）。
• 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

margin-left: auto;
margin-right: auto;
margin: auto;
margin:0 auto;

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

5.3、外边距合并

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

主要有两种情况:

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

​ 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距
margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top
之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：
尽量只给一个盒子添加 margin 值。

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

​ 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

清除内外边距

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

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

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

⭐⭐⭐其他样式

圆角边框

CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

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

语法：

css border-radius:length;

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius
  和border-bottom-left-radius
• 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。 语法：

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

文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。 语法：

css text-shadow: h-shadow v-shadow blur color;

⭐⭐⭐浮动

传统网页布局的三种方式

​ CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

• 普通流（标准流）

• 浮动

• 定位

  这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。

标准流（普通流/文档流

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

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

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

为什么需要浮动

总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

​ 浮动最典型的应用：可以让多个块级元素一行内排列显示。

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

什么是浮动

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

语法：

浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置

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

常见网页布局

浮动布局注意事项

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

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

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

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

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

⭐⭐⭐清除浮动

为什么清除浮动

清除浮动的本质

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

注意：

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

清除浮动样式

语法：

css 选择器{clear:属性值;}

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

清除浮动的策略是: 闭合浮动.

清除浮动的多种方式

额外标签法

父级提NJIoverflow属性

父级添加after为伪元素

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

 .clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;
 }   

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

缺点：照顾低版本浏览器

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

父级添加双伪元素

给父元素添加

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

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等

总结

⭐⭐⭐css属性书写顺序

生活中衡量一个人有气质：

​ 穿着打扮 举止言行 等等

编程中如何衡量一个人的代码能力：

​ 规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验…

建议遵循以下顺序：

1. 布局定位属性：display / position / float / 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 …

举例：

 .jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
 } 

⭐⭐⭐定位（position）介绍

为什么需要定位

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1.边偏移（方位名词）

2.定位模式（position）

定位模式介绍

静态定位（static）-了解

⭐相对定位（relative）-重要

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。

• 语法：

选择器 { position: relative; }

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

  • 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

  • 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

    因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
    

⭐绝对定位（absolute）-重要

绝对定位的介绍

定位口诀-子绝父相

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

这个**“子绝父相”太重要了，是我们学习定位的口诀**，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

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

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？
观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。

固定定位(fixed)-重要

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

• 语法：

   选择器 { 
   	position: fixed; 
   }
  

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

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

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

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

• 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）

  • 完全脱标—— 完全不占位置；
  • 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
    • 跟父元素没有任何关系；单独使用的
    • 不随滚动条滚动。
    • 

定位总结

定位的应用

固定定位小技巧：固定在版心左侧位置

堆叠顺序（z-index）

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

• 语法：

  选择器 { 
  	z-index: 1; 
  }
  

• z-index 的特性如下：

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

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

• 应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

• 

定位（position）的拓展

绝对定位的盒子居中

定位特殊特性

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

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

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

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

• 可以用inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

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

浮动元素、**绝对定位(固定定位）**元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

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

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

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

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

⭐⭐⭐⭐网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位 可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

6.1. 标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

6.2. 浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

6.3. 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

元素的显示与隐藏

• 目的（本质）

  ​ 让一个元素在页面中消失或者显示出来

• 场景

  ​ 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

display显示（重点

• display 设置或检索对象是否及如何显示。

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

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

• 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：

  配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

visibility可见性（了解

• visibility 属性用于指定一个元素应可见还是隐藏。

  visibility：visible ; 　元素可视
  
  visibility：hidden; 　  元素隐藏
  

• 特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）

• 如果隐藏元素想要原来位置， 就用 visibility：hidden

• 如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）

• 

overflow溢出（重点

显示与隐藏总结

⭐⭐⭐精灵图（重点）

为什么需要精灵图

精灵图（sprites）的使用

使用精灵图核心：

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
3. 移动背景图片位置， 此时可以使用 background-position 。
4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
5. 因为一般情况下都是往上往左移动，所以数值是负值。
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

使用精灵图核心总结：

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

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

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

⭐⭐⭐字体图标

字体图标的产生

字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点很明显。

1.图片文件还是比较大的。

2.图片本身放大和缩小会失真。

3.一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

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

• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器，请放心使用
• 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

字体图标的下载

• icomoon 字库 http://icomoon.io 推荐指数 ★★★★★

IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

• 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 重点是，免费！

字体图标的引入

字体图标的追加

字体图标加载的原理

⭐⭐scc三角

介绍

css用户界面样式

什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

鼠标样式 cursor

轮廓线 outline

防止拖拽文本域 resize

vertical-align属性应用

图片，表单和文字对齐

解决文字底部默认空白缝隙问题

溢出的文字省略号显示

单行文本溢出显示省略号

多行文本溢出显示省略号（了解

⭐⭐⭐常见布局技巧

巧妙利用一个技术更快更好的布局：

1. margin负值的运用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. CSS三角强化

margin负值运用

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

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

文字围绕浮动元素

行内块巧妙运用

css三角强化案例

原理

<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初始化