css笔记

最新推荐文章于 2024-05-18 06:08:21 发布

qaz5865026123

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量244

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qaz5865026123/article/details/129008206

版权

文章目录

CSS
CSS3

CSS

027 css 内部样式表

什么是 css：层叠样式表。
语法：
每个样式由选择符和声明组成，声明又分为属性和属性值；
属性必须放在花括号中，属性与属性值用冒号连接；
每条声明用分号结束；
当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开即可；
在书写样式过程中，空格、换行等操作不影响属性显示。
嵌入 html：用 style 标签包裹整个 css 段，最好是把 css 放到 head 标签的最后，使得代码更清晰

<head>
    <style>
        h1{
            color: antiquewhite;
        }
        h2{
            color:beige;
        }
        h3{
            color:bisque;
        }
    </style>
</head>

028 css 外部样式表

需要先在项目中写好修饰当前 html 的 css 文件，然后在 html 中引入该 css 文件，
有两种方法引入：

link 标签引入外部 css 文件
rel 属性：stylesheet 表示样式表，
type 属性：样式表类型
href 属性：地址
style 标签引入外部 css 文件
给 style 标签的 type 属性设置为 text/css 类型，然后通过 @import url（” 路径 “）；引入 css 文件

两种方式的区别：

本质：link 属于 XHTML，@import 属于 css
加载顺序：link 引用的 css 和页面同时加载，import 引用的 css 会等到页面被下载完以后再加载
兼容性：link 比 @import 出来的早一点，@import 兼容性不如 link，老的浏览器不支持

<!-- html -->
<head>
	<link rel="stylesheet" type="text/css" href="../css/01_vscode创建.css">
	<style type="text/css">
		@import url("../css/01_vscode创建.css");
	</style>
</head>

/* css */
h1{
    color: antiquewhite;
}
h2{
    color:beige;
}
h3{
    color:bisque;
}

029 css 行内样式表

在 html 文件中的某个标签若想直接使用 css 样式修饰，可以用用其 style 属性，属性内的内容为该标签的 css 样式属性和对应的属性值，不同属性同样分号结尾，规则同 css。
最好还是用外部引入方式，使代码更清晰

<h4 style="color: aquamarine;">yesyesyesyesyesyesyes</h4>

030 css 样式表优先级

不做特殊说明时，就近原则：行内 > 内部 > 外部
!important：在属性值最后加上这个标识，会使之优先级最高

031 class 选择器

对 html 内相同的标签，如果想单独修饰部分，我们用给对应的标签加上 class 属性，并为它赋对应的 class 名，在 css 中用 .class 名的方式选择。
类名可以有多个，直接用空格隔开就可以，类名没有优先级，由 css 内的顺序决定。
多个标签若类名相同则归为同一类

<!-- html -->
<h4 class="one two">yesyesyesyesyesyesyes</h4>

/* css */
 .one{
    color: aquamarine;
 }
 .two{
     color: blueviolet;
 }

033 id 选择器

给标签命名，定义一个 id，这个 id 只能为英文且是唯一的，不可以与其他标签 id 重复（相当于微信小程序的 name），也不能是关键字（所有的标签和属性都是关键字), 在 css 中用 #id 名选择。
不管是 class 名还是 id 名都要注意不要打错空格

034 通配符选择器

在 css 中用 * 选择，表示选择所有标签，主要用在修改边距上。

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

035 群组与后代选择器

将多个标签的 css 一起写

群组：用逗号，隔开即可，表示多选
后代：空格隔开，表示包含关系
子代：用 > 连接的两个标签，表示前一个标签内部的第一个子标签，
子代与后代不同在于这个标签只选择一个子标签，后代选择器会选择所有标签

div,p,h1,.one{
	color: pink;
}
div h1{
	color: pink;
}
div>h1{
	color: pink;
}

036 伪类选择器

主要用于超链接 a 标签，其它元素也可以使用部分选择符。
语法：

a:link{属性：属性值} 超链接的初始状态
a:visited{属性：属性值} 超链接被访问后的状态
a:hover{属性：属性值} 鼠标悬停的状态
a:active{属性：属性值} 超链接被激活时的状态，是鼠标按下时的状态
link–visited–hover–active
说明
当四个超链接伪类选择符联合使用时，要注意它们的使用顺序，只有按 link、visited、hover、active 的顺序使用时，才能达到预期效果
为了简化代码，可以把伪类选择符中相同的声明提出来放到 a 选择符中，
例如 a{color：red} a{hover：green}，表示初始和访问过的一样，悬停和点击时一样。

038 选择器的权重

优先级：!import > 内联样式 > 包含选择符 > id 选择器 > class 选择器 > 类型（标签元素）选择器
当不同选择符对同一个样式设置有冲突时，按照权重来执行；
当相同权重选择符对元素设置有冲突时按照就近原则，同一个位置会显示最后定义的。

039 文本属性 font line text

1. 字体大小 font-size

单位是 px，浏览器默认 16px，设计图常用 12px

2. 字体 font-family

当字体中间有空格时，需要加双引号；
多个字体中间用逗号连接，先解析第一个字体，如果没有就解析第二个字体，以此类推
常用字体：宋体、黑体、微软雅黑、微软正黑体、新宋体、新细明体、细明体、标楷体、仿宋、楷体等

3. 颜色 color

color:red; color:#ff0; color:rgb(255,0,0):0-255 三种格式均可

4. 加粗 font-weight

可以是单词也可以是数字；
数字为 100-900，100 是细体，数值越大字体越粗，通常用 100、400、700、900
单词通常有： bolder 更粗的、 bold 加粗、normal 常规、ligter 细体

5. 倾斜 font-style

font-style：italic 斜体字 / oblique 倾斜的文字 / normal 常规显示

6. 文本水平对齐 text-align

left 水平靠左 rigth 水平靠右 / center 水平居中 / justify 水平两端对齐（只对多行起作用）

7. 行高 line-height

单位 px
当想要单行文本垂直居中时，可以设置文字的垂直大小与外层盒子高度一致，就可以达到垂直居中的效果。

8. 首行缩进 text-indent

可以取负值，只对第一行起作用
注意区分各种单位，em 为字体的大小，比如 2em，就是缩进两个字，随字体大小改变而改变。

9. 字间距 letter-spacing

控制文字之间的距离

10. 文本修饰 text-decoration

none 没有、underline 下划线、overline 上划线、line-through 删除线
当标签内容默认有修饰时，可以用 none 去掉，比如超链接不想要下划线，就可以设置此属性值为 none；

11. 检索大小写 tex- transform

英文字符的大小写转换属性，capitalize 首字母大写、lowercase 转小写、uppercase 转大写

12. 文字简写 font

font 是 font-style、font-weight、font-size / line-height、font-family 的简写。
例如 font：oblique 800 30px / 80px “宋体”；顺序不能改变，
必须同时指定 font-size / ilne-height 和 font-family 属性才起作用，意思是其他可以省略，这俩不能省略。

047 列表属性 list

1. 列表符合样式 list-style-type

disc 实心圆、cicle 空心圆、square 实心方块、none 去掉符号

2. 将图片设置为列表符合样式 list-style-image

url（地址），地址不用加双引号

3. 设置列表项标记的防止位置 list-style-position

outside 列表外面默认值、inside 列表的里面

4. 简写 list-style

048 背景属性

1. 背景颜色 background-color

除了之前的几种颜色写法外，还有 rgba（r，g，b，a）的写法，这里的 a 是透明度，取值范围为 0 到 1，0 为完全透明，1 为完全不透明。

.box1{
            width: 300px;
            height: 300px;
            background-color: bisque;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgba(0,250,0,0.5);
        }

2. 背景图片 background-image

图片效果默认平铺，一张图片不够时多复制几分铺满

