CSS学习笔记

原创于 2025-07-04 15:41:54 发布 · 973 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#css #笔记 #前端 #开发语言 #改行学it #c5全栈

文章目录

一、项目中的总结

1.关于logo

①favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。

②在html 页面里面的 == ==元素之间引入代码。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

③ logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。

④ h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。

⑤ 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。

⑥ 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。

⑦ 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。

⑧ 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

2.常用模块类名命名

二、CSS学习

1.语法规范

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

2.选择器分类

2.1 基础选择器

2.1.1 标签选择器

2.1.2 类选择器

.类名 {
 属性1: 属性值1; 
 ...
}

==记忆口诀：==样式点定义，结构类调用。一个或多个，开发最常用。

多类名使用方式：

<div class="red font20">亚瑟</div>

(1) 在标签class 属性中写多个类名

(2) 多个类名中间必须用空格分开

(3) 这个标签就可以分别具有这些类名的样式

2.1.3 id选择器

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

**注意：**id选择器不可重复，只能用一次

2.1.4 通配符选择器

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

**注意：**通配符选择器不需要调用，自动就给所有的元素使用样式

2.2 复合选择器

2.2.1 后代选择器 (重要）

后代选择器又称为包含选择器，可以选择父元素里面子元素。

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

ul li { 样式声明 } 
/* 选择 ul 里面所有的 li标签元素 */

2.2.2 子选择器

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

div > p { 样式声明 }
/* 选择 div 里面所有最近一级 p 标签元素 */

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

2.2.3并集选择器 (重要）

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

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

ul,div { 样式声明 }
/* 选择 ul 和 div标签元素 */

2.2.4伪类选择器

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

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

2.2.5 链接伪类选择器

\* 1.未访问的链接 a:link  把没有点击过的(没访问过的)链接选出来 /*
   a:link {
     color: #333;
      text-decoration: none;
  }

   */\*2. a:visited 选择点击过的(访问过的)链接 \*/*
  a:visited {
     color: orange;
  }



 */3. a:hover 选择鼠标经过的那个链接 /*
   a:hover {
     color: skyblue;
  }
  */4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接/*
    a:active {
    color: green;

 }

2.2.6 :focus 伪类选择器

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

input:focus { 
   background-color:yellow;
}

3. CSS 字体属性

3.1 字体系列

CSS 使用 font-family 属性定义文本的字体系列。

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

注意：

（1）各种字体之间必须使用英文状态下的逗号隔开

（2）一般情况下,如果有空格隔开的多个单词组成的字体,加引号.

（3）尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

（4）最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

3.2 字体大小

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

p { 
 font-size: 20px; 
}

3.3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p { 
 font-weight: bold;
}

注意：

（1）normal：默认值不加粗

（2）bold：加粗

（3）100~900：400等同于normal，700等同于bold

3.4 文字样式

CSS 使用 font-style 属性设置文本的风格。

p { 
 font-style: normal;
}

注意：

（1）normal 显示标准字体样式

（2）italic 斜体

附加：

新知识点: 去掉 li 前面的项目符号(小圆点)

list-style: none;

3.5 复合属性

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

注意：

（1）使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

（2）不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

4. CSS 文本属性

4.1 文本颜色

color 属性用于定义文本的颜色。

div { 
 color: red;
}

4.2 对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

div { 
 text-align: center;
}

（1）center 居中对齐

（2）right 右对齐

（3）left 左对齐

4.3 装饰文本

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

（1）none 没有装饰线

（2）underline 下划线

（3）overline 上划线

(4) line-through 删除线

4.4 文本缩进

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

div { 
 text-indent: 10px;
}

4.5 行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

p { 
 line-height: 26px;
}

5.CSS 引入方式

CSS 样式表可以分为三大类：

5.1行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

5.2 内部样式表（嵌入式）

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个

<style>
  div {
  color: red;
  font-size: 12px;
  }
</style>

5.3 外部样式表（链接式）

（1）新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

（2）在 HTML 页面中，使用标签引入这个文件

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

注意：

rel ：定义当前文档与被连接文档关系。“stylesheet”表示被链接的文档是一个样式表文件

href：样式表文件路径

6.CSS 的元素显示模式

6.1 块元素

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

块级元素的特点：

① 比较霸道，自己独占一行。

② 高度，宽度、外边距以及内边距都可以控制。

③ 宽度默认是容器（父级宽度）的100%。

④ 是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素

标签主要用于存放文字，因此

里面不能放块级元素，特别是不能放

同理，

~

等都是文字类块级标签，里面也不能放其他块级元素

6.2 行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

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

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

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

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

注意：

链接里面不能再放链接

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

6.3 行内块元素

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

② 默认宽度就是它本身内容的宽度（行内元素特点）。

③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

6.4 元素显示模式转换

1. 转换为块元素：display:block;

2.转换为行内元素：display:inline;

3.转换为行内块：display: inline-block;

7.CSS背景

7.1 背景颜色

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

background-color:颜色值;    --transparent透明色

7.2背景图片

background-image 属性描述了元素的背景图像。

background-image : none | url (url)

--none 无背景图（默认的）
--url  使用绝对或者相对地址的背景图像
------------------------------------------------------
 <style>
     div {
         width: 300px;
         height: 300px;
         /* 不要落下 url()   */
         background-image: url(images/logo.png);
     }
 </style>

7.3 背景平铺

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

background-repeat: repeat | no-repeat | repeat-x | repeat-y
--repeat  背景图像在纵向和横向上平铺（默认的）
--no-repeat 背景图像不平铺
--repeat-x 背景图像在横向平铺
--repeat-y 背景图像在纵向平铺

-----------------------------------------------------
<style>
      div {
          width: 300px;
          height: 300px;
          /* background-color: pink; */
          background-image: url(images/logo.png);
          /* 1.背景图片不平铺 */
          /* background-repeat: no-repeat; */
          /* 2.默认的情况下,背景图片是平铺的 */
          /* background-repeat: repeat; */
          /* 3. 沿着x轴平铺 */
          /* background-repeat: repeat-x; */
          /* 4. 沿着Y轴平铺 */
          background-repeat: repeat-y;
          /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
    }
 </style>

7.4 背景图片位置

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

background-position: x y;

1. 参数是方位名词
  如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
  如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2. 参数是精确单位
  如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
  如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3. 参数是混合单位
  如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

------------------------------------------------------
 <style>
     div {
         width: 300px;
         height: 300px;
         background-color: pink;
         background-image: url(images/logo.png);
         background-repeat: no-repeat;
         /* background-position:  方位名词; */
         /* background-position: center top; */
         /* background-position: right center; */
         /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
         /* background-position: center right; */
         /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
         /* background-position: right; */
         /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
         background-position: top;
     }
 </style>

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

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

background-attachment : scroll | fixed

--scroll 背景图像随内容滚动
--fixed  背景图像固定

7.6 背景的复合写法

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

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

8.CSS三大特性

8.1 继承性

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

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

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

8.1.2 行高的继承性

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

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

8.2 层叠性

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

层叠性原则：

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

8.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

在这里插入图片描述

注意：

权重是有4组数字组成,但是不会有进位。
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

9.盒子模型

9.1 盒子模型组成

在这里插入图片描述

9.2 边框（border）

语法：

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

--border-width  粗细
--border-style  样式
--border-color  颜色

9.2.1 边框样式 border-style

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

9.2.2 边框简写

border: 1px solid red; 没有顺序

border-top: 1px solid red; /* 只设定上边框， 其余同理 */

9.2.3 表格的细线边框

border-collapse:collapse;

--border-collapse: collapse; 表示相邻边框合并在一起

9.3 内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的距离。
如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.

9.4 外边距

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

在这里插入图片描述

9.4.1 外边距可以让块级盒子水平居中

① 盒子必须指定了宽度（width）。

② 盒子左右的外边距都设置为 auto 。

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

9.4.2 外边距合并-塌陷

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

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

1.1 解决方案：

尽量只给一个盒子添加 margin 值。
嵌套块元素垂直外边距的塌陷

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

解决方案：

① 可以为父元素定义上边框。

② 可以为父元素定义上内边距。

③ 可以为父元素添加 overflow:hidden。

9.5 清除内外边距

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

9.6 圆形边框

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

border-radius:length;

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

兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50% 就是宽度和高度的一半  等价于 100px */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            /* border-radius: 10px 20px 30px 40px; */
            /* border-radius: 10px 40px; */
            border-top-left-radius: 20px;
            background-color: pink;
        }
    </style>
