CSS的三种样式说明
1、外部样式，通过从html的head中加入link标签外链到css文件
格式：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2、内部样式，通过从html的head中加入style标签，写入css代码
格式：
<head>
<style type="text/css">
body {
background-color: red
}
</style>
</head>
3、内联样式，通过需要修改样式的html标签中加入style属性，写入css代码
格式：
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
CSS选择器
1、标签选择器
格式：
标签名{ display : none; }
注意点：
① 标签选择器选中当前界面所有的该标签
② 标签选择器无论标签藏多深都能选中
2、id选择器
格式：
#id名称{ display : none; }
注意点：
① id选择器只能选中一个元素，同一个界面中id的名称是不可以重复的
② id的名称只能由字母/数字/下划线(a-z 0-9 _)且不能以数字开头
③ id名称不能是HTML标签的名称，不能是a h1 img input ...
3、类选择器
格式：
.类名称{ display : none; }
注意点：
① 每个标签都可以设置一个或者多个类名(使用空格间隔开)，同个界面下类名可以重复
② 类的名称只能由字母/数字/下划线(a-z 0-9 _)且不能以数字开头
③ 类名称不能是HTML标签的名称，不能是a h1 img input ...
4、后代选择器
格式：
标签名称1 标签名称2{ display : none; }
作用：先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
注意点：
① 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
② 后代选择器不仅仅可以使用标签名称, 还可以使用其它所有的选择器
③ 后代选择器必须用空格隔开且可以通过空格一直延续下去
5、子元素选择器
格式：
标签名称1>标签名称2{ display : none; }
作用：先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
注意点：
① 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
② 子选择器不仅仅可以使用标签名称, 还可以使用其它所有的选择器
③ 子元素选择器之间需要用>符号连接, 并且不能有空格，可以一直>符号延续下去找儿子的儿子
6、交集选择器
格式：
标签名称.类名称{ display : none; }
作用：给所有标签名称选中的元素中，有对应类名称的那部分标签设置属性
注意点：
① 选择器和选择器之间没有任何的连接符号
② 交集选择器不仅仅可以使用标签名称, 还可以使用 标签名称/id名称/class名称
③ 交集选择器仅仅作为了解, 企业开发中用的并不多
7、并集选择器
格式：
标签名称1,标签名称2{ display : none; }
作用：给所有选择器选中的标签设置属性
注意点：
① 并集选择器必须使用 ，（逗号）来连接
② 选择器可以使用标签名称/id名称/class名称
8、相邻兄弟选择器（CSS2）
格式：
标签名称1+标签名称2{ display : none; }
作用：给指定标签后面紧跟的那个标签设置属性
注意点：
① 相邻兄弟选择器必须通过+连接
② 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
9、通用兄弟选择器（CSS3）
格式：
标签名称1~标签名称2{ display : none; }
作用：从标签名称1后面开始查找（同等级标签）标签名称2的标签设置属性
注意点：
① 通用兄弟选择器必须用~连接
② 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有（同等级）标签, 无论有没有被隔开都可以选中
10、序选择器
选中同级别中的第n个标签
格式：
body>:nth-child(n) { display : none; }
作用：给body下面子元素的第n个元素设置属性
选中同级别中的倒数第n个标签
格式：
body>:nth-last-child(n) { display : none; }
作用：给body下面子元素的倒数第n个元素设置属性
选中同级别中的唯一的那个标签
格式：
body>:only-child{ display : none; }
作用：给body下唯一子元素设置属性（body子元素的这层只能有一个元素，否则就选不到）
选中同级别同类型中的第n个标签
格式：
body>:nth-of-type(n) { display : none; }
作用：给body下面子元素的第n个元素设置属性
选中同级别同类型中的倒数第n个标签
格式：
body>:nth-last-of-type(n) { display : none; }
作用：给body下面子元素的倒数第n个元素设置属性
选中同级别同类型中的唯一的那个标签
格式：
body>:only-of-type{ display : none; }
作用：给body下唯一子元素设置属性（body子元素的这层只能有一个元素，否则就选不到）
选中同级别中的所有奇数
格式：
body>:nth-child(odd)
作用：给body下所有奇数顺序的元素
选中同级别中的所有偶数
格式：
body>:nth-child(even)
作用：给body下所有偶数顺序的元素
选中第xn+y个元素，x=2和y=1是用户自定义的, 而n是一个计数器, 从0开始递增
格式：
body>:nth-child(2n+1)
作用：给body下顺序为2n+1（n从0开始递增）的元素
11、属性选择器
格式：
div[class]{ display : none; }
作用：根据指定的属性名称class找到div标签中有该属性的标签, 然后设置属性
格式：
div[class=abc]{ display : none; }
作用：根据指定的属性名称class的值abc找到div标签中有该属性的标签, 然后设置属性
注意点：
① [class^=abc] 可以找到属性class的值以abc开头的标签
② [class$=abc] 可以找到属性class的值以abc结尾的标签
③ [class*=abc] 可以找到属性class的值有字符串abc的标签
12、通配符选择器
格式：
*{ display : none; }
作用：遍历当前界面上所有的标签并给它们设置属性
注意点：
① 在设置之前会遍历所有的标签, 如果标签比较多, 那么性能会比较差, 所以在企业开发中一般不会使用通配符选择器
CSS三大特性及显示模式
CSS三大特性：
1、继承性，给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意点：
① 并不是所有的属性都可以继承, 只有以color(字体颜色)/font-(文字属性)/text-(文本属性)/line-(行属性) 开头的属性才可以继承
② 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
③ a标签的文字颜色和下划线是不能继承的
④ h标签的文字大小是不能继承的
继承性应用场景：
一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容
2、层叠性，层叠性就是CSS处理冲突的一种能力，优先级高的样式会覆盖掉优先级低的样式，最终只显示一种样式
注意点：
① 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
3、优先级，当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
注意点：
① 间接选中就是指继承，如果是间接选中, 那么就是谁离目标标签比较近就听谁的
② 相同选择器(直接选中)，那么就是谁写在后面就听谁的
③ 不同选择器(直接选中)，那么就会按照选择器的优先级来层叠：id>类>标签>通配符(通配符也属于直接选中)>继承>浏览器默认
④ 多个选择器混合使用(直接选中)，需要通过优先级权重判断谁优先级高，权重一样则谁写在后面听谁的
优先级权重计算规则： 计算选择器中有多少个id，id多的优先级高
计算选择器中有多少个类，类名多的优先级高
计算选择器中有多少个标签名，标签名多的优先级高
如果权重一样写在后面的优先
注意：只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
⑤ !important，用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升
注意：
!important只能用于直接选中, 不能用于间接选中
通配符选择器选中的标签也是直接选中的
!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
!important必须写在属性值得分号前面
!important前面的感叹号不能省略
CSS显示模式：
1、通过display的取值判断CSS元素的显示模式
① block 块级
特点：1、独占一行，可以设置宽高
2、如果没有设置宽度，默认和父元素一样宽
② inline 行内
特点：1、不会独占一行，不能设置宽高
2、行内元素的宽高是通过content（内容）撑起来的
③ inline-block 行内块级
特点：1、不会独占一行，可以设置宽高
④ table 表格
特点：1、不会独占一行，可以设置宽高
2、会作为块级表格来显示，可以在表格元素内部做table系列的显示模式，如table-cell
⑤ flex 弹性盒模型
特点：1、 独占一行，可以设置宽高
CSS盒模型
1、盒模型由 margin（外边距）、border（边框）、padding（内边距）、content（内容）组成，盒模型又分为 标准模型 及 IE模型 两种表示方法
①、标准模型 宽度和高度 = 盒模型 content（内容） 的宽和高
②、IE模型 宽度和高度 = 盒模型 border（边框） + padding（内边距） + content（内容） 的宽和高
设置标准模型（浏览器默认）： box-sizing : content-box ，此时设置元素的width和height 都是设置盒模型中的content的宽高
设置IE模型 ： box-sizing : border-box 则表示使用IE模型，此时设置元素的width和height 都是设置盒模型中content+padding+border 的宽高 （如果已经设置border或者padding的宽高，则剩下的宽高属于content）
2、margin（外边距）
作用：标签和标签之间的距离就是外边距
格式1：
单独设置四条边：margin-top: （上）、margin-right:（右）、margin-bottom:（下）、margin-left:（左），外边距只能设置 边距属性
.box1{
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
}
格式2：
同时设置四条边属性，对应关系是 margin: 上 右 下 左 ， 同时设置四条边还有省略的写法 margin ： 上 右左 下 、 margin : 上下 右左 、 margin：上右下左
.box1{
margin:20px 40px 80px 160px; 上 右 下 左
margin:20px 40px 80px; 上 右左 下
margin:20px 40px; 上下 右左
margin:20px; 上右下左
}
注意点：
① 外边距合并现象，默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的，如果想不重叠需要使用bfc
② 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子（没设置顶部外边距）也会被顶下来，如果不想外面盒子被顶下来，则需要给外盒子设置border（边框）属性
③ 企业开发中，需要控制嵌套盒子间距离，首先考虑使用外盒子的padding（内边距），margin（外边距）本质上用于控制兄弟盒子间隙的
④ 使用 margin： 0 auto，可以让盒子自己相对于父盒子水平居中，这里auto只能在水平方向使用，原因是auto默认使用的是剩余空间，左右设置auto则均分剩余空间，横向宽度是固定的（跟浏览器或者父盒子宽度有关），而纵向宽度不定（页面的纵向是可以无限滚动的），所以当纵向使用auto时计算值就为0
3、border（边框）
作用：边框就是环绕在 content（内容）+ padding（内边距） 宽度和高度周围的线条
格式1：
单独设置四条边：border-top: （上）、border-right:（右）、border-bottom:（下）、border-left:（左），边框可以设置三个属性 边框的宽度 边框的样式 边框的颜色
.box1{
border-top: 10px solid red;
border-right: 10px solid blue;
border-bottom: 10px solid pink;
border-left: 10px solid green;
}
格式2：
同时设置四条边属性，没有省略设置单边的写法，可以使用快捷键 bd+ 然后按tab键直接生成
.box1{
border: 10px solid red;
}
注意点：
① 连写格式中颜色属性可以省略, 省略之后默认就是黑色
② 连写格式中样式不能省略, 省略之后就看不到边框了
③ 连写格式中宽度可以省略, 省略之后还是可以看到边框（默认1px）
④ 给标签设置边框之后, 标准模型下 标签整体 占有的宽度和高度会发生变化
属性：
第一个值边框的宽度：10 px
第二个值边框的样式： solid（实线） 、dashed（虚线） 、dotted（圆点虚线） 、double（双线）
第三个值边框的颜色： red（红色）、blue（蓝色）、pink（粉色）、green（绿色）
4、padding（内边距）
作用：边框和内容之间的距离就是内边距
格式1：
单独设置四条边：padding-top: （上）、padding-right:（右）、padding-bottom:（下）、padding-left:（左），内边距只能设置 边距属性
.box1{
padding-top:20px;
padding-right:40px;
padding-bottom:80px;
padding-left:160px;
}
格式2：
同时设置四条边属性，对应关系是padding: 上 右 下 左，同时设置四条边还有省略的写法 padding:上 右左 下 、 padding: 上下 右左 、margin:上右下左
.box1{
padding:20px 40px 80px 160px; 上 右 下 左
padding:20px 40px 80px; 上 右左 下
padding:20px 40px; 上下 右左
padding:20px; 上右下左
}
注意点：
① 给标签设置内边距之后, 内边距也会有背景颜色
② 给标签设置内边距之后, 标准模型下标签整体占有的宽度和高度会发生变化
元素的宽度和高度
宽度 = 左边框 + 左内边距 + width（box-content） + 右内边距 + 右边框
高度 同理可证
增加了padding/border之后元素的宽高也会发生变化
如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高
元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width（box-content） + 右内边距 + 右边框 + 右外边距
高度 同理可证
1、在CSS中设置 box-sizing : content-box 则表示使用标准模型（浏览器默认），通过设置元素的width和height 指的都是盒模型中的content宽高
2、在CSS中设置 box-sizing : border-box 则表示使用IE模型， 通过设置元素的width和height 指的都是盒模型中的content+padding+border的宽高（如果已经设置border或者padding的宽高，则剩下的宽高属于content）
CSS常见属性
文字属性
1、font-style，规定文字样式
取值:
normal ： 正常的， 默认就是正常的
italic : 倾斜的
2、 font-weight，规定文字粗细
单词取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线， 默认就是细线
数字取值：
100-900之间整百的数字
3、font-size，规定文字大小
取值:
10px(像素 pixel)
4、font-family，规定文字字体
取值:
各种字体名称，如"微软雅黑"、"宋体"、"楷体"
注意点：
① 如果取值是中文， 需要用双引号或者单引号括起来
② 设置的字体必须是用户电脑里面已经安装的字体，如果设置的字体不存在系统默认使用宋体
③ 可以给字体设置备选方案，当第一方案无效的时候会采用备选方案
格式:font-family:"字体1", "备选方案1", ...;
④ 如果想给中文和英文分别单独设置字体，那么英文字体放做第一方案，中文字体放做备选方案，因为英文字体里一定没有中文字体
5、font，一次设置字体属性
格式：
font: style weight size family;
例子：
font : italic bold 10px "楷体";
注意点:
① 在这种缩写格式中有的属性值可以省略，sytle可以省略、weight可以省略，且两者可以交换位置
② 在这种缩写格式中也有的属性值不可以省略，size不能省略、family不能省略，size一定要写在family的前面, 而且size和family必须写在所有属性的最后
文本属性
1、text-decoration，给文本添加装饰
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
2、text-align，设置文本水平对齐方式
取值:
left 左
right 右
center 中
3、text-indent，设置文本缩进
格式:
text-indent: 2em;
取值:
2em, 其中em是单位, 一个em代表缩进一个文字的宽度
文字颜色属性
1、color，修改文字颜色
英文单词取值:
red（红色）
blue（蓝色）
pink（粉色）
green（绿色）
rgba说明：
第一个数字就是用来设置三原色的光源元件 红色 显示的亮度
第二个数字就是用来设置三原色的光源元件 绿色 显示的亮度
第三个数字就是用来设置三原色的光源元件 蓝色 显示的亮度
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮
第四个数字表示透明度，取值是0-1, 取值越小就越透明
rgba取值：
红色: rgba(255,0,0,0);
绿色: rgba(0,255,0,0);
蓝色: rgba(0,0,255,0);
黑色: rgba(0,0,0,0);
白色: rgba(255,255,255,0);
灰色: rgba(200,200,200,0);
CSS背景
背景颜色
1、background-color （或者background的第一个取值），添加标签背景颜色
英文单词取值:
red（红色）
blue（蓝色）
pink（粉色）
green（绿色）
rgba取值：
红色: rgba(255,0,0,0);
绿色: rgba(0,255,0,0);
蓝色: rgba(0,0,255,0);
黑色: rgba(0,0,0,0);
白色: rgba(255,255,255,0);
灰色: rgba(200,200,200,0);
背景图片
1、background-image，添加标签背景图片
取值：
url("图片位置（网络或者本地的绝对路径和相对路径都可以）")
例子：
background-image : url(images/girl.jpg);
background-image : url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg)
2、background-repeat，控制背景图片的平铺方式
取值:
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
例子：
background-repeat: repeat-y;
应用场景:
① 可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
② 可以将多张图片拼接成一张图片
注意点:
① 背景颜色和背景图片可以共存, 图片会覆盖颜色
3、background-position，专门用于控制背景图片的位置
格式：
background-position： 水平方向 垂直方向；
方位名词:
水平方向: left（左） center（中） right（右）
垂直方向: top（上） center（中） bottom（下）
具体方位名词取值：
background-position: left top;
具体像素取值：
background-position: 100px 200px;
注意点：
① 记住一定要写单位, 也就是一定要写px
② 记住具体的像素是可以接收负数的
4、background-attachment，修改背景关联方式
取值：
scroll 默认值， 背景会随着滚动条的滚动而滚动
fixed 背景不会随着滚动条的滚动而滚动
5、background，统一配置背景相关属性
格式：
background : 背景颜色 背景图片 平铺方式 关联方式 定位方式；
例子：
background: red url("images/video1.jpg") bottom center fixed no-repeat;
注意点：
① background属性中，任何一个属性都可以被省略
img插入图片与background设置背景图片的区别
1、背景图片仅仅是一个装饰, 不会占用位置，插入图片会占用位置
2、背景图片有定位属性, 所以可以很方便的控制图片的位置，插入图片没有定位属性, 所有控制图片的位置不太方便
3、插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片
精灵图，可以减少请求的次数, 以及可以降低服务器处理压力
注意点：
CSS的精灵图需要配合背景图片和背景定位来使用
例子：
.box{
width: 86px;
height: 28px;
background-image: url(images/weibo.png);
background-position: -425px -200px;
}
精灵图：
[图片上传失败...(image-af0945-1532753536550)]
CSS页面布局排版
1、标准流（文档流/普通流）
① 其实浏览器默认的排版方式就是标准流的排版方式
② 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
③ 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
2、浮动流
① 浮动流是一种"半脱离标准流"的排版方式
② 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
注意点：
① 浮动流中没有居中对齐, 也就是没有center这个取值
② 在浮动流中是不可以使用margin: 0 auto;
③ 在浮动流中是不区分块级元素/行内元素/行内块级元素的
④ 无论是块级元素/行内元素/行内块级元素都可以水平排版
⑤ 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
浮动流特点：
① 如果前面一个元素浮动了，后面一个元素没有浮动，那么前面元素会盖住后面元素
image.png
② 相同方向的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
image.png
③ 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
image.png
④ 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定（标准流时在第几行，浮动就会在第几行）
浮动前（都是标准流）：
image.png
浮动后：
image.png
⑤ 浮动元素贴靠现象，如果父元素的宽度不能显示所有浮动元素, 那么会从原需要贴靠的最后一个元素开始往前（最后一个元素贴靠的前一个元素）贴靠，如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边（左浮动）或者右边（有浮动），无论父元素的最左边或者最右边能不能容下该元素 都会贴靠在这里
image.png
⑥ 浮动元素字围现象，浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
image.png
清除浮动的原因
① 在标准流中内容的高度可以撑起父元素的高度
② 在浮动流中浮动的元素不可以撑起父元素的高度，所以需要清除浮动才能使得元素既浮动又能撑起父元素高度
清除浮动的方法
① 给父元素配置高度（如此就不需要再让内容撑起高度）
缺点：无法让高度根据内容自适应增长，在企业开发中能不写高度就不写高度
② 利用 clear:both; 属性清除前面浮动元素对当前元素的影响
clear属性取值：
none 关闭（默认）
both 让当前浮动元素不去寻找前面的浮动元素
缺点：使用clear:both之后，当前元素的margin（外边距）属性会失效，失效原因是由于当前元素的父元素是body，如果使用margin-top 会把父元素一起顶下来，而body是无法被顶下来的，所以margin属性无效。
③ 隔墙法，在两个有浮动子元素的盒子之间添加一个额外的块级元素
外墙法，在两个盒子中间添加一个额外的块级元素，并且给这个块级元素设置clear:both属性
缺点：外墙法只能让第二个盒子使用margin-top属性，不能让第一个盒子使用margin-bottom属性，如果需要给两个盒子间增加间隙，最好通过额外的元素添加高度实现
内墙法，在前一个盒子子元素中最后位置添加一个块级元素，并且给这个块级元素设置clear:both属性
优点：内墙法既可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性，内墙法可以撑起第一个盒子的高度
缺点：需要额外添加一个块级元素
④伪元素的clear:both（最优方案）：
.clearfix::after{
content:'';
display:block;
clear:both;
}
3、文档流
什么是文档流？
文档流就是CSS中每个元素最基本的流向属性，比如内联元素的流向就是在 单行空间内从左向右流，块级元素本来的流向就是每一块占满每一行从上到下流。
absolute是什么？
绝对定位，只要position值配置了非static的值以后，该元素就会脱离文档流，脱离文档流的元素就会开启top、left、right、bottom 四个属性，而绝对定位的元素会根据父元素中上一个脱离文档流的元素作为基准，去使用上面四个新开启的属性。
relative是什么？
相对定位，以自己本来的位置为基准，使用脱离文档流后新增的top、left、right、bottom 四个属性
网友评论