css
一．补充知识
属性，在标签中（开始标签或自结束标签）还可以设置属性
属性是用来设置标签中的内容如何显示
文档声明 html5
<!doctype html>
head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页
<head>
meta标签用来设置网页的元数据
<meta charset=”utf-8”>
二进制：
逢2进1
单位数字：2个（0-1）
0 1 10 11 100 101 110 111 1000 1001 1010 1011 1100 1101 1110 1111 10000
11->100
11
1
各位1+1=2 进1得0
十位1+进的1=2 进1得0
所以100
十六进制
满16进1
0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1f 20 ...
单位数字：16个（0-f）
| 块标签 | 行内元素 |
| 独占一行 | 在页面中不会独占一行 |
| 在网页中一般用于布局 | 一般用于包裹文字 |
| h1 P |
一般情况下，会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本什么都能放
p元素中不能放任何元素
浏览器在网页解析时，会自动对网页中不符合规范的内容进行修正
比如：标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
图片的格式：
| Jpeg(jpg) | gif | Png |
| 支持的颜色比较丰富，不支持透明效果，不支持动图 | 支持的颜色比较少，支持简单透明，支持动图 | 支持的颜色丰富，支持复制透明，不支持动图 |
| 一般用来显示照片 | 颜色单一的图片，动图 | 颜色丰富，复杂透明图片（专为网页而生） |
网页分成3个部分
二．Css
1.介绍
-层叠样式表
-网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式，
而最终我们能看到只是网页最上边一层
2.使用方式
-内连
< p style=”xxx”>
-内部
<p>
<style>
P{
xxx
}
</style>
-外部
<p>
<link rel=”stylesheet” href=”a.css”>
1.css
P{
}
3.选择器
-元素选择器
直接标签名{}
-id选择器
根据元素的id属性值选中一个元素
#id{}
-类选择器
根据元素的class属性选中一个元素
.class属性值
多class空格隔开 class=”a b c”
-通配选择器
*
复杂选择器
交际选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器{}
- div.a{}
注意点:有元素选择器时，必须使用元素选择器开头
并集选择器
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器{}
- #a,.b{}
关系选择器
子元素选择器
作用：选中指定父元素的指定子元素
语法： 父元素 > 子元素
后代元素选择器
作用：选中指定元素内的指定后代
语法：祖先 后代
兄弟选择器
作用：选择下一个兄弟（紧挨着的）
语法：前一个 + 下一个
选择下面所有兄弟
语法：前一个 ~ 下一个
属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素
伪类选择器
-不存在的类，特殊的类。用来描述一个元素的特殊状态
比如：第一个元素，被点击的元素，鼠标移入的元素
-一般情况下都是使用：开头
:first-child 第一个元素
:last-child最后一个元素
:nth-child()选中第n个子元素
特殊值
n第n个 n的范围0到正无穷
2n或even 表示选中偶数为的元素
2n+1 或odd 表示选中奇数位的元素
注意：以上都是根据所有子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能和上述类似，不同点是他们是在同类型元素中进行排序
:not 否定伪类
-将符合条件的元素从选择器中去除
超链接伪类
-a:link 表示没访问过的链接
-a:visited 表示访问过的链接
-a:hover 表示鼠标移入的状态
-a:active 表示鼠标点击
伪元素选择器
-表示页面中一些特殊的并不存在的元素（特殊的位置）
- :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before和after必须结合content属性来使用
继承
-发生在祖先后代之间
-为一个元素设置的样式，同时也会应用到它的后代元素上
注意：并不是所有的样式都会被继承
比如：背景相关的，布局相关等的这些样式都不会被继承
权重
样式的冲突
-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，就会发生样式的冲突
-发生样式冲突时，应用哪个样式由选择器权重决定
选择器的权重
内联样式 1,0,0,0
Id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
选择器的累加不会超过其最大的数量级，类选择器不会超过id选择器
如果优先级计算后，相同，优先显示靠下的样式
可以在某一个样式后面加!Import ,此时该样式会获取到最高的优先级，甚至会超过内联样式。注意：在开发中慎用。
长度单位
像素
-屏幕显示器实际上是由一个一个小点构成的
百分比
-设置百分比可以使子元素随父元素改变而改变
em
-相对于元素字体大小来计算的
-1em=1font-size
-会根据字体的大小的改变而改变
rem
-相对于根元素的字体大小来计算
Html{
Font-size:xxxpx;
}
颜色
HSL值
H 色相 （0-360）
S 饱和度 颜色的浓度 0%-100%
L 亮度 颜色的亮度 0%-100%
文档流
-网页是多层结构，最下面一层，称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列
-对应我们来说，元素主要有两个状态
在文档流中
不在文档流中
元素在文档流特点
-块元素
-会在页面中独占一行（自上向下垂直排列）
-默认宽带是父元素的全部（会把父元素撑满）
-默认高度是被内容撑开（子元素）
-行内元素
-不会独占一行，只占自身的大小
-在页面中从左向右水平排列，如果一行中不能排列，则元素会切到第二行排列（从左向右）
-默认宽度和高度都是被内容撑满
盒子模型
-css将页面中的所有元素都设置为一个矩形的盒子
-将元素设置为矩形后，对页面的布局就变成将不同的盒子摆放到不同的位置
-每个盒子都由以下部分组成
内容区
内边距
边框
外边距
内容区
-元素中的所有子元素和文本内容都在内容区中排列
-大小由width和height两个属性来设置
边框
-属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
-边框的大小，会影响到整个盒子的大小
内边距
-内容区和边框之间的距离
-会影响盒子的大小
-背景颜色会延伸到内边距上
一个盒子可见框的大小，由内容区，内边距和边框共同决定。
外边距
-不会影响盒子可见框的大小
-会影响盒子的位置
-元素在页面中是按照自左向右顺序排列的，所以默认情况下，如果设置左和上，外边距会移动，而设置下和右会移动其它元素
-会影响到盒子实际占用空间大小
水平方向布局
一个元素在其父元素中，水平布局必须要满足以下的等式
Margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区的width
-没有没有auto，浏览区会自动调整margin-right
-如果当元素width为auto，宽度设置最大
-如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的大小，可以用这个特点，使元素在父元素中水平居中
垂直方向布局
-子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会 从父元素中溢出。在父元素中，使用overflow属性来设置父元素处理溢出的子元素
-visible,默认值，子元素会从父元素中溢出
-hidden 溢出内容直接剪裁，不会显示多余部分
-scroll,生成两个滚动条，通过滚动条来查看完整的内容
-auto，根据需要生成滚动条
垂直外边距的重叠
-相邻的垂直方向外边距会发生重叠
-父子元素相邻的外边距，子元素的会传递给父元素（上外边距）
-父子外边距的折叠会影响到页面的布局，必须进行处理
行内元素的盒子模型
-行内元素不支持设置宽度和高度
-行内元素可以设置padding，但是垂直方向padding不会影响到页面的布局
-行内元素可以设置border，垂直方向border不会影响到页面的布局
-行内元素可以设置margin，垂直方向margin不会影响到页面的布局
Display用来设置元素显示的类型
可选值
-inline 将元素设置为行内元素
-block 将元素设置为块元素
-inline-block将元素设置为行内块元素，即可以设置宽度和高度又不会独占一行
-table 将元素设置为一个表格
-none 元素不在页面中显示
Visibility 用来设置元素的显示状态
可选值
-visible 默认值，元素在页面中正常显示
-hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置
父元素文字垂直居中
Height，line-height设置一样
盒子大小
默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定
Box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
Content-box 默认值，宽度和高度用来设置内容区的大小
Border-box 宽度和高度用来设置整个盒子可见框的大小
width和height指的是内容区和内边距和边框的总大小
轮廓和圆角
outline用来设置元素的轮廓线，用法和border一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
浮动：
通过浮动可以使一个元素向其父元素的左侧或者右侧移动
使用float属性来设置元素的移动
可选值：
none默认值，元素不浮动
left 元素向左移动
right 元素向右移动
注意：元素设置浮动后，水平布局的等式不需要强制成立
元素设置浮动后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。
浮动的特点：
- 浮动元素会完全脱离文档流，不再占据文档流中的位置
- 设置浮动以后，元素会向父元素的左侧或则右侧移动
- 浮动的元素，默认不会从父元素中移出
- 浮动元素向左或向右移动时，不会超过它前边的其它浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围。
所以我们可以利用浮动来设置文字环绕图片的效果
元素脱离文档流特点：
块元素：
- 块元素不在独占页面的一行
- 脱离文档流后，块元素的宽度和高度默认都被内容撑开
行内元素：
行内元素脱离文档流以后，会变成块元素，特点和块元素一样。
脱离文档流以后，不需要再区分块和行内元素了
高度塌陷
在浮动布局中，父元素的高度默认是被子元素撑开的
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离后，将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失后，其下的元素会自动上移，导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的一个问题，这个问题必须处理
.box1{
}
.box2{
Float:left
}
.box1::after{
Content:’’;
Display:block;
Clear:both
}
<div class=”box1”>
<div class=”box2”></div>
</div>
BFC 块级格式化环境
BFC是一个css中的一个隐含属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
开启BFC后的特点：
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的子元素和父元素外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC
- 设置元素浮动
- 将元素设置为行内块元素
- 将元素的overflow设置为一个飞visible的值
Clear
作用：清除浮动元素对当前元素所产生的影响
可选值：
Left 清除左侧浮动元素对当前元素的影响
Right 清除右侧浮动元素对当前元素的影响
Both 清除两侧中最大影响的那侧
原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其位置不受其它元素的影响
解决高度踏实和外边距重叠样式
.clearfix::before,.clear::after{
Content:’’;
Display:table;
Clear:both;
}
定位
-是一种更加高级的布局手段
-通过定位可以将元素摆放到页面的任何位置
-使用position属性来设置定位
可选值
Static 默认值，元素是静止的没有开启定位
Relataive 开启元素的相对定位
Absolute 开启元素的绝对定位
Fixed 开启元素的固定定位
Sticky 开启元素的粘滞定位
相对定位
-当元素的postion属性设置为relative时则开启了相对定位
相对定位的特点：
- 元素开启相对定位后，如果不设置偏移量元素不会发生任何的变化
- 相对定义是参照于元素在文档流中的位置进行定位的
- 相对定位会提升元素的层级
- 相对定位不会使元素脱离文档流
- 相对定位不会改变元素的性质。块还是块，行内还是行内
偏移量
当元素开启了定位以后，可以通过偏移量来设置元素的位置
Top
Bottom
Left
Right
绝对定位
-当元素的position属性值设置为absolute时，则开启了元素的绝对定位
-绝对定位的特点
- 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
- 开启绝对定位后，元素会从文档流中脱离
- 绝对定位会改变元素的性质，行内变成块，块的高度被内容撑开
- 绝对定位会使元素提升一个层级
- 绝对定位是相对于其包含块进行定位的
包含块
正常情况下：
包含块就是离当前元素最近的祖先块元素
绝对定位的包含块：
离它最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位则根元素就是它的包含块
-html 根元素、初始包含块
固定定位
将元素的postion属性设置为fixed，则开启了元素的固定定位
固定定位也是一种绝对定位，大部分特点和绝对定义一样
唯一不同的固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随着网页的滚动条滚动
粘滞定位
当元素的postion属性设置为sticky时，则开启了元素的粘滞定位
粘滞定位和相对定位特点基本一致，不同点是粘滞定位可以在元素到达某个位置时，将其固定
元素的层级
对于开启了定位元素，可以通过z-index属性来指定元素的层级
需要一个整数作为整数，值越大元素层级越高，元素的层级越高，越优先显示
如果元素的层级一样，则优先显示靠下的元素
祖先的元素的层级，再高也不会盖住后代元素
绝对定位位置
浙公网安备 33010602011771号