CSS
关于CSS而言，好像没有什么规律，所以我本篇博客写的有点乱，而且内容还很少，在我开始用CSS时有遇到两个比较坑的地方，一是浏览器上有margin和padding，有时需要我们先去除间隔，而是在使用inline-block时，得到的结果不是预想的。
一、定义
CSS：层叠样式表，用来美化页面
二、书写位置（即引入方式）
1，内嵌式，写在head标签下的style标签内部
2，外联式，同样写在head标签内部，但是用的是link标签，逻辑是写在外部的CSS文件里的
3，行内式，写在元素的style属性中
三、语法结构
选择器{
属性：值；
}
四、选择器分类
1，标签选择器
div{
color: red;
}
以标签名为选择器名，这样写可以控制所有这类标签的样式
2，类（class）选择器（最常用）
.tt{ color: blue; } <div class="tt">hhhhhhdsd</div> <div class="tt">sdasdasd</div> <p class="tt">dhsdhsjh</p> <a href="#" class="tt">sdsad</a>
.类名为选择器名，会选择整个页面上类名相同的标签，一个标签里可以写多个类
3，id选择器
#ss{ color: blue; } <div id="ss">nihao a </div>
#id名为选择器，根据id找到标签
4，通配符选择器
*{
color: blue;
}
*可以选择所有元素进行样式控制
5，后代选择器（子孙都可以）
div p{ color: blue; } <div> <p> <a href="#">kkk</a> <a href="#">ksas</a> </p> <a href="#">jjj <p>kdlsdk</p></a> </div>
div p用空格隔开，可以控制所有div标签下的所有p标签，选择器用空格隔开，后面的选择器必须要在前面的选择器里有的
6，子代选择器（只有儿子可以）
div>p{ color: blue; } <div> <p> <a href="#">kkk</a> <a href="#">ksas</a> </p> <a href="#">jjj <p>kdlsdk</p> </a> </div>
div>p用‘>’隔开，只会选择div标签下的第一层中p标签，于是a标签的下p标签是不会被选中的
7，毗邻选择器
div+p{ color: red; } <p id="p1">dsdasdada</p> <div>kkkkk</div> <p id="p2">kksdksdk</p> <p id="p3">sdaaddjkjdjj</p>
div+p用‘+’加号隔开，只会选择id为p2的p标签
8，弟弟选择器
div~p{ color: red; } <p id="p1">dsdasdada</p> <div>kkkkk</div> <p id="p2">kksdksdk</p> <p id="p3">sdaaddjkjdjj</p> <span>ssss</span> <a href="#">dhshdhashd</a>
div~p用‘~’隔开，选择的是div标签后面的所有p标签
9，交集选择器
p.p1{ color: brown; } <p>jjjjjjjj</p> <p class="p1">dsdasdada</p> <div>kkkkk</div> <p class="p1">kksdksdk</p> <p class="p1">sdaaddjkjdjj</p> <span>ssss</span> <a href="#" class="p1">dhshdhashd</a>
p.p1连着写在一起，会选择既是p标签又是属于p1类的，所以第一个p标签不满足
10，并集选择器
a,.p1{ color: brown; } <p>jjjjjjjj</p> <p class="p1">dsdasdada</p> <div>kkkkk</div> <p class="p1">kksdksdk</p> <p class="p1">sdaaddjkjdjj</p> <span>ssss</span> <a href="#" class="p1">dhshdhashd</a>
选择器之间以‘，’逗号隔开，会选择满足a标签或者.p1类的
11，伪类选择器
/* 未访问的链接 */控制a标签
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */ 这个用的比较多，当鼠标停留在上面时的样式
a:hover {
color: #FF00FF
}
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
12，伪元素选择器
#将p标签中的文本的第一个字变颜色变大小
p:first-letter {
font-size: 48px;
color: red;
}
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
五、选择器的优先级
我们可以通过不同的选择器来选择标签，如果多个选择器选中了同一标签时，该以那个选择器来渲染标签呢？于是就牵扯到选择器的优先级问题。
1,我们还得有个知识点，当后代没有自己的选择器，会继承父级的样式中的某些属性，比如
div{ color: blue; } <div> aasdasdsad <p> <a href="#">kkkkk</a> <span>dasdas</span> </p> <a href="#">kkdkkdkksk</a> <span>rewrrrreerrre</span> </div>
此时div标签下的所有标签前的文本颜色都会继承div标签的文本颜色。但注意继承的优先级是最小的。color，text—，font-，line-，cursor可以被继承的
例外：
a标签不继承颜色
h标签不继承font-size，font-weight
2,选择器的优先级：继承<通配符<标签选择器<class选择器<id选择器<行内样式<!important
3,选择器权重
在复合选择器中，如何计算选择器权重，只要出现important，优先级永远是最高的，其次是行内样式
行内：1000
id：100
类：10
元素：1
继承：0
把所有的权重相加，但是永不进位
六、元素的显示模式
1，块级元素
display：block
会独自占据一整行，可以设置有效的宽高，子元素默认和父元素一样宽，代表div，h1-h6
2，行内元素
display：inline
一行上可以显示多个，不能设置有效的宽高，其宽高依赖于内容，代表span，strong，em
3，行内块级元素
display：inline-block
一行上可以显示多个，可以设置有效的宽高，代表img，input
我们可以通过display属性来重新设置标签属性
4，display：none和visibility：hidden的区别
两者都有隐藏的作用
visibility：hidden隐藏的元素仍然占据空间，该元素虽然被隐藏了，但仍然会影响布局
display：none隐藏的某个元素不会占据空间，不会影响布局
七、font相关属性
font-style:值 控制字体是否斜体
可选值：normal 正常，italic 斜体，oblique 斜体
font-weight:值 控制字体粗细
可选值：normal 正常，bold 加粗，bolder 更粗，lighter 细体
还可以写数值，100-900间，400相当于normal，700相当于bold
bolder和light会受到字体的现在，一般中文到达bold就是最大，并且一般中文没有细体
font-size:值 控制字体大小
值为数字，后面跟上单位px，网页上的默认为16px
font-family:值 控制字体
值为所有字体类型，比如宋体，楷体。。。。
font连写
font：font-weight font-style font-size font-family
前两个可以省略，前两个可以互换位置，后两个只能固定位置，并且不能省略
八、background相关属性
background-color:值 设置背景颜色
background-image:url（图片的路径） 控制的是背景图片
background-repeat：值 控制背景图片是否重复（平铺）
值可选：no-repeat 不平铺，repeat-y 垂直平铺，repeat-x 水平平铺，repeat 两个方向平铺
background-position:值 控制背景图片的位置
值可选：水平：left center right 垂直：top center bottom
长度赋值：先写x的位移，再写y的位移
background-attachment：值 控制背景图片是否随着滚动条滚动
值可选：scroll 默认的随着滚动条滚动 ， fixed 不滚动
background连写
background：red url（图片路径） no-repeat top center 属性没有顺序要求，都可以省略
九、文本（text）属性
text-align:值 文本的水平对齐方式
值可选：left 左对齐，center 居中对齐，right 右对齐
text-decoration：值 文本修饰
值可选：none 正常，underline 下划线，overline 上划线，line-through 删除线
text-indent：值 文本首行缩进
值为数字加上单位px，单位也可以为em，1em为一个字体大小
十，边框属性
border-style：值 控制边框的样式
值可选：none 无边框，dotted 点状虚线边框，dashed 矩形虚线边框，solid 实线边框
border-weight：值 设置边框宽多少
值为数字加单位px
border-color：值 设置边框颜色
border连写
border：2px solid red;
除了统一设置边框之外，还可以单独为某一边设置边框
border-top-style：值 ，border-top-color：值 ， border-top-weight：值 这是为上边框设置属性，还可以换成right，left，bottom
border-radius：值 用这个属性能实现圆角边框的效果
值可为数字加单位px，当为宽或高的一半时，就为圆形，值还可以为百分数，当为50%时，也为一个圆。两种前提是在正方形下
十一、颜色属性
颜色可以三种表示方式：
1，十六进制值，如#ff0000,前两位表示红色，中间两位表示绿色，最后两位表示蓝色，如#ffffff表示白色，#000000表示黑色
2，用rgb表示，如rgb（255,0,0），第一个参数表示红色，第二个参数表示绿色，第三个参数表示蓝色，每个参数为0-255
3，用颜色名字表示，如red
4，用rgba（255,0,0,0.3），这和rgb差不多，只是多了第四个参数叫透明度，范围是0.0-1.0
opacity属性设置透明度
opacity：值 值为0-1,0为完全透明，1为完全不透明
十二、盒子模型
在css里面，每个标签可以称为一个盒子模型
margin：外边距，用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间距，从视觉上达到相互隔开的目的
padding：内边距，用于控制内容与边框之间的距离
border：边框
content：盒子的内容，显示文本和图像
margin和padding一样，可以为四边同时设置：
margin：2px 四边都是2px
margin：2px 3px 上下为2px，左右为3px
margin：2px 3px 4px 上为2px，左右为3px，下为4px
margin：2px 3px 4px 5px 上为2px，右为3px，下为4px，左为5px
也可以为margin和padding的某一条边单独设置top，bottom，left，right
margin-top：2px
十三、float浮动属性
float可以让块级标签并排在一行，但如果设定了float，浮动框就不在文档的普通流，比如在一个div1里并排放了两个div浮动框，由于浮动框脱离了文本，导致原先的大div1没有了内容，若此时在div1下面加一个div2，给div2加内容，由于div没有内容相当于不存在，
所以div2就会占据div的位置，出现两个浮动框在div2上面的效果，但不是我们想要的结果，这就是float的副作用。如下图
float：值 值可选为left 向左浮动，right 向右浮动，none 默认值，不浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .t1{ width: 200px; height: 200px; float: left; background-color: aqua; } .t2{ width: 300px; height: 200px; float:right; background-color: red; } .t3{ width: 400px; height: 300px; background-color: blue; } .t4{ width: 600px; } </style> </head> <body> <div class="t4"> <div class="t1"></div> <div class="t2"></div> </div> <div class="t3"></div> </body> </html>
解决浮动副作用的方法
1，可以为div1标签设置一个高度，占据位置
2，clear属性
clear属性规定元素的那一侧不允许其他浮动元素
clear：值
值可选：left 在左侧不允许浮动元素，right 在右侧不允许浮动元素，both 左右两侧都不允许，none 允许，inherit 从父元素继承clear属性的值
解决副作用，我们可以在div2标签中加上clear属性，是可以解决问题的，但这种情况下，我们在添加标签时都要判断是否有浮动，很麻烦
所以我们在有浮动的标签之后加上一个标签，内容为空，含有clear属性也可以解决问题
<div class="t1"></div>
<div class="t2"></div> 上面两个为浮动标签
<div class="t5" style="clear: both"></div> 这为解决副作用加的含有clear属性的标签，由于内容为空，也不会占位置
最常用的写法，用伪元素清除法
.clearfix:after{
content: '';
display: block;
clear: both;
}
<div class="t4 clearfix">
<div class="t1"></div>
<div class="t2"></div>
</div>
十四、overflow溢出属性
overflow：值
值可选：visible 内容不会被修剪，会呈现在元素框之外，hidden 内容会被修剪，并且溢出的内容是不可见的，scroll 内容会被修剪，但是浏览器会显示滚动条以便查看溢出的内容，auto 如果内容被修剪，则浏览器会显示滚动条以便查看溢出的内容，
inherit 从父元素继承overflow的值
overflow还可以写成overflow-x（设置水平方向，只出现x轴的滚动条），overflow-y（设置垂直方向，只出现y轴的滚动条）
圆形头像的制作代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; border: 1px solid black; border-radius: 50%; overflow: hidden; } img{ max-width: 100%; } </style> </head> <body> <div> <img src="张钧蜜.png" alt=""> </div> </body> </html>
十五、position定位属性
1，static，默认值，无定位，为标签设置top，left等值都没作用的
2，relative（相对定位）
相对定位是相对于该元素在文档流中的原始位置，在这种情况下，虽然原来的位置没有了内容，但依然占据位置，即占据文档流空间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .t1{ width: 100%; height: 200px; background-color: blue; } .t2{ width: 200px; height: 100px; background-color: aqua; position: relative; top: 50px; left: 100px; } </style> </head> <body> <div class="t1"></div> <div class="t2"></div> </body> </html>
3，absolute（绝对定位）
设置为绝对定位的元素框会从文本流出来，也就不会占据原来的位置，同时也会出现父级塌陷的现象，绝对定位是相对于父级位置来的（父级必须是relative，也就是父级要是相对定位的，父级没有，就找父级的父级），若都没有，那它的位置相对于body
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .t1{ width: 100%; height: 100px; background-color: red; } .t2{ width: 200px; height: 100px; position: relative; top: 20px; left: 300px; background-color:greenyellow; } .t3{ width: 100px; height: 50px; background-color: blue; position: absolute; top: 100px; left: 200px; } .t4{ width:100px; height: 50px; background-color: darkgray; } .t5{ width: 100%; height: 50px; background-color: black; } </style> </head> <body> <div class="t1"></div> <div class="t2"> <div class="t3"></div> <div class="t4"></div> </div> <div class="t5"></div>
4，fixed（固定位置，不管页面怎么滚动，这个元素就固定某个位置）
fixed：元素脱离正常文档流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #t2{ width: 100px; height: 2000px; border:1px solid black; } #t3{ width: 100px; height: 30px; background-color: coral; line-height: 30px; text-align: center; position: fixed; bottom: 200px; right: 40px; } a{ text-decoration: none; } </style> </head> <body> <p id="t1">标题</p> <div id="t2"></div> <div id="t3"><a href="#t1">回到顶部</a></div> </body> </html>
5，z-index属性
z-index设置对象的层叠顺序，一般用在模态对话框上。
我们为层叠的元素设置一个z-index值，值大的会盖住值小的，如果没有设置z-index，写在后面的会压着前面的
z-index：值 值为正整数就行
只有定位的元素才有z-index
从父现象：父级的z-index小了，就算你的z-index再大，也没用的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .t1{ width: 500px; height: 1000px; border:1px black solid; background-color: red; } .t2{ width: 100%; height: 2000px; background-color:rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; z-index: 9; } .t3{ width: 500px; height: 300px; border: 1px red solid; position:fixed; top: 300px; left: 600px; background-color: rgba(255,255,255,0.9); z-index: 10; } </style> </head> <body> <div class="t1">sdgsadgasdgajh</div> <div class="t2"></div> <div class="t3"></div> </body> </html>