background-image: url(02.jpg);

3. 背景图片的平铺 background-repeat

repeat 默认横竖平铺、repeat-x 横向平铺、repeat-y 纵向平铺、no-repeat 不平铺；

background-repeat: repeat-x;

4. 背景图片的位置 background-position

背景图片在盒子中的位置，

20px 20px 图片左上（第一个像素点）在盒子中的位置
10% 10% 按盒子百分比算位置
x= left / center / right, y = top / center / bottom

background-position: center center;

049 背景图片的大小 background-size

background-size 属性，给图片直接拉到设定的大小：

100px 100px，
100% 100%，
cover 按比例放大图片直到可以完全覆盖盒子，完全铺满
contain 保持图片比例放大来适应盒子，不一定能铺满
前两种形式可能会改变图片比例，后两种不会

background-size: cover;

050 背景图片的固定 background-attachment

background-attachment：scroll（随着页面滚动）/ fixed（固定，固定在浏览器窗口的位置，即使滑动盒子，图片不会动）
fixed 理解：图片设置为 fixed，是把图片固定在浏览器的某个位置，而它只能在我们设置的盒子中显示，所以当盒子移动到相应的位置时，就可以显示特定的位置，而盒子移开时，没有办法显示出来，会被其他盒子覆盖。

051 视觉差案例

效果展示

视觉差案例展示

<!--html-->
<div class="sjcbox1"></div>
    <div class="sjcbox2"></div>
    <div class="sjcbox3"></div>

/*css
这里其实可以用其他选择符把这三个盒子选出来，然后对他们相同的属性设置好
*/
 .sjcbox1{
            height: 700px;
            width: 450px;
            background-image: url(htmlimg/sjc1.jpg);
            background-position: center center;
            background-size: contain;
            background-attachment: fixed;
        }
        .sjcbox2{
            height: 700px;
            width: 450px;
            background-image: url(htmlimg/sjc2.jpg);
            background-position: center center;
            background-size: contain;
            background-attachment: fixed;
        }
        .sjcbox3{
            height: 700px;
            width: 450px;
            background-image: url(htmlimg/sjc3.jpg);
            background-position: center center;
            background-size:contain;
            background-attachment: fixed;
        }

053 背景属性的复合写法

复合写法 background：图片背景颜色平铺效果位置固定；
这几个无序且可以缺少，（位置横向纵向不能换）
注意图片大小 size 不能复合，而且缺少的值不写等于选择默认，会覆盖掉前面单独写的属性，但是要是在复合之后单独写是可以的

054 浮动属性 float

float 属性，left 靠左边浮动 / right 靠右边浮动 / none 元素不浮动
浮动意为比原来的盒子凸出来一层，当多个盒子都浮动时，他们会横向顺序排列。
浮动最常用来排列布局

055 浮动属性 - 清浮动 clear

为了避免浮动元素覆盖后面不浮动的元素，有几种方法

把浮动元素的高度固定。之所以会覆盖是因为元素一旦浮动，其高度就默认为 0
清浮动，即使用 clear 属性，给不想被覆盖的元素做限制
在浮动元素后面增加一个清浮动的盒子，不设置宽高，只设置 clear：both
overflow：hidden；给浮动元素的外层盒子设置这样一个属性，那么盒子内部的排列布局不影响盒子之外的元素
clear 属性

none 默认允许有浮动
right 不允许右边有浮动对象
left 不允许左边有浮动对象
both 不允许有浮动对象
清除浮动只是改变元素的排列方式，元素还是漂浮着，不占据文档位置

056 浮动案例

无 overflow

有 overflow

<!--html-->
    <div class="box1">
        <div>
            <img src="https://pic2.zhimg.com/v2-7cdd17af32b9943b60151a10106485c1_r.jpg?source=1940ef5c">
            <p>刘亦菲1</p>
        </div>
        <div>
            <img src="https://pic2.zhimg.com/v2-7cdd17af32b9943b60151a10106485c1_r.jpg?source=1940ef5c">
            <p>刘亦菲2</p>
        </div>
        <div>
            <img src="https://pic2.zhimg.com/v2-7cdd17af32b9943b60151a10106485c1_r.jpg?source=1940ef5c">
            <p>刘亦菲3</p>
        </div>
        <div>
            <img src="https://pic2.zhimg.com/v2-7cdd17af32b9943b60151a10106485c1_r.jpg?source=1940ef5c">
            <p>刘亦菲4</p>
        </div>
        <div>
            <img src="https://pic2.zhimg.com/v2-7cdd17af32b9943b60151a10106485c1_r.jpg?source=1940ef5c">
            <p>刘亦菲5</p>
        </div>
    </div>
    <div>
        <img src="https://pic2.zhimg.com/v2-7cdd17af32b9943b60151a10106485c1_r.jpg?source=1940ef5c">
        <p>刘亦菲6</p>
    </div>

/*css*/
*{
  	 margin: 0;
     padding: 0;
 }
 .box1{
     overflow: hidden;
 }

 div div{
     float:left;
 }

 div img{
     width: 150px;
     height: 200px;
 }
 div p{
     width: 150px;
     font-size: 12px;
     text-align: center;
     background-color: #f6f7f8;
 }

057 盒子模型

盒子通常指 div
css 一开始一般会清掉所有的内外边距（设置为 0），用 * 选中，特别注意 img 和 p 这两个不同的元素，需要通过 img{dispaly：block；} 转换 img 类型来去掉 img 和 p 标签的边距
边距：盒子与内容之间的距离为内边距 padding，盒子之间的距离为外边距 margin。

058 盒子模型 - 内边距特性 padding

padding：内边距会增加盒子的宽高，最多可以设置 4 个值，1 个值表示四个反方向一样，两个值分别表示上下、左右，3 个值表示上、左右、下，四个值表示上、右、下、左，顺时针方向。
可以用 padding 把不需要的方向边距设置为 0，也可以用 padding-top、padding-right、padding-left、padding-bottom 设置单独方向的内边距。
背景色会蔓延到内边距

059 盒子模型 - 边框 border

border 属性，可以设置边框粗细、样式、颜色
border-width / style / color 也可以简写 border 来设置
样式：solid 单实线 \ double 双实线 \ dashed 虚线 \ dotted 点状线
边框也会增大盒子，背景色也能蔓延到边框。
对边框的宽度、颜色、样式都可以在四个方向不同设置

060 盒子模型 - 外边距 margin

margin 的大小四个方向也可以单独设置 margin：px px px px 或者 margin -（top / left / right / bottom）：px
外边距支持负值
盒子横向居中：margin：0 auto; 可以快速使得盒子居中，不再频繁使用 center 标签
auto 表示相对浏览器窗口居中，会根据窗口大小而移动。竖直方向居中是没有意义的。
特性问题：
1. 兄弟关系，两个盒子垂直边距与水平边距问题：
  垂直方向上，两个盒子实际外边距取最大值
  水平方向上，实际外边距为两个盒子的外边距相加