</head>

<body>
    1. 圆形的做法:
    <div class="yuanxing"></div>
    2. 圆角矩形的做法:
    <div class="juxing"></div>
    3. 可以设置不同的圆角:
    <div class="radius"></div>
</body>

9.7 盒子阴影

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

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

在这里插入图片描述

h-shadow：水平位置阴影，调整阴影的水平位置

v-shadow：调整上下的

blur：阴影模糊的大小

spread：阴影的尺寸大小

9.8 文字阴影

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

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

在这里插入图片描述

9.9 网络布局 –浮动

CSS 提供了三种传统布局方式：普通流（标准流）、浮动、定位、

9.9.1 标准流

标准流: 标签按照规定好默认方式排列.

9.9.2 浮动

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

选择器 { float: 属性值; }

在这里插入图片描述

9.9.2.1 浮动特性：

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

脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）
浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
浮动的元素会具有行内块元素的特性.

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

——如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。

——浮动的盒子中间是没有缝隙的，是紧挨着一起的

——行内元素同理

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

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧
先设置盒子的大小, 之后设置盒子的位置. 网页布局第二准侧

9.9.2.3 浮动布局的注意点

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

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

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

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

9.9.3 清除浮动

为什么需要清除浮动？
- 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
清除浮动本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动方法

语法：

选择器{clear:属性值;}

在这里插入图片描述

清除浮动方法

额外标签法也称为隔墙法，是W3C推荐的做法。
父级添加overflow属性
- 可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

父级添加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;
}

在这里插入图片描述

9.10 网络布局–定位

