CSS #

CSS的单位 #

html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。

CSS中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。

font 字体属性 #

常见的字体属性有以下几种：

文本属性 #

行高 #

CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。

背景属性 #

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

背景颜色 #

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

background-color: 颜色值;

一般而言，颜色默认值是 transparent（透明），我们也可以指定背景颜色为透明色或其他色。

背景图片 #

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

background-image: none|url(图片url);

背景平铺 #

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

background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y;

页面元素·既可以添加背景图片，也可以添加背景颜色，图片会覆盖颜色。

背景图片位置 #

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

background-position: x y;

参数 x 和 y 指 x 左边和 y 坐标，可以使用方位名词或者精确定位。

背景图像固定 #

background-attachment 属性设置背景图像是否随着页面其余部分滚动。background-attachment 后期可以制作视差滚动效果。

background-attachment: scroll | fixed;

背景属性复合写法 #

简化代码，将属性写在同一个属性 background 下。一般按照约定顺序编写。background 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: transparent url(image.jpg) repeat-y fixed top;

背景颜色半透明 #

CSS3 提供 background: rgba(r,g,b,a) 属性设置图片透明度。

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

• CSS3 新增属性，IE9+支持

CSS简介 #

CSS是层叠样式表（CascadingStyleSheets）的简称。CSS也是一种标记语言。CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。·HTML呈现结构，CSS决定样式，结构与样式分离。

CSS 引用方式 #

按照 CSS 书写的位置不同，CSS 样式表可以分为三大类：

1. 行内样式表（行内式）
2. 内部样式表（嵌入式）
3. 外部样式表（链接式）

<div style="color: red; font-size: 12px">行内样式表</div>

3. 外部样式表（链接式）

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

CSS基础选择器 #

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

标签选择器 #

直接用HTML标签名作为选择器，按标签名称分类，**为页面某一类标签指定统一的CSS样式。**语法

标签名 {
    属性1： 属性值1;
    属性2： 属性值2;
    属性3： 属性值3;
}

优点标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。缺点不能设置差异化样式，只能选择全部当前标签。

类选择器 #

差异化选择不同标签，单独选一个或者某个标签。语法使用class属性来调用class类，样式点定义，结构类调用，一个或多个，开发最常用。类选择器用.号显示。注意

1. 类选择器用.标识，紧跟类名。
2. 小写，使用-连接单词。
3. 不要用纯数字、中文。
4. 命名有意义。

类选择器-多类名 #

类名间用空格分开

<p class="class-name1 class-name2"></p>

id选择器 #

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

#id名 {
    属性1: 属性值1;
    ...
}

样式#定义，结构id调用，别人切勿使用。id选择器与类选择器的区别

1. 类选择器可以被多个元素调用。
2. id选择器只能允许一个标签调用。
3. 类选择器使用的较多，id选择器用于唯一特性的标签。

通配符选择器 #

语法

* {
    属性1: 属性值1;
    ...
}

• 用*定义通配符选择器，选取页面中所有标签。
• 不需要调用，自动给所有标签。
• 特殊情况使用

* {
    margin: 0;
    padding: 0;
}

CSS复合选择器 #

由基础选择器组合而成,复合选择器总结

后代选择器 #

后代选择器又称为包含选择器，可以选择父元素里的子元素。写法是将外层标签写在前面，内层标签写在后面，中间空格分开。语法

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

• 上述语法表示选择元素 1 里面所有的元素 2
• 可以连续嵌套，比如可以是孙子等
• 元素 1、2 可以是任何基础标签

子选择器 #

子元素选择器（子选择器）只能选择作为元素作为元素的最近一级子元素。简单理解就是选亲儿子。语法

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

• 元素之间用大于号 > 隔开
• 1 为父级。二为子级，最终选择的是元素 2
• 元素 2 必须是亲儿子。

并集选择器 #

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

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

伪类选择器 #

伪类选择器用于向某些选择器添加特殊的效果。伪类选择器书写最大特点是用冒号 : 表示。伪类选择器种类多，比如链接伪类选择器、结构选择器等。

链接伪类选择器 #

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

注意事项

1. 确保样式生效，要按照 LVHA 的顺序声明：link,visited,hover, active。
2. a 链接在浏览器中有默认样式，所以实际开发都需要给链接单独指定样式。

开发中实际写法

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

focus 伪类选择器 #

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

input:focus {
  background-color: yellow;
}

其他标准伪类选择器 #

1.first-child :first-child 是 CSS 伪类，表示父元素的第一个子元素。2. last-child``:last-child CSS 伪类 代表父元素的最后一个子元素。3. nth-child(n)(odd) 匹配奇数 (even) 匹配偶数:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类 :nth-child括号中表达式 (an+b) 匹配到的元素集合 (n=0，1，2，3...)4. :not(p)``:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