2. 父子关系，给子盒子加外边距，会怎么样
  会作用与父盒子，解决方案：
  1. 给父盒子加个内边距
  2. 给父盒子设置边框（transparent 透明）
  3. 加浮动，让两个盒子不在同一个层 (其中一个浮动），那么子盒子就不会作用到父盒子
  4. over-flow： hidden 对某个盒子设置后，它的特性不会影响其他盒子，其他盒子也不能影响它

064 溢出属性 - 布局 overflow

溢出属性 overflow（容器的）
visible：默认值，溢出内容会显示在元素之外
hidden：溢出内容隐藏不显示
scroll：滚动，无论是否溢出都会有横纵滚动条
auto：自动，无溢出时无滚动条，有溢出时自动添加滚动条
inherit：跟随父元素
可以对横纵单独设置溢出属性，overflow-x：visible；overflow-y：visible;

065 溢出属性 - 空余空间 white-space

white-space：normal / nowrap / pre / pre-wrap / pre-line / inherit，该属性用来设置如何处理元素内的空白。
normal：默认值，空白会被浏览器忽略
nowrap：文本不会换行，在同一行展示，直到遇到
标签为止
pre：显示空格、回车、不自动换行
pre-wrap：显示空格、回车、且自动换行
pre-line：显示回车、不显示空格、会自动换行

066 溢出属性 - 溢出省略符 text-overflow

当文本在当前盒子中溢出时，用这个属性设置溢出的显示处理。
例如：text-overflow: ellipsis;
若有溢出，将溢出部分不显示，用省略号代替，以达到不溢出。
效果 Lorem ipsum, dolor sit amet consectetu…

067 元素显示类型

元素类型的分类，依据 CSS 的显示

块元素 (block element)
- 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
- 自带 display：block 属性，display 为 list-item 列表的也归类为块元素。
- 默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列。
- 块状元素都可以定义自己的宽度和高度。
- 块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素，我们可以把这种容器比喻为一个盒子，但是 p 标签不可以内嵌其他元素。
- 例如：div p ulli olli dl dt dd hl-h6 等
行内（内联）元素
- 内联元素的表现形式是始终以行内逐个进行显示；横着排，
- 自带 dispaly：inline 属性
- 内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会
- 内联元素也会遵循盒模型基本规则，但是对于 argin 和 padding 个别属性值不生效，只支持 padding 且是左右边距。
- 例如：a b em i span strong 等呈现矩形形状
行内块元素
- 内联块状元素 (inline-block) 就是同时具备内联元素、块状元素的特点，既可以一行显示，又可以设置宽高，
- 自带 display：inline-block 属性。
- 例如：img input 等

070 元素类型互相转化

三种元素类型相互转换，是为了解决各种布局问题。
例如 img 标签和 p 标签连续两行显示时，即使初始化了内外边距都为 0，但他们仍然会有边距，这时可以把 img 设置为 block 类型。
再例如本质为多个 a 标签的导航栏，如果不改变类型的话，后面的元素就会向上与之部分重叠，我们应该把 a 标签转换为 inline-block 类型来解决这个问题。
隐藏属性 display：none；不显示，可以实现导航栏点击后对应页面显示功能。

071 二级菜单实例

效果展示

css 实现二级菜单

<html lang="zh-CN">
<head> 
    <meta charset="utf-8">
    <title>float</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            margin: 0 auto;
            font-size: 12px;
        }
        ul{
            list-style: none;
        }
        .box .item{
            float: left;
            width: 148px;
            text-align: center;
            background-color:blue;
            border: 1px solid blue;
            color: white;
        }
        .box .item:hover{
            background-color:aquamarine;
            color:black;
        }
        .item ul{
            display: none;
            background-color: lightblue;
            color: lightslategrey;
        }
        /* 注意这里是item被选中时，ul的样式，不要设置ul的hover */
        .box .item:hover ul{  
            display: block;
        }
        .box .item li:hover{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <br><br><br>
    <ul class="box">
        <li class="item">视频教程
            <ul>
                <li>全部视频教程</li>
                <li>视频教程1</li>
                <li>视频教程2</li>
                <li>视频教程3</li>
            </ul>
        </li>
        <li class="item">认证考试
            <ul>
                <li>pmp</li>
                <li>红帽</li>
            </ul>
        </li>
    </ul>
</body>
</html>

076 定位 position

position: static / absolute / relative / fixed / sticky，要配合 top、bottom、left、right 定位词使用。

077 静态定位 static 与相对定位 relative

静态定位，位置不能被改变
相对定位是相对于浏览器窗口。

078 绝对定位 absolute

父盒子定位了就参考父盒子，父盒子没定位就参考浏览器第一屏

079 固定定位 fixed

相对于浏览器的窗口

080 粘性定位 sticky

相对于浏览器窗口，要写好位置。

081 三角形案例

用 span 标签，宽高为 0，设置边框，不需要的边设置为透明，注意一下位置的变换。

083 定位里的层级 z-indx

在同一层相交部分后面盒子会覆盖前面的
z-indx: px；设置盒子的层级，数字大的在上层。

084 绝对定位的深入探索

父子关系中，对父盒子设置层级不起作用，应该给子盒子设置一个负的层级。
绝对定位会把行内元素转换成块元素，浮动也会。

085 定位里的水平垂直居中

086 定位与浮动的区别

浮动是半脱离，会出现文字环绕效果。
绝对定位是全脱离，不会出现文字环绕效果。

087 锚点

锚点作用：页面不同区域的跳转
a 链接的功能。
给 a 链接的地址写为锚点名字
例如盒子 id=”xxx"
则设置为 <a herf = "#xxx">aaa</a>，点击链接会定位到盒子。

088 精灵图

css sprites 的原理（图片整合计数）（精灵图、雪碧图）

将导航背景图片、按钮图片，有规则的合并成一张图，然后用 backgroun-position 技术实现分割，功能和 position 相同，不过这个是设置背景。
可以减少访问服务器次数

089 宽高自适应

宽度不写或者是 auto 即为自适应，自适应时，加 padding 会挤压自身宽度。
高度自适应同理，会由内容决定。
可以设置最小 / 最大宽 / 高度如：max-width，min-height

090 浮动元素 - 父元素高度自适应

默认情况下浮动元素高度为 0，称为高度塌陷
解决方法：

给浮动元素父盒子设置固定高度，不能自适应
给浮动元素最后增加一个空盒子，设置清浮动 clear：both，不利于代码可读性
溢出隐藏，overflow：hidden ，溢出内容不可见
万能清除浮动方法，给盒子添加一个伪元素清浮动，box：：after {clear：both； display：block；宽高为 0；visibility：hidden；不显示}，display：none 不占位，visibility：hidden 占位

092 窗口自适应

盒子根据窗口大小改变，通常设置 html，body{height：100%}

093 两栏布局 calc

calc 函数，算式中间要有空格
左边固定，右边自适应的布局
方法 1. 右边的设置位置或者左外边距，不设置宽度，右边的盒子设置好宽度，浮动起来
方法 2. 用 calc 函数，用来动态计算宽度，给左边的固定，右边宽度设置为 calc（100% - xxpx）

094 三栏布局 calc

方法 1. 中间盒子设置左右边距，先添加左右浮动盒子，再写中间盒子
方法 2. 同样固定左右宽度，中间宽度用 calc 函数计算。

<!--html-->
<header>header</header>
    <section></section>
    <footer>footer</footer>

/*css*/
 *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;

        }
        div{
            margin:0 auto;
        }
        header,footer{
            text-align: center;
            background-color: orange;
            line-height: 50px;
            height: 50px;
        }
        section{
            height: calc(100% - 100px);
        }

CSS3

108 css3

109 层级选择器 +、~

A+B

找到当前元素后面的亲_兄弟_

A~B

找到当前元素的所有_兄弟_

110 属性选择器 [属性]

div[class]{

};
[type= 'email']{

};

用 [属性] 表示选中设置了对应属性的元素，对于属性值可以模糊匹配

^=x：以 x 开头
$=x：以 x 结尾
*=x：包含字符 x

111 结构伪类选择器

：为伪类选择器

nth-child(n)，n 为实数选择第 n 个孩子，为 2n 或 even 选择偶数，2n+1 或 odd 选择奇数
only-child，只有一个孩子的
empty，内容为空的标签
:root，用 :root 选择根标签

112 目标伪类选择器 target

target，被锚点选中后（a 标签指定）

div:target{
            background-color: blueviolet;
        }