9.10.1 为什么要有定位

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

9.10.2 定位的组成

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

relative：相对定位

absolute：绝对定位

fixed：固定定位
边偏移：

top：元素相对于父元素上边线的距离

bottom：元素相对于父元素下边线的距离

left：元素相对于父元素左边线的距离

right：元素相对于父元素右边线的距离

9.10.3 相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
语法：选择器名称 { position: relative; }
特点：

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

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

③ 相对定位并没有脱标。

9.10.4 绝对定位 absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
语法：选择器 { position: absolute; }
特点：

① 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。

② 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

③ 绝对定位不再占有原先的位置。（脱标）

注意事项：

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

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

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

9.10.5 固定定位 fixed （重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变、
语法：选择器 { position: fixed; }
特点：

① 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动
② 固定定位不在占有原先的位置。

③ 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

注意事项（小技巧）：

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

① 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。

② 让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

9.10.6 粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合。
语法：选择器 { position: sticky; top: 10px; }
特点：

① 以浏览器的可视窗口为参照点移动元素（固定定位特点）

② 粘性定位占有原先的位置（相对定位特点）

③ 必须添加 top 、left、right、bottom 其中一个才有效

9.10.8 定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
语法：选择器 { z-index: 1; }
特点：

① 数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

② 如果属性值相同，则按照书写顺序，后来居上

③ 数字后面不能加单位

④ 只有定位的盒子才有 z-index 属性

9.10.9 定位的拓展

绝对定位的盒子居中

① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px;：让盒子向左移动自身宽度的一半。
定位特殊特性

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

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

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

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

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
绝对定位（固定定位）会完全压住盒子

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

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

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

9.11 网页布局的总结

标准流

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

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

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

9.12 元素的显示与隐藏

9.12.1 display 属性

display 属性用于设置一个元素应如何显示

display: none ；隐藏对象
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置。

9.12.2 visibility 可见性

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

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

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

9.12.3 overflow 溢出

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

① visible ：不剪切内容也不添加滚动条

② hidden：不显示超过对象尺寸的内容，超出部分隐藏掉

③ scroll：不管超出未超出，都显示滚动条

④ auto：超出自动显示滚动条，不超出不显示滚动条

10.CSS高级技巧

10.1 精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵图（sprites）的使用

①精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

②这个大图片也称为 sprites 精灵图或者雪碧图

③移动背景图片位置，此时可以使用 background-position 。

④ 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同

⑤ 因为一般情况下都是往上往左移动，所以数值是负值。

⑥ 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

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

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

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

10.2 字体图标

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：

字体图标的下载
字体图标的引入（引入到我们html页面中）
字体图标的追加（以后添加新的小图标）

推荐网站：

icomoon 字库 http://icomoon.io

阿里 iconfont 字库 http://www.iconfont.cn/

10.3 CSS三角

div {
            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;
        }

核心：想成一个正方形，从正中心开始向四个顶点辐射出来的形成的三角形

在这里插入图片描述

10.4 CSS更改鼠标样式

li {cursor: pointer; }

default：默认的，就是原始的鼠标样式

pointer：变成小手

move：变成移动图标

text：变成文本图标

not-allowed：变成禁止图标

10.5 CSS取消表单的轮廓线

当选中表单或者文本域的时候会出现一个轮廓线，可以取消掉

input {outline: none; }

10.6 防止拖拽文本域 resize

实际文本域可以拖拽变大变小的，这里可以让他不可变

textarea{ resize: none;}