CSS 伪元素选择器 #

5. ::after (:after) ::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

.exciting-text::after {
  content: "<- 让人兴兴兴奋!";
  color: green;
}

我们几乎可以用想要的任何方法给 content 属性里的文字和图片的加上样式.6. ::before (:before)CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。使用 ::before 伪元素的一个简单示例就是用于加入引号。

<q>一些引用</q>, 他说, <q>比没有好。</q>.

q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

CSS3 选择器 #

属性选择器 #

属性选择器的标志性符号是 []。格式：

CSS 三大特性 #

层叠性、继承性、优先级。

层叠性 #

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

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

继承性 #

CSS 中子标签会继承父标签的某些样式，如文本颜色和字号。

• 恰当使用继承可以简化代码，降低 CSS 的复杂性
• 子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及 color 属性）

行高的继承性 #

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

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

优先级 #

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

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

选择器权重如下所示。

p {
  color: pink !important;
}

注意

• 继承的权重为 0，即使加了 important 权重也还是 0。
• a 链接，浏览器默认指定了一个样式，蓝色，下划线，不会继承父级样式

复合选择器权重的叠加权重可以叠加，需要计算权重，但是没有进位。

盒子模型 #

盒子模型（Box Model）组成 #

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

标准盒模型和IE盒模型 box-sizing #

我们目前所学习的知识中，以标准盒子模型为准。 标准盒子模型： content-box IE盒子模型： border-box 上图显示：

1.边框（border） #

border 可以设置元素边框。边框有三个组成：border-width、border-style、border-color 语法

/*属性可连写*/
border: border-width || border-style || border-color;

边框圆角：border-radius 属性 #

单个属性的写法：
border-top-left-radius: 60px 120px;        //参数解释：水平半径   垂直半径

 border-top-right-radius: 60px 120px;

 border-bottom-left-radius: 60px 120px;

 border-bottom-right-radius: 60px 120px;
复合写法：
  border-radius: 60px/120px;             //参数：水平半径/垂直半径

 border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值

 border-radius: 20px 60px;
 四个角的半径都相同时
  border-radius: 60px;

边框阴影：box-shadow 属性 #

 box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色

 box-shadow: 15px 21px 48px -2px #666;

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

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

1. 测量盒子大小的时候，不测边框。
2. 若测量的时候包含了边框，则需要 width/height-边框宽度。

2.内边距 padding #

padding 属性设置内边距，即边框与内容之间的距离。

• padding-left: 左内边距
• padding-right: 右内边距
• padding-top: 上内边距
• padding-bottotm: 下内边距

padding 属性简写 padding 的值的个数：

• 1 个值：上下左右
• 2 个值：上下，左右
• 3 个值：上，左右，下
• 4 个值：上，右，下，左，顺时针

padding 会影响盒子实际大小 当给盒子指定了 padding 值以后，发生了两件事情：

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

也就是说，当盒子已经有了宽度和高度，再指定内边距，会撑大盒子。 要保证盒子和效果图一样大，则让 width/height-多出来的内边距大小即可。

3.外边距margin #

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

• margin-left: 左外边距
• margin-right: 右外边距
• margin-top: 上外边距
• margin-bottotm: 下外边距

margin 简写方式与 padding 一致。

外边距典型应用 #

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

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

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

使行内元素或行内块元素水平居中 text-align: center;

外边距合并 #

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

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

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

对于两个嵌套关系的块元素，只想给子元素添加上边距,结果父元素移动，此时父元素会塌陷较大的外边距值。 解决方案

1. 为父元素添加 overflow:hidden
2. 为父元素定义上 边框
3. 为父元素定义上 内边距
4. 转换成行内块元素
5. 设置浮动

清除内外边距 #

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

* {
  margin: 0;
  padding: 0;
}

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

圆角边框 #

CSS3 新增 圆角边框 属性，盒子可以变成圆角。 border-radius 属性用于设置元素的外边框圆角。 语法 border-radius: length; 原理 （椭）圆与边框的交集形成的圆角效果。 参数

• 参数值可以为数值或百分比的形式
• 若是正方形，想要设置一个圆，则将数值修改为高度或者宽度的一般即可，或者直接写为 50%
• 若是矩形，设置为 height 的一半就可以做
• 简写属性，跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开来写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

盒子阴影 #

CSS3 新增盒子阴影，使用 box-shadow 属性。 语法 bxo-shadow: h-shadow v-shadow blur spread color inset;

注意：

1. 默认是外阴影，但是不可以写这个单词（outset）
2. 盒子阴影不占空间，不会影响其他盒子排列

文字阴影 #

