第四次学习 CSS深入运用
Emmet写法
代码的简写方式，输入缩写VsCode会自动生成对应的代码
1. html
2. CSS
大多数属性简写方式都是属性单词的首字母
##背景属性-拆分和复合写法
背景属性
1. 背景图
代码：background-image（Emmet：bgi）：url（图片地址）；默认为平铺效果
2. 背景图平铺方式
代码：background-repeat（bgr）：no-repeat、repeat（默认平铺）、repeat-x（水平平铺）、repeat-y（垂直平铺）
3. 背景图位置
代码：background-position（bgp）：常见方向英文单词/坐标（正负数字+px）
提示：关键字可以颠倒取值顺序，可以只写一个关键字，另一个方向为居中，数字只写一个表示水平方向，竖直方向为居中
4. 背景图缩放
代码：background-size（bgz）：cover（完全覆盖）/contair（完全装入背景区）/百分比/数字+单位
5. 背景图固定（了解）
代码：background-attachment（bga）：fixed（背景图不会随着元素内容滚动）
6. 背景复合属性
显示模式
定义：标签（元素）的显示方式
作用：布局网页根据标签的显示模式选择合适的摆放内容
1. 块级元素
特点：①独占一行 ②宽度是父级的100% ③添加宽高属性生效
例子：<div>标签
2. 行内元素
特点：①一行共存多个 ②默认尺寸由内容撑开尺寸 ③添加宽高属性不生效
例子：<span>标签
3. 行内块元素
特点：①一行共存多个 ②默认尺寸由内容撑开尺寸 ③添加宽高属性生效
例子：<img>标签
转换显示模式：
代码：
display：block（块级）、inline-block（行内块）、*inline（行内）*
结构伪类选择器
作用：根据元素的结构关系查找元素
写法：：nth-child（公式）
作用：根据元素的结构关系查找多个元素
偶数2n 奇数2n+1 5的倍数5n
伪元素选择器
作用：创建虚拟元素，用来摆放装饰性的内容，例如：
E：：before（在E元素里面最前面加一个伪元素）
E：：after（在E元素里面最后面加一个伪元）
必须设置content属性否则伪元素选择器失效
Pxcook软件（了解）
是一款切图设计工具软件，支持PSD文件的文字、颜色、距离自动智能识别
盒子模型概念
作用：布局网页，摆放盒子和内容
1.组成部分：
注意：padding会时盒子里面的内容撑大盒子尺寸
2.边框线
属性名border
属性值：边框线粗细、线条样式（solid、dashed、dotted）、颜色
注意：单方向边框线使用border-方位名词（top、right、left、bottom）
3.内边距
属性名：padding/padding-方位名词
padding多值写法：（顺时针）
4.尺寸计算
盒子尺寸=内容尺寸+border尺寸+内边距尺寸，例如：
问题：给盒子加border/padding会撑大盒子
解决办法：①手动计算减法②内减模式：box-sizing：border-box
4. 外间距实现版心居中
属性名：margin 属性值与padding写法、含义相同
版心居中：margin：0 auto 0；（左右auto）
注意：盒子要有宽度才能使版心居中
清除默认样式
清楚标签默认的样式，比如默认的内外边距
1.去除内外边距
方法一：通配符选择器 方法二：并集选择器
2.清除列表项目符号
li-style：none；
元素溢出
作用：控制溢出元素内容的显示方式
属性名：overflow
属性值：
外边距特殊现象
1.合并现象
场景：垂直排列的兄弟元素，上下margin会合并（取两个margin中较大值生效）
2. 塌陷现象
场景：父子级的标签，子级添加margin-top上外边距会产生塌陷问题，导致父级一起向下移动
解决办法：①取消子级margin，设置父级padding
②父级设置overflow：hidden ③父级设置border-top
行内元素-内外边距问题
场景：行内元素添加margin和padding，无法改变元素垂直位置
解决办法：给行内元素添加line-height可以改变垂直位置
圆角与盒子阴影
1.圆角
作用：设置外边框为圆角
border-radius：数字px/百分比（圆角半径，超过50%没有效果）
常见形状：①正圆：圆角属性值为宽高的一半/50%②胶囊形状：圆角属性值为盒子高度的一半
2.阴影（拓展）
代码：box-shadow：x偏移 y偏移 模糊半径 扩散半径 颜色 内外阴影
注意：x偏移和y偏移必须书写，默认是外阴影，内阴影需要添加inset
标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如块元素独占一行
浮动
1.基本使用和布局
作用：让块元素水平排列
属性名：float 属性值：left（左对齐）、right（右对齐）
浮动后特点：顶对齐且具备行内块显示模式特点；浮动后的盒子不占用标准流的位置（脱标），如一个浮动一个不浮动
2.清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度使页面混乱
解决方法：清除浮动
①额外标签法：在父元素内容的最后添一个块级元素，设置CSS属性clear：both
②单伪元素法： ③双伪元素法（推荐）：
**④overflow：**父元素添加CSS属性overflow：hidden
媒体查询
媒体查询是CSS3中提出的一个新概念，它允许为页面设计不同的媒体条件，并根据条件来应用相应的样式。
媒体查询主要包括三部分内容，分别是媒体类型、媒体特性和关键字
基本使用：
//语法
@media 媒体类型 (媒体特性){
选择器{
CSS属性
}
}
媒体类型包括：all（所有设备）、print（打印机和打印预览）、screen（电脑屏幕平板手机等）当适用于多种媒体类型时用逗号隔开
1.引入css文件
通过media指定内体类型及条件来区别引入css文件
<--通过mdeia指定媒体类型来实现区别引入css文件-->
<link rel="stylesheet" href="./css/media1.css" media="screen">
<link rel="stylesheet" href="./css/media2.css" media="screen and (minwidth:600px)">
<--media1.css-->
body{
background-color: rgb(215, 200, 224);
}
<--media2.css-->
body{
background-color: rgb(236, 227, 199);
}
2.style内内联样式media指定媒体类型
//通过mdeia指定媒体类型来实现区别当前style是否生效
<style media="screen">
body{
background-color: rgb(215, 200, 224);
}
</style>
//通过mdeia指定媒体类型及条件来实现区别当前style是否生效
<style media="screen and (max-width: 600px)">
body{
background-color: rgb(236, 227, 199);
}
</style>
3.style内/css文件内使用（较常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
box-sizing: border-box;
list-style-type: none;
margin: 0;
padding: 0;
}
ul{
margin: 10px auto;
}
自适应
1.在网页代码的头部，加入一行viewport元标签。
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度
（width=device-width），原始缩放比例 （initial-scale=1）为1.0，即网页初始大小
占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使
用css3-mediaqueries.js。
2.尽量少使用绝对宽度
用rem em vw等相对宽度
flex布局
也叫弹性布局，flex模型不会产生脱标现象
1.组成
设置方式：给父元素设置display：flex；子元素可以自动挤压和拉伸
2.主轴（水平）对齐方式
属性名：justify-content
属性值：
3.侧轴（竖直）对齐方式
属性名：align-items（控制所有弹性盒子）、align-self（控制某个盒子）
属性值：
4.修改主轴方向
属性名：flex-direction
属性值： 同时侧轴自动变
5.弹性伸缩比
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数
6.弹性换行
属性名：flex-wrap
属性值：wrap换行、nowrap不换行、wrap-reverse反向换行
7.行对齐方式
属性名：align-content
属性值：