10.7 图片或者表单(行内块元素）与文字的对齐方式

语法：

vertical-align : baseline | top | middle | bottom

baseline：默认元素在父元素的基准线上

top：把元素的顶端和行中最高元素顶端对齐

middle：把元素放置在父元素的中部

bottom：把元素的顶端与行中最低元素顶端对齐
用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

10.8 图片底部默认空白缝隙

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

主要解决方法有两种：

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

10.9 溢出的文字省略号显示

单行文本溢出显示省略号

① 先强制一行内显示文本

white-space: nowrap; （默认 normal 自动换行）

② 超出的部分隐藏

overflow: hidden;

③ 文字用省略号替代超出的部分

text-overflow: ellipsis;
多行文本溢出显示省略号

① overflow: hidden;

text-overflow: ellipsis;

② 弹性伸缩盒子模型显示

display: -webkit-box;

③ 限制在一个块元素显示的文本的行数

-webkit-line-clamp: 2;

④ 设置或检索伸缩盒对象的子元素的排列方式

-webkit-box-orient: vertical;

三、HTML5 新增标签和属性

IE9+ 以上版本才会使用

1.HTML5 新增的语义化标签

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

2. HTML5 新增的多媒体标签

音频：

1.1 语法：

<audio src="文件地址" controls="controls"></audio>
----------------------------------------------------
 <audio controls="controls" >
     <source src="happy.mp3" type="audio/mpeg" >
     <source src="happy.ogg" type="audio/ogg" >
      您的浏览器暂不支持 <audio> 标签。
 </ audio>

视频：

2.1 语法：

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

3.HTML5 新增的 input 类型

在这里插入图片描述

4.新增表单属性

在这里插入图片描述

四、CSS新增属性

1.新增选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1. 属性选择器

1.1 属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

在这里插入图片描述

<style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
    </style>

 <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>

2.结构伪类选择器

在这里插入图片描述

2.1 nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）

① n 可以是数字，关键字和公式

② n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…

③ n 可以是关键字：even 偶数，odd 奇数

④ n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

2.2 nth-of-type

在这里插入图片描述

2.3. 区别：

① nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配先看第几个元素数据，然后再看是不是对应的类型不是的话就不变，是的话就变

② nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子先找到对应的类型，再去找第几个元素需要改变

       /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */

        section div:nth-child(1) {
            background-color: red;
        }
         /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */
        section div:nth-of-type(1) {
            background-color: blue;
        }


<!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>

3. 伪元素选择器

在这里插入图片描述

注意：

① before 和 after 创建一个元素，但是属于行内元素

②新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

③ 语法： element::before {}

④ before 和 after 必须有 content 属性

⑤ before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

⑥ 伪元素选择器和标签选择器一样，权重为 1

2.CSS3 盒子模型

2.1 CSS3 中可以通过 box-sizing 来指定盒模型

可以分成两种情况：

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

2.2 图片变模糊

CSS3滤镜filter:

filter: 函数(); 例如： filter: blur(5px); blur模糊处理数值越大越模糊

  <style>
        img {
            /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(15px);
        }
        img:hover {
            filter: blur(0);
        }
    </style>
</head>
<body>
   <img src="images/pink.jpg" alt="">
</body>

CSS3 calc 函数:

width: calc(100% - 80px);

          .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .son {
            /* width: 150px; */
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

CSS3 过渡 记住过渡的使用口诀：谁做过渡给谁加

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

①属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。

② 花费时间： 单位是秒（必须写单位）比如 0.5s

③ 运动曲线： 默认是 ease （可以省略）

**④何时开始：**单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）

 <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 10%;
            height: 100%;
            background-color: red;
            border-radius: 7px;
          
        }
        .bar:hover .bar_in {
            width: 100%;
              /* 谁做过渡给谁加 */
            transition: all 20s;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

3.CSS 2D转换

3.1 二维坐标系

在这里插入图片描述

3.2 移动：translate

定义

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法

transform: translate(x,y);

transform: translateX(n);

transform: translateY(n);
重点

① 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素

② translate最大的优点：不会影响到其他元素的位置

③ translate中的百分比单位是相对于自身元素的 translate:(50%,50%);

④ 对行内标签没有效果

代码

div {
  width: 200px;
  height: 200px;
  background-color: pink;
  /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
  /* transform: translate(x, y); */
  /* transform: translate(100px, 100px); */
  /* 1. 我们如果只移动x坐标 */
  /* transform: translate(100px, 0); */
  /* transform: translateX(100px); */
  /* 2. 我们如果只移动y坐标 */
  /* transform: translate(0, 100px); */
  /* transform: translateY(100px); */
 -----------------------------------------------------
  /* 1. 我们tranlate里面的参数是可以用 % */
  /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
  /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
  /* transform: translateX(50%); */
}

3.3 旋转：rotate

定义

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法

transform:rotate(度数)
transform-origin: x y; 旋转中心点

重点

① rotate里面跟度数，单位是 deg 比如 rotate(45deg)

② 角度为正时，顺时针，负时，为逆时针

③ 默认旋转的中心点是元素的中心点

代码

img {
    width: 150px;
    /* 顺时针旋转45度 */
    /* transform: rotate(45deg); */
    border-radius: 50%;
    border: 5px solid pink;
    /* 过渡写到本身上，谁做动画给谁加 */
    transition: all 0.3s;
}
        
img:hover {
   transform: rotate(360deg);
}

3.4 转换中心点

语法
```
transform-origin: x y;
```
重点

① 注意后面的参数 x 和 y 用空格隔开

② x y 默认转换的中心点是元素的中心点 (50% 50%)

③ 还可以给x y 设置像素或者方位名词（top bottom left right center）

代码

div {
   width: 200px;
   height: 200px;
   background-color: pink;
   margin: 100px auto;
   transition: all 1s;
   /* 1.可以跟方位名词 */
   /* transform-origin: left bottom; */
   /* 2. 默认的是 50%  50%  等价于 center  center */
   /* 3. 可以是px 像素 */
   transform-origin: 50px 50px;
}
        
div:hover {
  transform: rotate(360deg);
}

3.5 缩放：scale

语法
```
transform:scale(x,y);
```
注意

① 注意其中的x和y用逗号分隔

② transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大

③ transform:scale(2,2) ：宽和高都放大了2倍

④ transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

⑤ transform:scale(0.5,0.5)：缩小

⑥ sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

代码

div {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 100px auto;
  /* transform-origin: left bottom; */
}
        
div:hover {
   /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
   /* transform: scale(x, y); */
   /* transform: scale(2, 2); */
   /* 2. 修改了宽度为原来的2倍  高度 不变 */
   /* transform: scale(2, 1); */
   /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
   /* transform: scale(2); */
   /* 4. 我们可以进行缩小  小于1 就是缩放 */
   /* transform: scale(0.5, 0.5); */
   /* transform: scale(0.5); */
   /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
   /* width: 300px;
      height: 300px; */
   transform-origin: right bottom;
   transform: scale(20);
}

3.6 2D 转换综合写法

语法

transform: translate() rotate() scale() ...等

重点

① 其顺序会影转换的效果。（先旋转会改变坐标轴方向）

② 当我们同时有位移和其他属性的时候，记得要将位移放到最前

3.7 总结

① 转换transform 我们简单理解就是变形有2D 和 3D 之分

② 我们暂且学了三个分别是位移旋转和缩放

③ 2D 移动 translate(x, y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的

④ 可以分开写比如 translateX(x) 和 translateY(y)

⑤ 2D 旋转 rotate(度数) 可以实现旋转元素度数的单位是deg

⑥ 2D 缩放 sacle(x,y) 里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子

⑦ 设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词

⑧ 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

4. CSS3 动画

4.1 动画的基本使用

制作动画分为两步：

4.1.1 先定义动画

用keyframes 定义动画

@keyframes 动画名称 {
  0%{
     width:100px;
    } 
  100%{
     width:200px;
  }
}

动画序列

① 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

② 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

③ 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

④ 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

在这里插入图片描述

4.1.2 再使用（调用）动画

语法

div {
   width: 200px;
   height: 200px;
   background-color: aqua;
   margin: 100px auto;
   /* 调用动画 */
   animation-name: 动画名称;
   /* 持续时间 */
   animation-duration: 持续时间;
}

动画常用属性

① @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”，还有“paused”

⑩ animation-fill-mode 规定动画结束后状态，保持forwards回到起始的backwards

4.1.3 动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
语法：
```
animation: myfirst 5s linear 2s infinite alternate;
```
① 简写属性里面不包含 animation-play-state

② 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用

③ 想要动画走回来，而不是直接跳回来：animation-direction ： alternate

④ 盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

4.1.4 速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

5.CSS 3D转换

5.1 三维坐标系

x轴：水平向右
- 注意： x 右边是正值，左边是负值
y轴：垂直向下
- 注意： y 下面是正值，上面是负值
z轴：垂直屏幕
- 注意：往外面是正值，往里面是负值

在这里插入图片描述

5.2 3D移动 translate3d

语句

translform:translateX(100px)：仅仅是在x轴上移动
translform:translateY(100px)：仅仅是在Y轴上移动
translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离

代码

body {
  /* 透视写到被观察元素的父盒子上面 */
  perspective: 200px;
}       
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* transform: translateX(100px);
    transform: translateY(100px); */
    /* transform: translateX(100px)             		   translateY(100px) translateZ(100px); */
    /* 1. translateZ 沿着Z轴移动 */
    /* 2. translateZ 后面的单位我们一般跟px */
    /* 3. translateZ(100px) 向外移动100px （向我们的眼睛来移动的） */
    /* 4. 3D移动有简写的方法 */
    /* transform: translate3d(x,y,z); */
    /* transform: translate3d(100px, 100px, 100px); */
    /* 5. xyz是不能省略的，如果没有就写0 */
    transform: translate3d(400px, 100px, 100px);
}

其中transform: translateZ(0); 要配合perspective: 200px; 才能体现出来

5.3 透视

在这里插入图片描述

透视写在被观察元素的父盒子上面的

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

z：就是 z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

5.4 translateZ

translform:translateZ(100px)：仅仅是在Z轴上移动。
有了透视，就能看到translateZ 引起的变化了

translateZ：近大远小
translateZ：往外是正值
translateZ：往里是负值

5.5 3D旋转

语法

transform:rotateX(45deg)：沿着x轴正方向旋转 45度

transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg

transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg

transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）

X轴旋转方向
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
Y轴旋转方向
- 左手的手拇指指向 y轴的正方向
- 其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）

5.6 3D呈现 transfrom-style

控制子元素是否开启三维立体环境。。
trnsform-style: flat 子元素不开启3d立体空间默认的
transform-style: preserve-3d; 子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用

代码：

<style>
        body {
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(60deg);
        }
        /* 给两个盒子重叠到一起 */
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        /* 给最后一个盒子换个颜色，并且旋转60度 */
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>

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

5.7 旋转木马综合案例

<!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>Document</title>
    <style>
        body {
            perspective: 1000px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }
        
        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }
        
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }
        
        section div:nth-child(2) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