CSS3 中，使用 text-shadow 属性设置文本阴影。

浮动 #

1. 浮动（float） #

1.1 传统网页布局方式 #

网页布局的本质——用 CSS 来摆放盒子，把盒子放到相应位置。

CSS 提供了三种传统布局方式：

• 普通流
• 浮动
• 定位

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

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

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

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

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

实际开发中，一个页面基本包含三种布局方式。

1.3 为什么需要浮动？ #

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

浮动最典型应用：让多个块级元素一行显示。

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

网页布局第二准则：先设置盒子大小，再设置盒子位置。

1.4 什么是浮动？ #

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

语法

选择器 { float: 属性值; }

1.5 浮动特性（重点） #

加了浮动之后的元素，会具有一些特性。

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

重要特性

1. 脱离文档流的控制（浮）移动到指定位置（动），脱标 脱离文档流的盒子，会漂浮在文档流的盒子上面，不占位置。

2. 如果多个盒子都设置了浮动，则它们会按照属性值一行显示并且顶端对齐排列。 浮动的元素是相互贴在一起的（没有间隙），若父级宽度放不下盒子，多出的盒子会另起一行对齐。

3. 浮动元素具有行内块元素特性。 任何元素都可以浮动，设置了后元素都具有行内块元素性质。

   • 若块级元素没有设置宽度，则默认和父级一样宽
   • 浮动盒子中间无间隙，紧挨着
   • 行内块元素同理

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

为了约束元素位置，一般采取：

先用标准流父元素上下排列位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

2. 常见网页布局 #

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

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

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

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

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

3. 清除浮动 #

3.1 为什么需要清除浮动 #

由于父级盒子很多情况下，不方便给高度，当时盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的盒子，对后面元素排版产生影响。

3.2 清除浮动的本质 #

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

3.3 清除浮动 #

语法：

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

清除浮动策略：闭合浮动

方法：

1. 额外标签法（隔墙法），是 W3C 推荐的方法
2. 父级添加 overflow 属性
3. 父级添加 after 伪元素
4. 父级添加双伪元素

3.4 清除浮动（1）——额外标签法 #

也成为隔墙法，是 W3C 推荐的方法。

额外标签法是在最后一个浮动元素末尾添加一个 空块级元素，给其赋以属性 clear:both;。

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

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化差

总结

1. 清除浮动的本质

   清除浮动的本质是清除浮动元素脱离标准流造成的影响

2. 清除浮动的策略

   闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

3. 使用场景

   实际开发中可能会遇到，但是不常用。

3.5 清除浮动（2）——父级添加 overflow #

可以给父级添加 overflow 属性，将其属性设置为 hidden、auto或scroll。

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

• 优点：代码简洁
• 缺点：无法显示溢出部分

3.6 清除浮动（3）——:after 伪元素法 #

实际上也是额外标签法的一种。

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

3.7 清除浮动（4）——双伪元素法 #

语法

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

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

3.8 清除浮动总结 #

为什么需要清除浮动？

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，应该清除浮动。

定位 #

为什么需要定位 #

一些固定盒子的效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：

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

定位组成 #

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移。通过 CSS 的 position 属性来设置

边偏移 #

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

1. 相对定位 relative #

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

语法：

选择器 {
  position: relative;
}

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

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

2. 绝对定位 absolute #

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

语法：

选择器 {
  position: absolute;
}

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

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

子绝父相的由来 #

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

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

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
• 父盒子需要加定位限制子盒子在父盒子内显示。
• 父盒子布局时，需要占有位置，因此父亲只能是相对定位。这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

3. 固定定位 fixed #

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

语法：

选择器 {
  position: fixed;
}

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

1. 以浏览器的可视窗口为参照点移动元素。
   • 跟父元素没有任何关系
   • 不随滚动条滚动
2. 固定定位不 占有原先的位置。固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

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

1. 让固定定位的盒子 left： 50%，走到浏览器可视区（也可以看做版心）的一半位置。
2. 让固定定位的盒子 margin—left）板心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对弃了

定位叠放次序 z-index #

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

选择器 {
  z-index: 1;
}

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

元素的显示与隐藏 #

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

1. display 属性 #

• display 属性用于设置一个元素应如何显示。
• display： none; 隐藏对象
• display ： block; 除了转换为块级元素之外，同时还有显示元素的意思 display 隐藏元素后，不再占有原来的位置。

后面应用及其广泛，搭配 JS 可以做很多的网页特效。

2. visibility 可见性 #

• visibility 属性用于指定一个元素应可见还是隐藏。- - visibility : visible;元素可视
• visibility : hidden;元素隐藏
• visibility 隐藏元素后，继续占有原来的位置

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

3.overflow 溢出 #

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

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