<a href="#hhh">选中哈哈哈</a>
<a href="#good">选中下拉表单</a>
<div id="hhh">
    哈哈哈
</div>

113 UI 状态伪类选择器

appearance：none 去掉默认样式，checkbox 受到默认样式限制，要设置时应该先去掉原样式。

enable，表单中，处于可用状态的
disable，表单中，处于禁用状态的
check，表单中，被选中的（特指单选多选框）
foucs，聚焦焦点，点击
select，被选中的

114 否定和动态伪类选择器

否定伪类选择器

E:not（伪类选择器），不包含在括号中的元素，如 div：not（：empty）

动态伪类选择器

E:link 链接伪类选择器
未被访问过的超链接
E:visit 链接伪类选择器
已经被访问过的超链接
E:active 用户行为选择器
被激活的元素，常用于链接描点和按钮上
E:hover 用户行为选择器
用户鼠标停留在元素上，IE6 及以下浏览器只支持 a：hover

115 文本阴影 text-shadow

text-shadow:-10px -10px 1px red;

第一个值：水平方向位移
第二个值：垂直方向位移
第三个值：模糊程度
第四个值：阴影颜色
一个文本的阴影支持多个，可以用逗号隔开后接属性值。

116 盒子阴影 box-shadow

box-shadow:-10px -10px（10px） 1px red (inset);

用法同文本阴影，可以增加一个阴影大小值，inset 为内阴影，默认为外阴影。

117 圆角边框 border-radius

border-radius: 10px;

border-radius，圆角边框，最多可以设置四个值，按顺序为四个角一样，两个对角线的值，左上和左下右上和右下，顺时针四个角。

和普通边框一样可以单独设置四个角，格式为 border-top-left-radius，先上下后左右，方位不能换。

border-radius: 10px/20px;

表示每个角水平方向走 10px，垂直方向上走 20px，多个方向不同设置时，必须先写完水平方向再写垂直方向

118 画圆

回顾三角形的画法，设置边框粗细为盒子的一半可以实现，同样，画圆也可以。

119 画半圆

若要固定半径的半圆，只让同一水平或垂直的两个角变化，例如水平的半圆，竖直方向为半径，水平方向为直径，那么需要设置一个宽度为高度两倍的盒子，让两个角在水平垂直方向都有直径长度的边框变化。
那么想要四分之一圆，只需要一个正方形盒子，并且只设置一个方向边框即可。

120 字体引入 @font-face

@font-face {
            font-family: cute;
            src: url(font/cute.ttf);
        }
        #showfont{
            margin: 0 auto;
            color:blueviolet;
            font-size: 100px;
            font-family: cute;
            text-shadow: 3px 3px 1px lightpink;
        }

<span id="showfont">字体展示</span>

121 怪异盒模型 box-sizing：border-box

box-sizing：content-box 标准盒模型 / border-box 怪异盒模型
怪异盒模型，加边框、内外边距后会挤压内容宽高，不会增加盒子宽高。

122 弹性盒 display：flex

给父元素设置 display：flex

子元素会默认横向排列
行内元素会变成块级元素
只有一个元素的时候，margin：auto 即可水平垂直都居中

124 弹性盒 - 修改主轴方向 flex-direction

column 垂直方向、row 水平方向、row-reverse 水平反向、column -reverse 水平反向

<style>
	.box{
	    width: 300px;
	    height: 300px;
	    background-color:bisque;
	    display: flex;
	    margin: 0 auto;
	    flex-direction: column;
	}
	.box div{
	    width: 50px;
	    height: 50px;
	    background-color:beige;
	    border: 2px solid blueviolet;
	    box-sizing:border-box;
	}

<body>
    <div class="box">
        <div>111</div>
        <div>222</div>
        <div>333</div>
    </div>444</div>

</body>

124 主轴侧轴对齐方式 justify-content 、align-items

justify-content ： flex-start 向前对齐、 flex-end 向后对齐、 center 居中对齐、 space-between 两端对齐、 space-around 距离环绕
align-items 取值：flex-start 向前对齐、 flex-end 向后对齐、 center 居中对齐
需要注意的是，改变主轴时，取值会对应交换

125 折行与行间距 flex-wrap

flex-wrap: wrap;
默认折行会按照现有行数等间距折行
align-content：certen；
控折行的行间距
flex-start、 flex-end、 center、 space-between、 space-around

126 项目 - 对齐方式

项目是相对于外层大盒子而言的，内部的每个小盒子称为一个项目。
align-self：flex-start、 flex-end、 center、 space-between、 space-around、stretch（拉升铺满，不设置高度也可以达到这种效果）
这个对齐方式是相对于自身位置而言，不是对全局

126 项目 - 调整顺序 order

order 默认为 0，值越大越靠后

127 项目 - 剩余宽高 flex

flex：1；针对主轴而言。
占剩余空间，当有多个 flex 争同一空间时，按 flex 的总和占比算。

128 引入阿里字体图标库

图标样的字体，可以设置大小颜色，不会失真。

下载解压图标项目，放到 web 项目文件目录，运行其中的 html 文件，会打开官方说明网页
有三种方式使用这些图标，通常选 font-class 引用方式
第一步，引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步，挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

“iconfont” 是你项目引入的 css 下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

示例

<!--html-->
<link rel="stylesheet" href="font_icon/iconfont.css">
<span class="iconfont icon-save one"></span>
<span class="iconfont icon-save two"></span>

span.icon-save.two{
          font-size: 50px;
          color: blueviolet;
}

注意这里路径一定不能写错，对图标设置样式要注意优先级，原来的样式是类选择符，优先级较高，在修改必须加强优先级，比如可以 span + 第二个类名，或者！import

132 移动端布局

模拟器上显示分辨率

css 像素：设备的独立像素，也就是模拟器上的像素
物理分辨率：设备的自身像素，是设备出厂设置，不同型号是不同的
设备像素比 dpr = 物理像素 / css 像素，由于不同手机分辨率不一样，所有有这样的像素缩放。
设计稿：提供的是物理像素，这是为了清晰的页面，设计稿的大小要根据具体机型调整大小，这样就要熟练使用百分比、弹性盒、rem 布局。
<meta name = "viewport" content ="width=device-width,initial-scale=1.0">，意思是宽度等于设备宽度，不缩放，这样可以针对移动设备做网页。

133

<meta name = "viewport" content ="width=device-width,initial-scale=1.0">

布局视口：指网页宽度，一般移动端浏览器都默认了布局视口的宽度，根据设备不同，布局视口的默认宽度有可能是 780px、980px、1024px 等；
视觉视口：指用户真正看到的网站的宽度，这个宽度等同于设备设置的浏览器窗口的宽度；
理想窗口：指对设备来讲最理想的视口尺寸，采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读宽度
这个 meta 标签的含义：视口，理想视口的宽度等于设备宽度，缩放比为 1 也就是不缩放，最后还可以加一个user-scalable=no，表示不允许用户捏放放大缩小。

135 足球圈移动端布局第 1 版