6. 浏览器私有前缀

1. 私有前缀

-moz-：代表 firefox 浏览器私有属性

-ms-：代表 ie 浏览器私有属性

-webkit-：代表 safari、chrome 私有属性

-o-：代表 Opera 私有属性

2. 提倡的写法

-moz-border-radius: 10px; 

-webkit-border-radius: 10px; 

-o-border-radius: 10px; 

border-radius: 10px;

五、移动WEB开发

1. 视口

**视口（viewport）**就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

1.1 布局视口layout viewport

极为将pc端的布局，在手机端直接显示。只不过元素看上去很小，一般默认可以通过手动缩放网页

1.2 视觉视口visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

1.3 理想视口ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

2.视口标签

2.1 meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width 宽度设置的是viewport的宽度，可以设置device-width（设备宽度）特殊值
initial-sacle 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或者0）

2.2 标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

3.二倍图

物理像素就是我们说的分辨率 iPhone8的物理像素是 750
在 iPhone8里面 1px 开发像素 = 2个物理像素

4.多倍图

在使用过程中注意背景图片的缩放问题，故需要使用background-size来解决

  /* 在 iphone8 下面 */
 img{
        /*原始图片100*100px*/
        width: 50px;
        height: 50px;
    } 
.box{
        /*原始图片100*100px*/
        background-size: 50px 50px;
    }

