CSS笔记
CSS伪元素样式的继承选择器的优先级像素和百分比颜色单位1.RGB值2.RGBA3.十六进制的RGB值4.HSL值 HSLA值
layout文档流盒模型1.内容区（content）2.边框（border）3.内边距（padding）4.外边距（margin）5.水平布局
CSS
伪元素
伪元素，表示页面中一些特殊的并不真实的存在的元素
伪元素使用 “::” 开头 ::first-letter 表示第一个字母 ::first-line 表示第一行 ::selection 表示选中的内容（比如复制之后用鼠标选中的内容） ::before 元素的前面 ::after 元素的后面 （注：before和after必须结合content属性来使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
font-size: 20px
;
}
p::first-letter{
font-size: 50px
;
}
p::first-line{
background-color: yellow
;
}
p::selection{
background-color: tomato
;
}
div::before{
content:'swhq';
color: tomato
;
}
div::after{
content:'hdgy21gha';
color: tomato
;
}
</style>
</head>
<body>
<div>你好啊哈哈哈哈哈</div>
<p>hw d2gu1d8g82 dvwuqcxbeudyg1y3du99guavwh2gsvg2 dv2y8d1suws1ydyie831d shwvu1y</p>
</body>
</html>
样式的继承
样式的继承，一个元素的样式也会应用到它的后代元素上 注：并不是所有的样式都会被继承，比如背景相关的，边框相关的，定位相关的样式就不会被继承。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color: aqua
;
}
</style>
</head>
<body>
<div>
我是p元素
<br>
<span>我是P的后代</span>
</div>
</body>
</html>
选择器的优先级
内联样式 > id选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承的样式
比较优先级时，需要将所有的选择器的优先级相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
优先级相加后再与其他比较，选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
如果优先级计算后相同，则优先级靠下的样式
可以在某个样式的后边添加 !important,则此时该样式会获得到最高的优先级，超过内联样式（一般不会轻易用）
div#box1{ >>>>优先级相加后比较
}
div,p,span{ >>>>单独比较
}
.d1{
color:red
!important;
}
像素和百分比
像素：不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰百分比：将属性值设置为相对于其父元素属性的百分比em:是相对于元素的字体的大小来计算的，会根据字体的大小而改变，1em = 1 font-size （根据自身）rem:相对于根元素的字体来计算的 （根据根元素html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 300px
;
height: 200px
;
background-color: aqua
;
}
.box2{
width: 50%
;
height: 50%
;
background-color: brown
;
}
</style>
</head>
<body>
<div class=
"box1">
<div class=
"box2">
</div>
</div>
</body>
</html>
颜色单位
1.RGB值
RGB通过三种颜色的不同浓度来调配出不同的颜色R red , G green , B blue每一种颜色的范围在0~225之间语法：RGB（红色，绿色，蓝色）
2.RGBA
就是在rgb的基础上增加了一个a表示不透明度需要四个值，前三个和rgb一样，第四个表示不透明度1 表示完全不透明 ，0 表示完全透明，.5表示半透明
background-color: rgba(12, 36, 253, 0.5
);
3.十六进制的RGB值
语法：#红色绿色蓝色颜色浓度通过00-ff如果颜色两位两位重复的话可以简写 #aabbcc -->> #abc
4.HSL值 HSLA值
H 色相 （0 - 360）S 饱和度，颜色的浓度 （0%-100%）L 亮度，颜色的亮度 （0%-100%）A 不透明度
layout
文档流
网页是一个多层的结构，一层摞着一层，通过css可以分别为每一层来设置样式，作为用户只能看到最顶上一层，这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列对于元素主要有两个状态（在文档流中，不在文档流中）元素在文档流中的特点 -块元素 1.块元素会在页面独占一行（自上向下垂直排列） 2.默认宽度是父元素的全部（会把父元素撑满） 3.默认高度是被内容撑开（子元素） -行内元素 1.行内元素不会独占页面的一行，只占自身的大小 2.行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列 3.行内元素的默认宽度和高度都是被内容撑开
盒模型
css将页面中的所有元素都设置为一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每个盒子都由以下几个部分组成 内容区（content） 内边距（padding） 边框（border） 外边距（margin）
1.内容区（content）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px
;
height: 200px
;
background-color: aqua
;
border-width: 10px
;
border-color:rosybrown
;
border-style:solid
;
}
</style>
</head>
<body>
<div class=
"box1"></div>
</body>
</html>
2.边框（border）
边框的宽度 border-width边框的颜色 border-color边框的样式 border-style
1.
border-width:10px
;默认值一般是3个像素
可以用来指定四个方向的边框的宽度
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
2.border-xxx-width,其中xxx可以是top right bottom left
可以单独指定某个变得宽度
3.border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样，其中颜色默认为黑色
4.border-style 指定边框的样式，同border-width一样也可设置四个边不同的样式，其默认值是none,表示没有边框
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 150px
;
height: 150px
;
background-color: royalblue
;
border-width: 10px 20px 30px 40px
;
border-color: sandybrown red orange greenyellow
;
border-style: solid dotted dashed double
;
}
</style>
</head>
<body>
<div class=
"box1"></div>
</body>
</html>
1.border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
2.除了border以外还有border-xxx,xxx可以是top,right,bottom,left
如：border-top:10px solid red
;
3.控制某条边没有
如：border:10px red solid
;
border-right:none
;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 150px
;
height: 150px
;
background-color: royalblue
;
border: 10px red solid
;
}
</style>
</head>
<body>
<div class=
"box1"></div>
</body>
</html>
3.内边距（padding）
内容区和边框之间的距离是内边框
一共有四个方向的内边框 padding-top padding-right padding-bottom padding-left
padding内边距的简写属性，可以同时制定四个方向的内边距，规则和border-width一样 如padding:10px 20px 30px 40px;
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
一个盒子的可见框的大小，由内容区，内边框，边框共同决定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 100px
;
height: 100px
;
background-color: skyblue
;
border: 5px orange solid
;
padding:18px 20px 25px 30px
;
}
.inner{
width: 100%
;
height: 100%
;
background-color: orangered
;
}
</style>
</head>
<body>
<div class=
"box1">
<div class=
"inner"></div>
</div>
</body>
</html>
4.外边距（margin）
外边距不会影响盒子可见框的大小
会影响盒子的位置 margin-top 上外边距，设置一个正值，元素会向下移动 margin-right 默认情况下设置margin-right不会产生任何效果 margin-bottom 下外边距，设置一个正值，其下边的元素会向下移动 margin-left 左外边距，设置一个正值，元素会向右移动
元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身而设置下和右外边距会移动其他的元素
margin的简写属性，可以同时设置四个方向的外边距，用法和padding一样
margin会影响盒子实际占用空间
5.水平布局
元素水平方向的布局