足球圈案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta >
    <link rel="stylesheet" href="font_icon/iconfont.css">
    <title>足球圈</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;
        }
        html,body{
            height:100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        /* header部分布局 */
        header{
            height: 55px;
            background-color: #0cc440;
            display: flex;
            /* 主轴侧轴都居中 */
            justify-content: center;   
            align-items: center;
        }
        header div{
            width:70px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 16px;
            color: white;
        }
        header div:nth-child(1){
            border-radius: 17px 0 0 17px;
            background: #3dd066;
            opacity: 0.7;
        }
        header div:nth-child(2){
            border-radius: 0 17px 17px 0;
            background: #3dd066;
            opacity: 0.7;
        }
        header div:hover{
            opacity: 0.9;
        }

        /* section部分布局 */
        section{
            flex: 1;
            /* section内容会很多，有设置了flex：1，所以要设置溢出情况，这里设置为溢出滚动 */
            overflow: auto;
        }
        section ul{
            display: flex;
            position:sticky;
            background-color: white;
            top: 0px;
        }
        section ul li{
            flex:1;
            text-align: center;
            height: 35px;
            line-height: 35px;
            font-size: 16px;
            border-bottom: 1px solid #d9d9d9;
        }
        section ul li:hover{
            border-bottom: 2px solid #0cc440;
            color: #0cc440;
        }
        section .list{
            display: flex;
            /* list内部会有多个div，让他们自动折行显示，再配合一个盒子款49%，这样一行就只有两个盒子了 */
            flex-wrap: wrap;
            /* 主轴方向两端对齐，一行中的两个盒子中间就自然多出来缝隙了 */
            justify-content: space-between;
        }
        section .list div{
            width: 49%;
            margin-top: 4px;
            border: 1px solid grays;

        }
        section .list div img{
            width:100%;

        }
        section .list div p{
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            text-align: center;
        }
        /* footer部分布局 */
        footer{
            height: 55px;
            background-color: white;
            color: #d5d5d7;
            border-top: 1px solid gray;
        }
        footer ul{
            display: flex;
            /* 要调整父盒子，有一个确定的高度，内部元素的布局才可以有一个参考 */
            height: 100%;
        }
        footer ul li{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        /* 注意是鼠标移动到li上 */
        footer ul li:hover{
            color:#0cc440;
        }
        footer ul li i{
            height: 21px;
            line-height: 21px;
            text-align: center;
            /* 对icon图标样式的修改要注意优先级 */
            font-size: 24px !important;

        }
        footer ul li span{
            height: 17px;
            line-height: 17px;
            text-align: center;
            font-size: 15px;
        }
        /* 下面对中间那个特殊图标布局，首先要让它的父盒子相对定位，子盒子绝对定位才能突破flex的束缚 */
        footer ul li:nth-child(3){
            position: relative;
        }
        footer ul li:nth-child(3) i{
            position: absolute;
            width: 70px;
            height: 70px;
            border: 1px solid gray;
            background-color: white;
            border-radius: 50%;
            margin: 50%;
            left: -30px;
            top: -56px;
            font-size: 50px !important;
            text-align: center;
            line-height: 70px;
        }
        footer ul li:nth-child(3):hover i{
            color: orange;
            border-color: orange;
        }


    </style>
</head>
<body>
    <header>
        <div>热点</div>
        <div>关注</div>
    </header>
    <section>
        <ul>
            <li>足球现场</li>
            <li>足球生活</li>
            <li>足球周边</li>
        </ul>
        <!-- 图片盒子模块用弹性盒布局，不写具体宽度，而是用百分比，
            一行两个盒子，每个盒子占49%，让它们两端对齐，中间就会自然的多出来一条缝隙
            这样布局有利于不同设备间的转换和缩放 -->
        <div class="list">
            <div>
                <img src="刘亦菲.jpg">
                <p>刘亦菲</p>
            </div>
            <div>
                <img src="刘亦菲.jpg">
                <p>刘亦菲</p>
            </div>
            <div>
                <img src="刘亦菲.jpg">
                <p>刘亦菲</p>
            </div>
            <div>
                <img src="刘亦菲.jpg">
                <p>刘亦菲</p>
            </div>
            <div>
                <img src="刘亦菲.jpg">
                <p>刘亦菲</p>
            </div>
            <div>
                <img src="刘亦菲.jpg">
                <p>刘亦菲</p>
            </div>
            <div>
                <img src="刘亦菲.jpg">
                <p>刘亦菲</p>
            </div>
            <div>
                <img src="刘亦菲.jpg">
                <p>刘亦菲</p>
            </div>
        </div>
    </section>
    <footer>
        <ul>
            <li>
                <i class="iconfont icon-fabulous"></i>
                <span>首页</span>
            </li>
            <li>
                <i class="iconfont icon-fabulous"></i>
                <span>首页</span>
            </li>
            <li>
                <i class="iconfont icon-fabulous"></i>
            </li>
            <li>
                <i class="iconfont icon-fabulous"></i>
                <span>首页</span>
            </li>
            <li>
                <i class="iconfont icon-fabulous"></i>
                <span>首页</span>
            </li>
        </ul>
    </footer>
</body>
</html>

138 京东分类页案例

这个案例主要学习滑动窗口布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>京东分类页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;
        }
        html,body{
            height:100%;
        }
        body{
            display: flex;
            /* 注意要把body设置为弹性盒，后面section盒子的布局要设置flex：1 */
            flex-direction: column;
        }
        header{
            height: 100px;
            background-color: gray;
        }
        /* 横向滚动 
           当盒子内容太多，又想横向布局时，如果仅仅设置了flex和overflow，
           盒子的内容仍然会因为盒子放不下而产生挤压，这时要强制性的设置挤压强度为0，flex-shrink: 0; */
        header ul{
            display: flex;
            overflow: auto;
        }
        header ul li{
            line-height: 100px;
            padding: 0 20px;
            font-size: 40px;
            flex-shrink: 0;
            background-color: lightblue;
            color: #f8f8f8;
        }
        header ul li:hover{
            color: red;
            background-color: #f8f8f8;
        }
        section{
            flex: 1;
            display: flex;
            /* 同上个案例的布局情况，处理section内容超出的情况 */
            overflow: auto; 
        }

        section ul{
            width: 200px;
            /* 这里是为了让左右两个框分离开，左边的框内容超出的话，设置了overfolw，就不会让 右边的也随之滑动 */
            overflow: auto;

        }

        /* 滚动条自定义，这里让滚动条不显示 */
        ::-webkit-scrollbar{
            display: none;
        }

        section ul li{
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            background-color: #f8f8f8;
        }

        section ul li:hover{
            background-color: white;
            color: red;
        }

        section div{
            flex:1;
        }
        section .content{
            display: flex;
            flex-wrap: wrap;
            /* 调整折行后的行间距,这里让它在侧轴最上边显示
               如果内容超出了父盒子宽高，自然的就没有行间距，
               但是内容少的时候，行间距会非常大 */
            align-content: flex-start;
            /* 这里也要单独做溢出控制 */
            overflow: auto;
        }

        section .content div{
            height: 300px;
            width: 33.33%;
            text-align: center;
        }
        section .content div:hover{
            background-color: aliceblue;
            color: blueviolet;
        }
        section .content div img{
            width:200px;
            height:200px;
            margin-top: 20px;
        }
        section .content div p{
            font-size: 30px;
        }

        footer{
            height: 100px;
            background-color: gray;
        }


    </style>
</head>
<body>
    <header>
        <ul>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
        </ul>
    </header>
    <section>
        <ul>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
        </ul>
        <div class="content">
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
            <div>
                <img src="春节-花.png">
                <p>电脑</p>
            </div>
        </div>
    </section>
    <footer>

    </footer>
</body>
</html>

141 多列布局

column-count：5；实现多列布局，后面用数字表示几列显示
column-gap：30px；调整列间距
column-rule：2px；设置列边框
column-fill：balance；列高度统一设置，balance 是表示先把高度占满，再换列，可能达不到设置的列数
column-width：500px；设置列宽，也会和列数冲突
column-span：none/all 横跨显示，给列布局内部的盒子设置，让它能够横跨几个列显示，只有 none 和 all 两个值，如果跨列，它就不会在列布局中显示，有点像在报纸上看到的多列文章的大标题

div{
		margin: 50px 15px;
   	 	background-color: pink;
  	  	column-count: 2;
   	 	column-gap: 20px;
    	column-rule: 2px solid lightblue;
}
h1{
     	column-span: all;
     	text-align: center;
 }

142 多列布局案例

特别注意：这里的布局是让最外层的 box 多列布局，当一列的位置不够全部展示一个内部 div 盒子时，内部 div 的部分内容可能会被分离到两个列，这时需要给 box 内部的 div 设置不可折行 break-inside: avoid;

<!-- html -->
 <div class="box">
    <div>
        <img src="../多列布局的图片/1.jpg">
        <p>一张图片</p>
    </div>
    <!-- 省略了其他div，完全一样 -->    
</div>

/* css */
.box{
    column-count: 3;
}
.box img{
    width:100%;
}
.box div{
    border: 3px solid greenyellow;
    padding: 5px;
    margin-bottom: 10px;

    /* 这里的布局是让最外层的box多列布局，
       当一列的位置不够全部展示一个div盒子时，div的部分内容可能会被分离到两个列，
       这时需要给box内部的div设置不可折行 */
    break-inside: avoid;
}

禁止打断前

禁止打断后

143 响应式布局

常见的布局方案

固定布局：以像素为页面的基本单位，不管设备及浏览器尺寸，只设计一套尺寸；
可切换固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别设备屏幕尺寸和浏览器宽度，选择最合适的那套宽度；
弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；
混合布局：混合使用像素和百分比两种单位作为页面单位；
响应布局：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式——pc 优先（从 pc 段开始向下设计）、移动优先（从移动端开始向上设计）；无论是哪种设计模式，都要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化 （发生布局改变的临界点称之为断点）

响应式布局

模块中的内容：挤压 - 拉伸（布局不变）
模块中的内容：换行 - 平铺（布局不变）
模块中的内容：增加 - 删减（布局不变）
模块位置变换（布局改变）
模块展示方式的改变：隐藏 - 展开（布局改变）

响应式布局的特点

设计特点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏的无用元素，加载时间长
折中性质的方案，多方面因素影响达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

媒体查询

媒体查询的含义
媒体查询可以让我们根据设备显示器的特性为其设定 css 样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有：width、height、color 等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果
媒体查询操作方式
实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的 css 被应用，如果表达式结果为假，媒体查询中的 css 将被忽略
媒体查询结构
这段代码的意思是查询设备宽度，最小是 320px，即大于等于 320px 宽度都执行媒体查询中的 css，将 body 背景宽度设置为蓝色
注意，and 和媒体特性的圆括号中间要有空格

@media screen and (min-width:1000px){
	        body{
	    	    background-color:lightblue;
            }
    }

设备类型（默认为 all）

media_type	设备类型说明
all	所有设备
aural	听觉设备
barille	点字触觉设备
handled	便携设备，如手机、平板电脑
print	打印预览图等
projection	投影设备
screen	显示器、笔记本、移动端等设备
tty	如打字机或终端设备
tv	电视机等设备类型
embossed	盲文打字机

screen 是媒体类型里的一种，CSS2.1 定义了 10 种媒体类型
and 被称为关键字，其他关键字还包括 not（排除某种设备）、only（仅限某种设备）
(min-width:320px) 就是媒体特性，被放在一对圆括号中
(orientation：portrait / landscape) 竖屏 / 横屏检测

144 响应式布局案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>web001</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;
        }
        html,body{
            height:100%;
        }
        .box{
            margin: 50px auto;
            background-color: lightblue;
            display: flex;
            flex-wrap: wrap;
        }
        .box .left,.right{
            width: 49.5%;
            display: flex;
        }
        .box img{
            flex:1;
        }
        @media screen and (max-width: 2000px) {
            .box .left,.right{
            width: 100%;
            object-fit: cover;
        }
        }
        .bottom{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .bottom div{
            width: 23%;
            padding: 5px;
            box-sizing: border-box;
            border: 1px solid gray;

            margin-bottom: 10px;
            box-shadow: 0 0 5px black;
        }
        .bottom div img{
            width: 100%;
        }
        .bottom div p{
            text-align: center;
            font-size: 40px;
        }

        @media screen and (max-width: 1024px) and (min-width:768px) {
            .bottom div{
                width: 31%;
                object-fit: cover;
            }
        }
        @media screen and (max-width: 768px) and (min-width:450px) {
            .bottom div{
                width: 48%;
                object-fit: cover;
            }
        }

        @media screen and (max-width: 450px) {
                .bottom div{
                width: 90%;
                object-fit: cover;
            }
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <img src="../img/响应式布局3.jpg" >
            <img src="../img/响应式布局3.jpg" >
            <img src="../img/响应式布局3.jpg" >
        </div>
        <div class="right">
            <img src="../img/响应式布局1.jpg" >
            <img src="../img/响应式布局2.jpg" >
            <img src="../img/响应式布局1.jpg" >
            <img src="../img/响应式布局2.jpg" >
        </div>
    </div>
    <div class="bottom">
        <div>
            <img src="../img/刘亦菲.jpg">
            <p>刘亦菲</p>
        </div>
        <div>
            <img src="../img/刘亦菲.jpg">
            <p>刘亦菲</p>
        </div>
        <div>
            <img src="../img/刘亦菲.jpg">
            <p>刘亦菲</p>
        </div>
        <div>
            <img src="../img/刘亦菲.jpg">
            <p>刘亦菲</p>
        </div>
    </div>
</body>
</html>

146 em 与 rem

px：像素大小
em：相对单位，相对于父元素字体大小
rem：相对于根元素 (html) 字体大小
一般情况下布局都使用 em，因为相对于父元素来说，多层 em 的转换太复杂；使用 rem 就是直接相对于根元素的转换，更简单。

147 rem 布局准备工作

代码含义为 根据设备型号设置根元素 px：具体转换的时候还需要确定参考的设备型号，根据实际设备型号、参考设备型号、设备像素比来设计代码根元素 px 的计算。
公式：实际设备像素 / 参考设备像素 * 根元素参考基准，就是我们的参考型号一个 rem 为一个基准，要计算实际型号为多少个参考 rem
给 vs 安装插件：px to rem & rpx(cssrem)，默认设置为 16px，可以单独设置，安装插件后可以写 px 快捷转换为 rem，要根据自己写的计算公式设置。
这种会根据设备变化而保持比例缩放的布局称为等比例布局

<script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth/375*100+'px';
</script>

148 足球圈 rem 布局

149 vw 和 vh

vh：view height 视口高度百分占比，100 表示整个视口
vw：view width 视口宽度百分占比，100 表示整个视口
这种写法不需要 js，会按照屏幕变化自动计算，写代码时随便找一个机型计算比例就行。

150 单位转换

100% 和 100vw 的区别：100vw 是整个窗口，而 100% 是剩余空间的 100%，比如有滚动条，100vw 包含滚动条，100% 不包含滚动条，是去掉滚动条以后的剩余空间。

151 渐变

一、css3 渐变

1. 线性渐变 linear-gradient

一种颜色向另一种颜色过渡 linear
background：linear-gradient(渐变方向，颜色开始位置百分比，，颜色开始位置百分比）background:linear-gradient(0deg,red,green)

支持多种颜色
支持方向
支持任意方向 45deg （0~360）

2. 径向渐变 radial-gradient

一个点向四周颜色渐变 radial
background：radial-gradient（颜色开始位置百分比，颜色开始位置百分比）

3. 重复渐变 repeating

repeating-linear-gradient：重复性线性渐变
repeating-radial-gradient：重复性径向渐变

155 动画过渡属性 transition

css3 复合属性，

transition：属性过渡持续时间过渡类型过渡延迟时间——复合型写法，观察属性只能写一个或者 all
transition-property/ duration/ timing-function/ delay，单一写法，对应上面的四种定义，此时观察属性可以写多个
transition 会观查所写的属性，当发生变化时，按照后面设置的时间来缓慢变化。写 all 可以观察盒子的所有属性。
想要实现下拉菜单的缓慢出现，可以先给下拉菜单设置高度为 0，溢出隐藏，点击后重新设置高度就可以展示菜单，这时设置高度过渡属性就可以实现动画效果。
过渡类型有：linear 匀速、ease 减速等，可以到贝塞尔曲线官网自定义设置

158 2d - 平移 transform：translate

transform：translateX/Y（···px)，在 x 轴方向上或 y 轴方向上走 ···px，正值对应右和下，也可以写成 translate（··px，··px）
translate 和定位做的动画的区别：定位会导致回流重排，而 translate 和 opacity 不会，这两种动画是创造一个独立图层，这种渲染更高效。

159 2d - 缩放 transform：scale

transform：scale（放大倍数），小数就是缩小，这种放大是从中心放大的，也支持只放大 x 或 y 轴，scaleX，scaleY
对图片，我们可以改变它的中心点，达到不同效果，transform-origin：方位词；

160 2d - 旋转 transform：rotate

transform：rotate（旋转角度 deg），正值顺时针，负值逆时针，默认是绕着中心点旋转，中心同样可以改变的
若对它在 X 轴和 Y 轴 Z 轴旋转，会出现 3d 的效果

旋转太极图示例

旋转太极图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>web001</title>
    <style>
        body{
            background-color: lightblue;
        }
        div{
            width:200px;
            height:200px;
            background: linear-gradient(white 50%,black 50%);
            margin:10px auto;
            display: flex;
            align-items: center;
            border-radius: 50%;
            transition: all 3s;
        }
        div::before{
            content:"";
            display: block;
            width:100px;
            height:100px;
            border-radius: 50%;
            background:radial-gradient(white 25%,black 25%)
        }
        div::after{
            content:"";
            display: block;
            width:100px;
            height:100px;
            border-radius: 50%;
            background:radial-gradient(black 25%,white 25%)
        }
        div:hover{
            transform: rotate(1800deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

散开的纸牌

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>web001</title>
    <style>
        ul{
            list-style: none;
            width: 600px;
            height: 400px;
            margin: 30px auto;
            border: 5px solid gray;
            position: relative;
        }
        ul li{
            width: 60px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin: -30px;
            bottom: 80px;
            text-align: center;
            transform-origin: bottom center; /*设置中心点*/
            border-radius: 10px;
            transition: all 2s;
            box-shadow: 1px 2px gray;
        }
        ul li:nth-child(1),ul li:nth-child(13){
            background-color: blueviolet;
        }
        ul li:nth-child(2),ul li:nth-child(12){
            background-color: green;
        }
        ul li:nth-child(3),ul li:nth-child(11){
            background-color: blue;
        }
        ul li:nth-child(4),ul li:nth-child(10){
            background-color: pink;
        }
        ul li:nth-child(5),ul li:nth-child(9){
            background-color: greenyellow;
        }
        ul li:nth-child(6),ul li:nth-child(8){
            background-color: lightsalmon;
        }
        ul li:nth-child(7){
            background-color: red;
        }
         /* 让一开始只显示7，其他设置为透明 */
         ul li:not(:nth-child(7)){ 
            opacity:0;
        }
        /* 点击后全部显示 */
        ul:hover li{
            opacity:1;
        }
        ul:hover li:nth-child(1){
            transform:rotate(90deg)
        }
        ul:hover li:nth-child(13){
            transform:rotate(-90deg)
        }
        ul:hover li:nth-child(2){
            transform:rotate(75deg)
        }
        ul:hover li:nth-child(12){
            transform:rotate(-75deg)
        }
        ul:hover li:nth-child(3){
            transform:rotate(60deg)
        }
        ul:hover li:nth-child(11){
            transform:rotate(-60deg)
        }
        ul:hover li:nth-child(4){
            transform:rotate(45deg)
        }
        ul:hover li:nth-child(10){
            transform:rotate(-45deg)
        }
        ul:hover li:nth-child(5){
            transform:rotate(30deg)
        }
        ul:hover li:nth-child(9){
            transform:rotate(-30deg)
        }
        ul:hover li:nth-child(6){
            transform:rotate(15deg)
        }
        ul:hover li:nth-child(8){
            transform:rotate(-15deg)
        }
        ul:hover li:nth-child(7){
            transform:rotate(0deg)
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
</body>
</html>

162 2d - 多属性值

需要多种效果一起时，写成多值，否则后面的会覆盖前面的，但是，要注意顺序，旋转、缩放会对后面的效果有影响。

163 2d - 倾斜 skew

transform：skew(x deg,y deg) / skewX(x deg) / skewY(y deg)
内部为相对于 x 轴和 y 轴的倾斜角度

164 明星资料卡案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>web001</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
        }
        .box{
            margin:50px auto;
            width:350px;
            border: 5px solid lightgray;
            position: relative;
            overflow: hidden;
        }
        .box img{
            width:100%;
            transition: all 1s;
        }
        .box:hover img{
            /* transform: translate(50px); */
            opacity: 0.6;
        }
        .box h2{
            position: absolute;
            left:80px;
            top:30px;
            color: white;
            transition: all 1s;
            transform: translate(-20px);
        }
        .box:hover h2{
            transform: translate(0px);
        }
        .box p{
            position: absolute;
            left:80px;
            width:100px;
            color: gray;
            background-color:white;
            transition: all 1s;
            opacity: 0.9;
            border-radius: 6px;
            border-color: white;
            text-indent: 3px;
        }
        .box:hover .p1{
            transform: translate(0px);
        }
        .box:hover .p2{
            transform: translate(0px);
        }
        .box:hover .p3{
            transform: translate(0px);
        }
        .box .p1{
            top:150px;
            transform: translate(-200px);
        }
        .box .p2{
            top:200px;
            transform: translate(0,200px);
        }
        .box .p3{
            top:250px;
            transform: translate(400px);
        }
       .box .music{
            width:40px;
            height: 40px;
            position: absolute;
            top:10px;
            right:10px;
            transition: all 10s;
        }
        .box:hover .music{
            transform: rotate(1800deg);
        }

    </style>
</head>
<body>
    <div class="box">
    <img src="刘亦菲.jpg">
    <div>
    <h2>刘亦菲</h2>
    <p class="p1">111</p>
    <p class="p2">222</p>
    <p class="p3">333</p>
    </div>
    <img class="music" src="音乐.jpg">
</div>

</body>
</html>

165 关键帧动画 - 属性 animation、 @keyframes

前面的明星资料卡案例，右上角的音乐图标不能一直旋转，这一节就是实现始终旋转这种动画类型。
我们先要声明一个动画函数，然后在 css 中调用它，声明 @keyframes 动画名；调用animation：动画名时间过渡类型(速度) 延迟时间次数；
infinite：无数次

方法 1，from to

/* 声明动画 */
@keyframes identifer {
	from{
	heigth:1px;
	}
	to{
	heigth:2px;
	}
}

方法二，百分比，多种状态切换

/* 声明动画 */
@keyframes identifer {
	10%{
	heigth:1px;
	}
	50%{
	heigth:2px;
	}
	100%{
	heigth:10px;
	}
}

明星资料卡音乐图标改造

.box .music{
	 width:40px;
     height: 40px;
     position: absolute;
     top:10px;
     right:10px;
     transition: all 10s;
     animation: xuanzhuan 2s linear infinite;
 }
 .box:hover .music{
     transform: rotate(360);
 }
 @keyframes xuanzhuan {
     from{
         transform: rotate(0deg);
     }
     to{
         transform: rotate(360deg);
     }
     
 }

167 关键帧动画 - 单一属性

拆分 animation 为：
animation - 动画名、animation - 时间、animation- 过渡类型 (速度) 、animation- 延迟时间、animation- 次数，
还有 animation - 方向、animation - 运行状态。

168 关键帧动画 - 逐帧动画 steps

animation： run 5s steps（1，end）
steps 逐帧，1 表示转换每一个帧要经过几步，end/start ，end 表示保留当前帧（看不到最后一帧），start 保留下一帧（看不到第一帧）

169 Animation 动画库

官网地址：http://www.animate.net.cn/

170 3d 图形

要实现 3d 图形首先要给模型设置属性 transform-style: preserve-3d;

171 3d - 平移 transform：translateZ

3d 图有 Z 轴，就是视线和屏幕的这个方向，transform: translateZ(100px);

景深 perspective

屏幕中物体的视线深度，默认为足够远，所以如果没有设置，3d 效果近大远小就看不出来。
通常把需要 3d 呈现的盒子的父盒子的景深设为 perspective：几百 px；
transform3d（x, y, z)，或者 transformZ

172 3d - 旋转

和 2d 类似，设置 transform: rotateX/Y/Z( deg );

173 3d - 立方体

在这里插入代码片<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>web001</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            margin: 50px auto;
            border: 5px solid gray;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(45) rotateY(45);
            animation: run 5s linear infinite;
        }
        .box div{
            height: 200px;
            width: 200px;
            background-color:blueviolet;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: white;
            opacity: 0.9;
        }
        .box div:nth-child(1){
            background-color:blueviolet;
            transform: translateZ(100px);
        }
        .box div:nth-child(2){
            background-color:blue;
            transform: translateY(100px) rotateX(-90deg);
        }
        .box div:nth-child(3){
            background-color:red;
            transform: translateX(100px) rotateY(90deg);
        }
        .box div:nth-child(4){
            background-color:green;
            transform: translateX(-100px) rotateY(-90deg);
        }
        .box div:nth-child(5){
            background-color:greenyellow;
            transform: translateY(-100px) rotateX(90deg);
        }
        .box div:nth-child(6){
            background-color:pink;
            transform: translateZ(-100px);
        }
        @keyframes run {
            0%{
                transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
            }
            50%{
                transform: rotateX(150deg) rotateY(180deg) rotateZ(180deg);
            }
            100%{
                transform: rotateX(220deg) rotateY(250deg) rotateZ(230deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    

</body>
</html>

175 网格布局 display：grid

概念

含义：它将网页划分为一个个网格，可以任意组合不同网格，做出各种各样的布局
与 flex 布局的区别：grid 布局与 flex 布局有一定的相似性，都可以指定容器内多个项目的位置，但是，
flex 布局是轴线布局，只能制定元素针对轴线的位置，可以看作一维布局
grid 布局则是将容器划分成行和列，产生单元格，然后指定元素所在单元格，可以看作是二维布局

网格线

单元格的表示是用起始行列，一个表格，把网格线交叉点标上号，行和列都是从 1 开始，左上第一个点即为（1，1），行（1，3），列（1，3）即可表示左上角四个格子。

网格布局中的属性

触发网格布局 grid
网格布局同样分容器属性和项目属性，给容器也即是父盒子添加display: grid;或者是inline-grid，表示块级网格和行内块级网格
行列划分 grid-template-rows
规定行属性：grid-template-rows: 50px 50px 50px;
规定列属性：grid-template-columns: 33.33% 33.33% 33.33%;
后面的取值数量代表是多少行，多少列，取值表示每个格子的宽高，支持百分比

176 布局方式

固定值

grid-template-rows: 200px 200px 200px  ;
       grid-template-columns: 200px 200px 200px ;

百分比

grid-template-rows: 33.33% 33.33% 33.33%;
      grid-template-columns: 33.33% 33.33% 33.33%;

repeat

grid-template-rows: repeat(4,25%);
      grid-template-columns: repeat(4,25%);

repeat autofill

grid-template-rows: repeat(auto-fill,20%);
      grid-template-columns: repeat(auto-fill,20%);

fr 片段

grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 2fr;

auto

grid-template-rows: 200px 200px auto;
      grid-template-columns: 100px 100px auto;

177 网格布局 - 间距 grid-gap

grid-row-gap设置行间距、grid-row-gap设置列间距、grid-row-gap行列复合写法
注意，新版本已经省略前缀 grid-

grid-row-gap: 20px;
grid-row-gap: 20px;
grid-row-gap: 20px 20px;
/* 新版本写法 */
row-gap: 30px;
column-gap: 20px;
gap: 20px 20px;

178 网格布局 - 区域合并于名合并 grid-template-areas

先用grid-template-areas给父盒子设置区域名称，然后用grid-area单独给子盒子指定名称，注意格式。

div{
	grid-template-areas: 'a a c'
	                     'd e f'
	                     'g h i';
}
div span:nth-child(1){
     grid-area: a;
}

179 网格布局 - 案例 1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>网格布局案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;
        }
        html,body{
            height:100%;
        }
        .box{
            width: 650px;
            height: 320px;
            border:2px solid gray;
            margin: 50px auto;

            display: grid;
            grid-template-columns: repeat(6,100px);
            grid-template-rows: repeat(3,100px);
            /* grid-template-areas: 'a a a a e e'
                                 'a a a a f f'
                                 'b b c d f f'; */
            grid-gap: 10px 10px;
        }
        .box .imga{
            /* grid-area: a; */
            grid-row: 1/3;
            grid-column: 1/5;
            width: 100%;
            height: 100%;
        }
        .box .imgb{
            /* grid-area: b; */
            grid-row: 3/4;
            grid-column: 1/3;
            width: 100%;
            height: 100%;
        }
        .box .imgc{
            /* grid-area: c; */
            grid-row: 3/4;
            grid-column: 3/4;
            width: 100%;
            height: 100%;
        }
        .box .imgd{
            /* grid-area: d; */
            grid-row: 3/4;
            grid-column: 4/5;
            width: 100%;
            height: 100%;
        }
        .box .imge{
            /* grid-area: e; */
            grid-row: 1/2;
            grid-column: 5/7;
            width: 100%;
            height: 100%;
        }
        .box .imgf{
            /* grid-area: f; */
            grid-row: 2/4;
            grid-column: 5/7;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <img class="imga" src="../img/响应式布局2.jpg">
        <img class="imge" src="../img/响应式布局3.jpg">
        <img class="imgf" src="../img/16号女生.png">
        <img class="imgc" src="../img/刘亦菲.jpg">
        <img class="imgd" src="../img/春节-花.png">
        <img class="imgb" src="../img/响应式布局1.jpg">
    </div>
</body>
</html>

180 网格布局 - 对齐方式

项目排列顺序
grid-auto-flow: column | row;
用来指定网格（大盒子）内部的项目（元素）的放置顺序，，是先排行还是先排列
单元格项目对齐（重点：复合属性）
用来指定每个单元格相对于父盒子的对齐方式
主轴：justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
侧轴：align-content: start | end | center | stretch | space-around | space-between | space-evenly;
复合式写法：place-content: <justify-content> <align-content>;

start：对齐容器的起始边框
end：对齐容器的结束边框
center：容器内部居中
stretch：项目大小没有指定时，拉伸占据整个网格容器
space-around：每个项目两侧的间隔相等，项目之间的间隔是项目与容器边框间隔的两倍
space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly：项目与项目间隔相等，项目与容器边框也是同样长度的间隔
- 单元格内容对齐（重点：复合属性）
  用来指定灭个单元格中的内容相对于单元格的对齐方式
  主轴：justify-items: start | end | center | stretch;
  侧轴：align-items: start | end | center | stretch;
  复合式写法：place-items: <justify-content> <align-content>;
  
  start：对齐单元格的起始边缘
  end：对齐单元格的结束边缘
  center：单元格内部居中
  stretch：拉伸，占满单元格宽度（默认