5.背景缩放

语法

background-size: 背景图片宽度 背景图片高度

注意事项
- 单位：长度|百分比|cover|contain
- cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
- contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

代码

<style>
  div {
    width: 500px;
    height: 500px;
    border: 2px solid red;
    background: url(images/dog.jpg) no-repeat;
    /* background-size: 图片的宽度 图片的高度; */
    /* background-size: 500px 200px; */
    /* 1.只写一个参数 肯定是宽度 高度省略了  会等比例缩放 */
    /* background-size: 500px; */
    /* 2. 里面的单位可以跟%  相对于父盒子来说的 */
    /* background-size: 50%; */
    /* 3. cover 等比例拉伸 要完全覆盖div盒子 宽度到了/高度铺满div盒子 不会停止拉伸，除非宽高全部到才会停止  
            故可能会导致有部分背景图片显示不全 */
    /* background-size: cover; */
    /* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
    /* background-size: contain; */
        }
    </style>

4.移动端开发选择

单独制作页面（主流）
- 网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面
响应式布局（三星官网）
- 通过判断屏幕宽度来改变样式，以适应不同终端。
  缺点：制作麻烦，需要花很大精力去调兼容性问题

5.移动端技术特殊样式

    /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }

六、移动端常见布局

1.流式布局

流式布局，就是百分比布局，也称非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
流式布局方式是移动web开发使用的比较常见的布局方式。
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度（min-height 最小高度）

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: pink;
        }
        
        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

2.多倍图精灵图用法

把精灵图等比例缩放为原来的一半
之后根据大小测量坐标
注意代码里面background-size也要写：精灵图原来宽度的一半

3.flex布局

3.1 布局原理

3.1.1 概念

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"

在这里插入图片描述

下列代码中 div 就是 flex父容器。
代码中 span 就是子容器 flex项目
子容器可以横向排列也可以纵向排列

代码

