CSS基础
CSS基本语法
CSS选择器，通过选择器，选中页面中的指定元素
CSS声明块，通过声明块来为元素设置样式，声明是一个名值对结构，冒号连接，分号结尾
CSS选择器
元素选择器
- 根据标签名选中指定的元素
id选择器
- 可以为标有特定id的HTML选择器指定特殊的样式
- 格式：#id{ }
类选择器
根据class属性选中一组数据
格式：.class属性值{ }
可以为一个元素指定多个class属性，多个class之间使用空格隔开
通配选择器
- 选中页面中的所有元素
- 格式：*{ }
复合选择器
交集选择器
同时选中符合多个条件的元素
语法：选择器1选择器2选择器3……{ }
注意：如果有元素选择器，必须使用元素选择器开头
选择器分组（并集选择器）
同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，……{ }
关系选择器
父元素
- 直接包含子元素的元素
子元素
直接被父元素包含的元素
子元素选择器，选中父元素的指定子元素
- 格式：父元素>子元素{ }
祖先元素
- 直接或间接包含后代元素的元素
后代元素
直接或间接被包含后代元素的元素
后代元素选择器，选中元素指定的所有后代元素
- 格式：祖先 后代
兄弟元素
拥有相同父元素的元素
兄弟元素选择器，
选择下一个兄弟元素，格式：前一个+下一个 { }
选择下面所有的兄弟元素，格式：前一个~下一个{}
属性选择器
根据元素的属性来选择元素
选定含有指定属性的元素，格式：[属性名]
选定汉语指定属性和属性值的元素，格式：[属性名=属性值]
选择属性以指定值开头的元素，格式：[属性名^=属性值]
选择属性以指定值结尾的元素，格式：[属性名$=属性值]
选择属性值中含有指定值的元素，格式：[属性名*=属性值]
伪类选择器
伪类：不存在的特殊类，用来描述元素的特殊状态
格式：使用：开头
所有类型的子元素进行大排序：
:first-child：选中第一个子元素
:last-child：选中最后一个子元素
:nth-child(n)：选中第n个子元素，n的值可以是2n,even,2n+1,odd
相同类型中的子元素进行小排序：
:first-of-type
last-of-type
nth-of-type
:not 否定伪类，将符合条件的元素排除在外
伪元素选择器
伪元素：存在的特殊元素，用来描述元素的特殊位置
格式：使用::开头
::first-letter：表示第一个字母
::first-line：表示第一行
::selection：表示鼠标选中的文字
::before：表示元素的开始位置，第一个字符之前
::after：表示元素的结束位置，最后一个字符之后
注意：before和after必须结合content属性来使用，通过CSS增加的内容不能通过鼠标选中
继承
样式的继承，给元素设置的样式同样也会应用到他的后代元素上
通过继承，我们可以将共同的样式设置到他们的祖先元素中
注意：并不是所有的样式都会被继承，如背景、布局等
选择器的权重
样式的冲突，使用不同的选择器对同一个元素设置同类型的样式
按照优先级排序
内敛样式：在HTML中设置的样式 1，0，0，0
id选择器：0，1，0，0
类和伪类选择器：0，0，1，0
元素选择器：0，0，0，1
通配选择器：* 0，0，0，0
继承的样式：没有优先级
比较优先级时，需要把所有的选择器的权重进行相加后比较他们的优先级
注意：
选择器的累加结果不会超过上一级选择器的优先级（不能跨越数量级）
如果优先级计算的结果相同，则优先使用靠下的样式（先出现的被覆盖）
可以在某一个样式后边加 !important ,获取最高的优先级，超过内敛样式的优先级，但是开发中尽量不要使用
单位
像素
- 不同屏幕的像素点大小不同，同样的200px在不同的设备下显示的效果是不同的
百分比
百分比可以设置属性相对于父元素(不严谨)属性的百分比
设置百分比可以使子元素随父元素的改变而改变（等比例）
em
em相对于字体大小来计算的，会随字体大小的改变而改变
1em = 1 font-size
rem
相对于根元素(html)的字体大小来计算的
移动端作适配
RGB
每一种颜色的范围在0-255之间
语法：RGB(红色，绿色，蓝色)
RGBA
在RGB的基础上增加了A表示不透明度，范围在0-1之间
1表示完全不透明
0表示完全透明
.5表示半透明
16进制的RGB值
语法：#红色绿色蓝色
颜色浓度通过00-ff描述
如果颜色两位重复可以简写，如#aabbcc = #abc
HSL值
H：色相（0 - 360）
S：饱和度（0% - 100%）
L：亮度（0% - 100%）
Layout布局
文档流（normal flow）
网页是一个多层的结构，通过CSS为每一层设置样式
作为用户只能看到最顶上一层
最底一层称为文档流，是网页的基础，所创建的元素默认都是在文档流中进行排列
元素有两个状态：
在文档流中
块元素
总是独占一行
默认宽度是父元素的全部，默认高度是被子元素填充的高度
行内元素
行内元素不会独占一行，只占自身大小
在页面中自左向右水平排列，如果一行中无法容纳所有的行内元素，则自动换行
行内元素的默认高度和宽度被内容撑开
脱离文档流
盒子模型
CSS将页面中的所有元素都设置成了一个矩形的盒子
将元素设置成盒子后，对页面的布局就变成了摆放盒子
每一个盒子都由以下几个部分组成
内容区（content）：盒子中的所有子元素和文本内容都在内容区中
内边距（padding）：内容区和边框之间的距离
边框（border）：盒子的边缘，边框的大小会影响盒子的大小
外边距（margin）：决定盒子的位置
盒子模型的属性
内容区的大小由width和height设置
边框需要至少设置三个样式：
border-width：边框的宽度，有默认值
值的情况
四个值：上、右、下、左
三个值：上、左右、下
两个值：上下、左右
一个值：上下左右
其他属性（一般用的不多）
border-xxx-width:xxx的值可以是：top、right、bottom、left
border-color：边框的颜色，同样可以分别指定四个边框的颜色，规则同上，存在默认值，为黑色（但是color也通过前景色修改默认值）
border-style：边框的样式 ，默认值是none
solid：表示实线
dotted：点状虚线
dashed：虚线
double：双线
border的简写属性，设置所有边框的相关属性，没有顺序关系
border:solid 10px yellow
border_xxx:10px solid orange
内边距
一共有四个方向的内边距
padding-top
padding-bottom
padding-left
padding-right
padding：同时规定四个方向的内边距属性，值的情况和border-width相同
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
外边距
外边距不会影响盒子可见框的大小，但是会影响盒子的位置
一共有四个方向的外边距
margin-top：上外边距，设置正值，元素向下移动
margin-bottom
margin-left
margin-right：默认情况下设置该值没有用
元素在页面中按照自左向右的顺序排列的，默认情况下：
设置左和上会移动元素自身
设置右和下会移动其他元素
margin可以设置负值
水平方向的布局
相关属性
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在父类中，水平布局的属性需要满足：
以上七个值的和等于父元素内容的宽度（必须满足）
如果七个值中没有为auto的情况，则浏览器会自动调整margin-right的值
这七个值中有三个值width、margin-left、margin-right可以设置成auto，此时浏览器只会调整值为auto的那个属性。（width的默认值事auto）
如果将一侧的宽度和外边距设置成auto，则宽度会放到最大，设置为auto的外边距会自动为0
如果将三个值都设置成auto，宽度最大，外边距都为0
如果将width设置成固定值，将两个外边距设置成auto，则盒子会居中
垂直方向的布局
默认情况下父元素的高度被内容撑开
子元素在父元素的内容区中排列，如果子元素大小超过了父元素，称为溢出
使用overflow属性来设置父类元素如何处理溢出
visible：默认值，子元素会溢出，在父元素的外部显示
hidden：将溢出的内容裁剪，溢出部分不显示
scroll：生成两个滚动条，通过滚动查看完整的内容
overflow-x
overflow-y
外边距的折叠
相邻的垂直方向的外边距会发生折叠现象
兄弟元素
兄弟元素间的相邻垂直外边距会取两者之间的较大值
特殊情况：如果相邻的外边距一正一负，就取两者的和
兄弟之间的外边距的重叠对开发是有利的
父子元素
父子元素之间的相邻外边距，子元素的外边距会传递给父元素（上外边距）
父子外边距的折叠会影响整个页面的布局，需要进行处理
行内元素的盒子模型
行内元素不支持设置高度和宽度
行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
行内元素可以设置border，但是垂直方向的border不会影响页面的布局
行内元素可以设置margin，但是垂直方向的margin不会影响页面的布局
display属性用来设置元素现实的类型
inline：将元素设置成行内元素
block：将元素设置成块元素
inline-block：将元素设置成行内块元素，既能够设置宽度和高度，但是不会独占一行
table：将元素设置成表格
none：隐藏元素
visibility：用来设置元素的显示状态
visible：默认值，元素正常显示
hidden：元素在页面中隐藏不显示，但是依然占据位置
浏览器的默认样式
通常情况下，浏览器都会为元素设置默认样式
默认样式会影响页面的布局，通常情况下，我们需要去掉浏览器的默认样式（PC端的页面）
*{
margin:0;
padding:0;
}另一种方法，通过link引入reset.css文件，去除所有的样式
盒子的尺寸
默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定
box-sizing:用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box：默认值，宽度和高度用来设置内容区的大小
border-box：height和width用来设置整个盒子可见框的大小
轮框阴影和圆角
outline：用来设置轮廓线，用法和border一样，不会影响页面的布局
box-shadow：用来显示元素的阴影，默认情况下，阴影出现在元素的正下方，需要设置偏移量。
第一个值设置水平位置，正值向右移动，负值向左移动
第二个值设置垂直偏移量，正值向下移动，负值向上移动
第三个只设置阴影模糊轮廓
第四个值设置阴影的颜色，通常情况下使用RGBA值
border-radius：设置圆角，设置圆的半径大小
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-left-radius可以设置两个值，结果是不规则的圆
第一个值：水平方向的半径
第二个值：垂直方向的半径
将元素设置成一个圆形：
- border-radius：50%
Float浮动
通过浮动，可以使元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值：
none：默认值，元素不浮动
left：元素向左浮动
right：元素向右浮动
注意：
元素设置浮动之后，水平布局的等式不需要强制成立
元素设置浮动以后，会从文档流中脱离，不会占用文档流的位置，故元素下还处于文档流中的元素回自动向上
浮动的特点：
浮动会脱离文档流，不会再占用文档流的位置
设置浮动以后，元素会向父元素的左侧或右侧移动
浮动元素不会从父元素中移出
如果浮动元素的上面是文档流中的块元素，则浮动元素无法上移
浮动元素不会超过他上边的兄弟元素
浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，故可以使用浮动来设置文字胡那套图片的效果
脱离文档流的特点
块元素不再独占页面的一行
块元素的默认宽高都被内容撑开
行内元素脱离文档流后会变成块元素，特点和块元素一样
脱离文档流之后，不需要区分行内元素和块元素
简单的布局
设置头部
、设置主体、设置底部 相同的样式使用选择器分组使用，减少重复的代码
水平排列的块元素全部使用浮动float
高度塌陷和BFC（浮动可能出现的问题）
- 在浮动布局中，父元素的高度是由子元素撑开的，当子元素脱离文档流之后，父元素的高度就会丢失，影响其下方的元素布局混乱
position定位
通过定位可以将元素放到页面的任意位置
position的可选值：
static：默认值，元素是静止的，没有开启定位
relative：开启元素的相对定位
元素开启后，若不设置偏移量，不会发生任何变化
偏移量（offset）：
可以通过偏移量来设置元素的位置，通常情况下在水平和竖直方向上使用两个值来控制
top
bottom
left
right
相对定位是参照元素在文档流中的
相对定位会提高元素的层级
相对定位不会使元素脱离文档流，不会改变元素的性质
absolute：开启元素的绝对定位
不设置偏移量，偏移元素的位置不会发生变化
开启绝对定位后，元素会从文档流中脱离，会改变元素的性质
绝对定位会提升元素的层级
绝对定位元素使相对与其包含块定位的
- 包含块：正常情况下包含块的元素就是离他最近的开启了定位的祖先块元素。如果所有的祖先元素都没有开启定位，则绝对定位相对于根元素(初始包含块)
fixed：开启元素的固定定位
固定定位是一种特殊的绝对定位，唯一不同的是，他相对于浏览器的视口（可视窗口）进行定位
固定定位的元素不会随滚动条浮动
sticky：开启元素的粘滞定位
- 和相对定位的特点基本相同，不同的是在滚动到一定的位置时可以固定位置
背景
设置页面或文本的背景颜色{background-color: yellow}
将图像设置为背景{background-image:url(……)}
重复背景图像{background-image:url(); background-repeat: repeat}
水平方向重复背景图像:{background-image:url(); background-repeat: repeat-x}
垂直方向重复背景图像：{background-image:url(); background-repeat: repeat-y}
不重复背景图像：{background-image:url(); background-repeat: no-repeat}
确定图像放置的位置background-position：
通过%确定图像放置的位置
通过像素确定图像放置的位置：单位px
通过关键字确定图像放置位置：top、bottom、left、right 和 center\
固定背景位置不随文档滚动background-attachment
由于图片的长度有限，该属性可以防止图像在滚动的过程中消失
- 该属性的默认值是scroll，通过修改成fixed可以防止图像滚动
字体相关的样式设置
color：设置字体颜色
font-size：设置字体的大小
常用单位：
em：相当于当前元素的一个font-size
rem：相当于根元素的一个font-size
font-family：字体族
图标字体库
- 通过类名使用使用图标字体库
文本
- 通过类名使用使用图标字体库
设置文本颜色：color:rgb(0,0,255)
设置文本背景颜色：background-color:
设置字符间距：letter-spacing：
- 单位：em、px
设置行间距
使用百分比设置行间距：line-height：90%
使用像素值设置行间距：line-height：90px
使用数值设置行间距：line-height：0.5
文本格式
对齐文本：text-align：center\left\right
修饰文本: text-decoration:
上划线：overline
中划线：line-through
下划线：underline
关闭所有装饰（超链接取消下划线）：none
缩进文本: text-indent: 1cm
控制文本的字母:text-transform
uppercase 所有字母大写
lowercase 所有字母小写
capitalize 每个单词的首字母大写
在元素中禁止文本折行 white-space：nowrap
增加单词间距
要使文字在父元素中居中，需要在父元素中将line-height设置成和height相同的值即可
Emmet语法
快速生成HTML结构语法
生成标签可以直接输入标签名，按Tab键即可
生成多个相同的标签名，加上*即可
有父子关系的标签可以使用 > 号
有兄弟关系的标签名使用 + 号
生成有class类名或id名的的div，可以直接使用.demo或#id名
生成的div类名是有顺序的，使用自增符号 $
快速生成CSS样式
- 简写形式+Enter
XHTML规则
使用恰当的文档类型声明和命名空间
使用meta元素声明你的内容类型
使用小写字母书写所有的元素和属性
为所有的属性值加引号
为所有的属性分配值
关闭所有的标签
使用空格和斜线关闭空标签
不要在注释中写双下划线
确保小于号以及和号是< 和 &
弹性盒子
flex（）是css 的另一种布局的手段，主要代替浮动来完成页面的布局，但是兼容性没有浮动高
flex（）可以使元素具有弹性，让元素随页面大小的变化而变化
弹性容器
要使用弹性盒子，必须将一个元素设置成弹性容器
使用display:flex设置为块级弹性容器
使用display：inline-flex设置为行内的弹性容器
flex-deriction：指定容器中弹性元素的排列方式，可选值：
row ：默认值，弹性元素在容器中水平排列（从左到右）
row-reverse：弹性元素在容器中水平排列（从右到左）
column：弹性元素纵向排列（自上向下）
column-reverse：弹性元素纵向排列（自下向上）
flex-wrap:设置弹性元素在弹性容器中是否自动换行
可选值
nowrap：默认值，元素不会自动换行
wrap：元素会沿着侧轴方向自动换行
wrap-reverse：元素沿着侧轴的反方向换行
flex-flow：wrap和direction的简写属性
justify-content：如何分配主轴上的空白空间（主轴上的元素如何排列 ）
可选值：
flex-start：元素沿着主轴起边排列
flex-end：元素沿着主轴终边排列
center：元素居中排列
space-around：空白分布到各个元素的两边
space-evenly：空白分布到各个元素的单侧
space-between：空白均匀分布到元素的中间
align-items：元素在侧轴上如何对齐
可选值：
stretch：将元素的长度设置成相同的值（侧轴上每行的元素设置成相同的高度）
flex-start：元素不会拉伸，沿着侧轴的起点开始对齐
flex-end：元素不会拉伸，沿着侧轴的终点开始对齐
center：元素居中对齐
base-line：基线对齐，文字中心在同一个高度上
align-content：如何分配侧轴上的空白空间，类比justify-content的可选值
align-self：给某个元素单独设置align-items，能够覆盖之前的设置
主轴：弹性元素的排列方向
侧轴：与主轴垂直方向的称为侧轴
弹性元素
弹性容器的子元素使弹性元素（弹性项）
一个元素既可以是弹性容器，也可以是弹性元素
弹性元素的属性
flex-grow：指定弹性元素的伸展的系数
当父元素由多余的空间时，子元素如何伸展
父元素的空间，会按照flex-grow值的比例进行分配
默认值是0
flex-shrink：指定元素的收缩系数
当元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
所见多少是根据缩减系数和元素大小来确定的
flex-basis：设置元素的基本长度，指定元素在周周上的基础长度
如果主轴是横向的，那么指定的就是元素的宽度
如果主轴是纵向的，那么指定的就是元素的长度
flex 作为简写，可以设置弹性元素的三个样式
- 顺序：增长 缩减 基础
order：决定弹性元素的排列顺序
移动端
通常情况下，移动端的网页视口都会设置成980像素（css像素）
在编写移动端页面时，需要设置视口大小调整像素的比例
1css像素 对应 2个物理像素
1css像素 对应 3个物理像素
通过meta标签来设置视口大小
完美视口 width=device-width