<!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>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }
        
        div span {
            /* width: 150px; */
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            flex: 1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

4.flex布局中父项常见属性

4.1 flex-direction 设置主轴的方向(※)

4.1.1 概念

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x 轴和y 轴

默认主轴方向就是 x 轴方向，水平向右
默认侧轴方向就是 y 轴方向，水平向下

4.1.2 属性值

flex-direction 属性决定主轴的方向（即项目的排列方向）

row 默认值即为沿X （行）从左到右
row-reverse 从右到左
column 从上到小
column-reverse 从上到小

注意：

主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

代码

<!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>Document</title>
    <style>
        div {
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 行 row  那么y轴就是侧轴喽 */
            /* 我们的元素是跟着主轴来排列的 */
            /* flex-direction: row; */
            /* 简单了解 翻转 */
            /* flex-direction: row-reverse; */
            /* 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴 */
            flex-direction: column;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

4.2 justify-content 设置主轴上的子元素排列方式

4.2.1 属性值

flex-start ：默认值从头部开始如果主轴是x轴，则从左到右
flex-end：从尾部开始
center：在主轴居中对齐
space-around：平分剩余空间
space-between：先两边贴边再平分剩余空间

代码：

<!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>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 让我们子元素居中对齐 */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边， 在分配剩余的空间 */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

4.3 flex-warp 设置子元素是否换行

nowrap：默认值，不换行
wrap：换行

代码：

<style>
  div {
    display: flex;
    width: 600px;
    height: 400px;
    background-color: pink;
    /* flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面  */
    /* flex-wrap: nowrap; */
    flex-wrap: wrap;
 }
        
   div span {
       width: 150px;
       height: 100px;
       background-color: purple;
       color: #fff;
       margin: 10px;
 }
</style>

4.4 align-items 设置侧轴上的子元素排列方式（单行）

flex-start：从上到小
flex-end：从下到上
center：居中
stretch：拉伸

4.5 align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

flex-start：默认值在侧轴的头部开始
flex-end：默认值在侧轴的尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴评分剩余空间
space-between：子项在侧轴先分布在两头再平分剩余空间
stretch：设置子项元素高度平分父元素高度

<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>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

4.6 align-content和align-items区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items 多行找 align-content

4.7 flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow:row wrap;

4.8 总结

flex-direction：设置主轴的方向
jusify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

5.flex布局子项常见属性

5.1 flex属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item {

 flex: <number>; /* default 0 */

}

举例：比如number=3，子项数量为3，那么就相当于这个父盒子被分为5分，这个子盒子占了3/5

5.2 align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

代码：

span:nth-child(2) {
 /* 设置自己在侧轴上的排列方式 */
 align-self: flex-end;
}

5.3 order 属性

数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。

.item {
    order: <number>;
}

6.背景线性渐变

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);

background: -webkit-linear-gradient(left, red , blue);

background: -webkit-linear-gradient(left top, red , blue);

背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数，如果省略默认就是 top

7. rem适配布局

7.1 rem单位

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

7.2 媒体查询

7.2.1 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

注意：

用@media开头
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

7.2.2 mediatype 查询类型

all ：用于所有设备
print ：用于打印设备
scree：用于电脑屏幕平板电脑智能手机等

7.2.3 关键字

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

7.2.4 媒体特性

width ：定义输出设备中页面可见区域宽度
min-width ：定义输出设备中页面最小可见区域宽度
max-width：定义输出设备中页面最大可见区域宽度

7.2.5 代码

<style>
   /* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
   /* max-width 小于等于800 */
   /* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
        
   @media screen and (max-width: 800px) {
       body {
         background-color: pink;
       }
    }
        
    @media screen and (max-width: 500px) {
        body {
          background-color: purple;
        }
     }
</style>

8.媒体查询引入资源

语法

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

9. Less基础

9.1 Css弊端

css需要书写大量看似没有逻辑的代码。冗余度比较高
不方便维护和扩展，不利于复用
CSS没有很好的计算能力

9.2 Less介绍

Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性。
Less中文网址： http://lesscss.cn/

9.3 Less变量

语法
- @变量名：值；
命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感

使用规范

//直接使用
body{
   color:@color;
}
   a:hover{
   color:@color;
}

9.4 Less编译

Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。
使用easy Less插件就可以对等翻译出CSS文件

9.5 Less嵌套

普通嵌套

CSS嵌套

#header .logo {
   width: 300px;
}

对应的Less嵌套

#header {
   .logo {
     width: 300px;
   }
}

交集|伪类|伪元素选择器
- 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
- 如果有 & 符号，它就被解析为父元素自身或父元素的伪类。

对应CSS伪类选择器

a:hover{
   color:red;
}

对应的Less选择器

a{
   &:hover{
   color:red;
  }
}

9.6 Less运算

9.6.1 Less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

代码

/*Less 里面写*/
@witdh: 10px + 5;
div {
  border: @witdh solid red;
}
/*生成的css*/
div {
   border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

注意事项
- 乘号（*）和除号（/）的写法。除号要加（）否则不会生效
- 对于两个不同单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位

10. rem 适配方案

10.1 方案含义

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时

候，等比例适配当前设备。
使用媒体查询根据不同设备按比例设置html的字体大小，然后

页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸

也会发生变化，从而达到等比缩放的适配。

10.2 rem实际开发适配方案

按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）
CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

10.2.1 rem实际开发适配方案一

rem+媒体查询+Less技术

动态设置 html 标签 font-size 大小

① 假设设计稿是750px

② 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③ 每一份作为html字体大小，这里就是50px

④ 那么在320px设备的时候，字体大小为320/15 就是 21.33px

⑤ 用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的

⑥ 比如我们以 750为标准设计稿

⑦ 一个100*100像素的页面元素在 750屏幕下，就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1

⑧ 320屏幕下， html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨ 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果
元素大小取值方法

① 最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

② 屏幕宽度/划分的份数就是 html font-size 的大小

③ 或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

11.Bootstrap前端开发框架

11.1 Bootstrap的使用

创建文件夹结构

创建html骨架结构

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
 <!--[if lt IE 9]>
 <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->

引入相关样式文件

<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

书写内容

1.直接拿Bootstrap 预先定义好的样式来使用
2.修改Bootstrap 原来的样式，注意权重问题
3.学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

11.2 Bootstrap 介绍

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类。
container 类
- 响应式布局的容器固定宽度
- 大屏 ( >=1200px) 宽度定为 1170px
- 中屏 ( >=992px) 宽度定为 970px
- 小屏 ( >=768px) 宽度定为 750px
- 超小屏 (100%)
container-fluid 类
- 流式布局容器百分百宽度
- 占据全部视口（viewport）的容器。

11.3 Bootstrap格栅系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多==12列==。
栅格选项参数

按照不同屏幕划分为1~12 等份
行（row）可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class=“col-md-4 col-sm-6”

代码：

<body>
    <div class="container">
        <div class="row">
            <!-- col-lg-3  lg 大屏下占3份  md 中等屏下占4份  sm 小屏下占6份  xs 超小屏下占12份 -->
            <div class="col-lg-3 col-md-4 colsm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <!-- 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 如果孩子的份数相加 小于 12 则会？ 则占不满整个container 的宽度 会有空白 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 如果孩子的份数相加 大于 12 则会？多于的那一列会 另起一行显示  -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>

11.4 格栅嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

语法

<!-- 列嵌套 -->
 <div class="col-sm-4">
 <div class="row">
 <div class="col-sm-6">小列</div>
 <div class="col-sm-6">小列</div>
 </div>
</div>

代码：

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
                <div class="row">
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

11.5 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

语法:

<!-- 列偏移 -->
 <div class="row">
 <div class="col-lg-4">1</div>
 <div class="col-lg-4 col-lg-offset-4">2</div>
 </div>

11.6 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

语法：

<!-- 列排序 -->
 <div class="row">
 <div class="col-lg-4 col-lg-push-8">左侧</div>
 <div class="col-lg-8 col-lg-pull-4">右侧</div>
 </div>

11.7 响应式工具

在这里插入图片描述

12. VW单位

目标：能够使用vw单位设置网页元素的尺寸
相对单位
相对视口的尺寸计算结果
vw：viewport width
1vw = 1/100视口宽度
vh：viewport height
1vh = 1/100视口高度
流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多==12列==。

栅格选项参数

[外链图片转存中…(img-nXCue5gp-1751613016147)]

按照不同屏幕划分为1~12 等份
行（row）可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class=“col-md-4 col-sm-6”

代码：

<body>
    <div class="container">
        <div class="row">
            <!-- col-lg-3  lg 大屏下占3份  md 中等屏下占4份  sm 小屏下占6份  xs 超小屏下占12份 -->
            <div class="col-lg-3 col-md-4 colsm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <!-- 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 如果孩子的份数相加 小于 12 则会？ 则占不满整个container 的宽度 会有空白 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 如果孩子的份数相加 大于 12 则会？多于的那一列会 另起一行显示  -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>

11.4 格栅嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

语法

<!-- 列嵌套 -->
 <div class="col-sm-4">
 <div class="row">
 <div class="col-sm-6">小列</div>
 <div class="col-sm-6">小列</div>
 </div>
</div>

代码：

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
                <div class="row">
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

11.5 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

语法:

<!-- 列偏移 -->
 <div class="row">
 <div class="col-lg-4">1</div>
 <div class="col-lg-4 col-lg-offset-4">2</div>
 </div>

11.6 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

语法：

<!-- 列排序 -->
 <div class="row">
 <div class="col-lg-4 col-lg-push-8">左侧</div>
 <div class="col-lg-8 col-lg-pull-4">右侧</div>
 </div>

11.7 响应式工具

[外链图片转存中…(img-zf494EIi-1751613016147)]

12. VW单位

目标：能够使用vw单位设置网页元素的尺寸
相对单位
相对视口的尺寸计算结果
vw：viewport width
1vw = 1/100视口宽度
vh：viewport height
1vh = 1/100视口高度

CSS学习笔记

文章目录

一、项目中的总结

二 、CSS学习

1.语法规范

2.选择器分类

2.1 基础选择器

2.1.1 标签选择器

2.1.2 类选择器

2.1.3 id选择器

2.1.4 通配符选择器

2.2 复合选择器

2.2.1 后代选择器 (重要）

2.2.2 子选择器

2.2.3并集选择器 (重要）

2.2.4伪类选择器

2.2.5 链接伪类选择器

2.2.6 :focus 伪类选择器

3. CSS 字体属性

3.1 字体系列

3.2 字体大小

3.3 字体粗细

3.4 文字样式

3.5 复合属性

4. CSS 文本属性

4.1 文本颜色

4.2 对齐文本

4.3 装饰文本

4.4 文本缩进

4.5 行间距

5.CSS 引入方式

5.1行内样式表（行内式）

5.2 内部样式表（嵌入式）

5.3 外部样式表（链接式）

6.CSS 的元素显示模式

6.1 块元素

~

等都是文字类块级标签，里面也不能放其他块级元素

6.2 行内元素

6.3 行内块元素

6.4 元素显示模式转换

7.CSS背景

7.1 背景颜色

7.2背景图片

7.3 背景平铺

7.4 背景图片位置

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

7.6 背景的复合写法

8.CSS三大特性

8.1 继承性

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

8.1.2 行高的继承性

8.2 层叠性

8.3 优先级

9.盒子模型

9.1 盒子模型组成

9.2 边框（border）

9.2.1 边框样式 border-style

9.2.2 边框简写

9.2.3 表格的细线边框

9.3 内边距（padding）

9.4 外边距

9.4.1 外边距可以让块级盒子水平居中

9.4.2 外边距合并-塌陷

9.5 清除内外边距

9.6 圆形边框

9.7 盒子阴影

9.8 文字阴影

9.9 网络布局 –浮动

9.9.1 标准流

9.9.2 浮动

9.9.3 清除浮动

9.10 网络布局–定位

9.10.1 为什么要有定位

9.10.2 定位的组成

9.10.3 相对定位relative（重要）

9.10.4 绝对定位 absolute（重要）

9.10.5 固定定位 fixed （重要）

9.10.6 粘性定位 sticky

9.10.8 定位叠放次序 z-index

二、CSS学习

1.1 属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

2.1 nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）