本文章详细阐述了CSS3基础知识，带领大家进入万恶的CSS3的世界！！！
如果你能够耐心看完上一篇的HTML5和这一个CSS3基础篇，不仅对接下来的前端进阶学习有很大帮助，而且帮助你的前端学习打下扎实的基础。
如果你对于定位、浮动、css优先级、margin问题这些基本的css3语法还不熟悉，更应该看一看这一篇文章。
山路曲折盘旋，但毕竟朝着顶峰延伸
文章目录
css基础语法
格式：选择器{属性1：值1；属性2：值2}
px：代表像素，就是给这个盒子的大小
%：是根据它父容器的像素来进行百分比的执行，而不是页面的大小
css的注释方式与HTML的方式一致
内联样式与内部样式
内联样式： <p style="border: 1;color:#000;">1111</p>，在HTML标签上添加style属性的
内部样式：<style>
div{
background-color: aliceblue;
}
</style>
在<style>标签内添加的样式，好处是可以复用代码，符合规范标准，尽量让结构与样式分开处理
外部样式
引入一个单独的css文件，需要用link标签，这个标签一般用来引入一些外部的资源，其中有两个属性：
- rel：引入这个资源的类型
- href：引入外部资源的地址
<link rel="stylesheet" href="./css"
或者用 @import url（"./css") //但这种方式比较多问题，尽量不要使用
有兴趣可以看看：https://www.cnblogs.com/my--sunshine/p/6872224.html
颜色表示
有三种方式：
- 单词表示：red、blue、black…
- 十六进制表示法：#000000 -----#ffffff
- rgb三原色表示法：rgb（255，255，255）；
但是第一种比较有局限性，可能有时候会识别不了，而第二、第三就没有
拾色器：可以分析图片、网页的颜色进制，有助于我们设计网页
拾色器下载地址：https://www.baidufe.com/fehelper/index/index.html（我自己设置了一个快捷键打开：ctrl+c）
背景样式
background-color：背景颜色
background-image：背景图片 参数:url背景地址，默认平铺背景图
background-repeat：背景图片的平铺方式
参数：repeat-x x轴平铺
repeat-y y轴平铺
repeat（默认值，x，y都平铺）
no-repeat 不平铺
background-position：背景图片的位置
参数： x y
x：left、center、right
y：top、center、bottom
background-attachment：背景图随滚动条的移动方式
参数：scroll：默认值，背景位置时按照当前位置进行偏移
简单地说：就是滚动条移动，背景图跟着移动
fixed：背景位置是按照浏览器位置进行偏移的
简单地说：滚动条移动，背景图不移动，固定住，直到拉到容器的之外
不平铺：<style>
div {
height: 400px;
width: 500px;
background-color: antiquewhite;
background-image: url("./华硕官网/1.png");
background-position: x;
background-repeat: no-repeat;
}
</style>
平铺：删除这一句background-repeat: no-repeat;效果，会x，y轴平铺，
图片宽高小于父容器宽高，那么就会再次将图片平铺上去，直至到父容器边框，如下图的效果
多背景图
例子1： div {
width: 600px;
height: 500px;
border: 3px red solid;
background: url("网页/top_serach_btn.png") no-repeat 50px 60px, url("网页/mb_log.png") no-repeat;
}
效果图解析：多背景图只要background：url()，url()的格式就可以实现，
注意：第一个图片在最顶层，第二个图片代表在第一个图片的下一层，会被覆盖着，
而之所以第一个图片在下面，没有覆盖上去，是因为我设置了50px与60px，
分别代表距离左边框、和上边框的像素，即margin-left和margin-top的意思
例子2：div {
width: 600px;
height: 500px;
border: 3px red solid;
background: url("网页/top_serach_btn.png") repeat-x, url("网页/mb_log.png") no-repeat;
}
#与上面相比，将第一个图片的两个px去掉，所以第一个图片就在第二个图标上一层，
盖着第二个图片，而且由于第一个图片的宽度小于父容器，
而且我设置了repeat-x，第一个图片会一直向x轴平铺下去
边框样式
border-style：solid（实线） dashed（虚线） dotted（点线） 边框的样式，
若只设置这个样式，颜色和大小都会变成系统默认值
border-width：px和%，边框的大小
border-color：red、十六进制、rgb，边框的颜色
若只对一条进行设置：border-right（所需要的设置的边）-style，其它样式也一样
例子：实现边框三角形
<style>
div {
width: 0px;
height: 0px;
border-right-style: solid;
border-right-width: 50px;
border-right-color: black;
border-bottom-style: solid;
border-bottom-width: 50px;
border-bottom-color: transparent;
border-left-style: solid;
border-left-width: 50px;
border-left-color: transparent;
border-top-style: solid;
border-top-width: 50px;
border-top-color: transparent;//transparent---代表透明颜色
}
</style>
设置四条边框，把盒子的高度和宽度都设为0，那么边框线里面的横行就没了
然后再将其它边颜色设置为透明就可以了
字体样式
font-family：宋体 ，华文宋体；
//设置多个字体，若无前面的字体，则会默认设置后面的字体，设置多个字体有助于适应更多的设备
并且若设置英文字体 times New Roman需要加上引号，即：‘times New Roman’，
因为空格需要加上引号，表明这只是一种字体
字体大小与粗细
font-size：px，文字大小，默认为16px
font-weight：normal（正常）、bold（加粗）
或者number（100-900，其中100-500表示正常，600-900表示加粗,字体粗细)
font-style:normal(正常)、italic（斜体）、oblique（斜体）字体样式
一般斜体是用italic，而oblique比较少用
区别：italic：带有倾斜字体的文字才可以设置倾斜
oblique：不需要带有倾斜字体的文字的也可以设置倾斜
而之所以oblique用的比较少，是因为没有倾斜字体的文字去设置倾斜出来的效果比较不好看
color：red、十六进制、rgb，文字颜色
浏览器字体问题
由于浏览器字体默认显示为12px为最小字体，当style="font-size=10px"的时候，字体也会显示为12px
所以我们需要通过可以通过transform: scale()样式进行字体修改，如下所示：
<div id="About">
<!--字体大小为16px-->
<p class="size-16">你好世界！</p>
<!--字体大小为12px-->
<p class="size-12">你好世界！</p>
<!--字体大小为8px-->
<p class="size-08">你好世界！</p>
</div>
<style scoped>
.size-16 {
font-size: 16px;
}
.size-12 {
font-size: 16px;
transform: scale(0.75); //通过 transform属性实现比例缩放，16*0.75为12px
}
.size-08 {
font-size: 16px;
transform: scale(0.5); //通过 transform属性实现比例缩放，16*0.5为8px
}
</style>
段落样式
text-decoration：underline（下划线）、line-through（删除线）、
overline（上划线）、none（不装饰），文本装饰
若要多个装饰，则text-decoration：underline line-through；空一个格即可
text-transform：lowercase（小写）、uppercase（大写）、
capitalize（首字母大写），文字大小写，针对英文的
text-indent：px，em；首行缩进
em：是相对单位，1em永远跟字体大小一样，但如果中文段落混入了一些英文单词，
那这样设置2em还是会对不齐的
text-align：left、right、center、justify（两端对齐），文本对齐方式
line-height：number（px）和scale（比例值，1代表与文字大小一样），行高
行高=上边距+字体大小+下边距，所以行高不是一个固定值，随着字体大小而进行变化
letter-spacing：px，定义字间距
word-spacing：px，定义词间距，针对英文单词
word-break:break-all（非常强烈）;和word-warp：break-word;（不是很强烈，会产生空白区）
这两个样式是针对英文单词或者数字多出容器的时候，进行折行的一个操作
例子
例子1：<style>
p{
text-decoration: underline line-through;
}
</style>
例子2：<style>
p {
width: 300px;
text-indent: 2em;
text-align: justify;//两端是对齐，所以中间有些间隙可能会比较大一点
}
</style>
例子3：<style>
p {
width: 300px;
text-indent: 2em;
text-align: justify;
line-height: 2;
}
</style>
//灰色的部分则代表字体的行高
例子4:<style>
#p1 {
width: 300px;
text-indent: 2em;
text-align: justify;
letter-spacing: 20px;
}
#p2 {
width: 300px;
text-indent: 2em;
text-align: justify;
word-spacing: 10px;
}
</style>
例子5：<p id="p3">Ilikechineseandyoudsfsdsddfsdffddf</p>
#p3 {
width: 200px;
word-break: break-all;
}//而若是选择word-warp，在前面有单词的情况下，可能会空出一行
css复合样式
单一样式：一个css属性只控制一种样式
复合样式：一个css属性控制多种样式；复合样式是通过空格方式实现的
复合样式有的不需要考虑顺序
例如：background：red url（） repeat 0 0；
border：2px blue solid；
而有些却需要顺序font字体，不可以乱顺序
并且尽量单一样式与混合样式不要混写，
若非要混写，则先写复合再写单一样式，
这是因为复合样式代表将这个css属性的所有属于它的样式都写了上去。
先写单一样式再写复合样式，则后面的复合样式会将之前的单一样式覆盖掉；
而先写复合样式再写单一样式，则相当与补充
例子：比如若这样写，背景颜色是显现不出来的
div {
width: 300px;
height: 300px;
background-color: red;
background: repeat center center;
}
但若这样写，背景颜色则可以显现出来
div {
width: 300px;
height: 300px;
background: repeat center center;
background-color: red;
}
css选择器
id选择器
css：#elem{}
html：id=“elem”
快捷键：div#名称+tab键
注意：1、ID是唯一值，页面上只能出现一次
2、命名规范：由字母、下划线、中划线、数字组成（但第一个不能由为数字）
小例子
#menu ul li{}：代表在id=menu之下的ul的所有li
#menu ul{}：代表id=menu之下的所有ul
#menu li{}：代表id=menu之下的所有li
class选择器
css：.elem{}
html：class=“elem”
注意：1、class是可以复用的
2、可以添加多个class样式，例子：<p class="test context"></p>，
空格一个再继续写就可以了
3、多个样式时，优先级是根据css决定的，而不是class属性的顺序，后面会讲到
4、也可以选择标签+类的写法，例子：p.box{}，后面也会讲到
标签选择器（元素选择器）
css：div
html：<div>
使用场景：1、去掉某些标签默认样式
2、可以解决复杂的样式
群组选择器
css：div，p，span{}
可以通过逗号的方式，给多个不同的选择器添加css
例子： div,
#box,
.search {
width: 100px;
height: 100px;
color: blue;
border: 1px solid red;
}
<div>1235</div>
<div id="box">459</div>
<div class="search">789</div>
通配选择器
*{}:所有的选择器都添加此括号内的样式，慎用
使用场景： 1、去掉标签默认属性
例子：*{
margin：0 ；
}
层次选择器
后代：M N {} 空格隔开，与群组相似，就是说孩子的孩子也算是
比如： <div>
<p>
<div>
<p>I like chinese and you</p>
</div>
</p>
</div>
这样子最里面的p标签也能获得样式，而若写成父子则不可以
父子：M>N {}
兄弟：M~N {}当前M下面的所有标签，在M上面的标签不行,只能在M标签下面的兄弟标签才可以
相邻：M+N{}当前M相邻的标签
例子1：父子选择器
div>p {
width: 300px;
height: 300px;
background: repeat center center;
background-color: red;
}
<div>
<p>I like chinese and you</p>
</div>
属性选择器
div[attr]{}
*=部分匹配 ^=起始匹配 $=结束匹配 =完全匹配 [][][]组合匹配（[]里面的元素都有才会执行样式
例子1://完全匹配，只会class=search才会有背景色，效果看图1
div[class=search] {
width: 100px;
height: 100px;
background-color: aqua;
}
<div class="search"></div>
<div class="search-top"></div>
//部分匹配，则两个div都会有背景色，效果看图2
div[class*=search] {
width: 100px;
height: 100px;
background-color: aqua;
}
例子2： div[class][id] {
width: 100px;
height: 100px;
background-color: aqua;
}
<div class="search" id="box"></div>
<div class="search-top"></div>
//需要具有class与id两个选择器才会执行样式，效果看图
伪类选择器
css伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上时，用伪类添加
格式：M:伪类{} 主要有 ：link（访问前样式，只能对于a标签有用）、
：visited（访问后样式，只能对于a标签有用）、
：hover（鼠标移入样式）、：active（鼠标点击样式）
可以四个一起使用，注意顺序：L V H A
下面的为伪元素选择器
:after 通过伪类方式在元素后面添加一段文本内容，使用content属性
:before 通过伪类方式在元素前面添加一段文本内容，使用content属性
针对表单元素 :checked（复选框点击后出现的样式）、
：disable（复选框不点击才出现的样式）、：focus（文本框出现光标后出现的样式）
例子1：div {
width: 300px;
height: 300px;
background-color: red;
}
div:hover {
background-color: antiquewhite;
}
<a href="">
<div>I like chinese and you</div>
</a>
//图一为鼠标未移入div之前，图二未鼠标移入之后
例子2： a:link {
color: black;
}
a:visited {
color: cadetblue;
}
a:hover {
color: antiquewhite;
}
a:active {
color: aqua;
}
注意顺序，不然很容易没效果，图1为鼠标触碰效果。
图2为点击效果，松开鼠标就会变成图3，图3为为点击之后代表访问之后的效果
另外一种
a:first-child
a:last-child
a:nth-child(n)
n:0,1,2,3...
偶数：2n even
奇数：2n-1 odd
前五个:-n+5
也是一样加在标签的后面
格式li:first-child{}
注意：一般用在li标签里
css样式继承
什么是继承，就是在父容器设置了样式，子容器也能够拥有
文字相关的可以被继承，布局相关的不可以被继承（默认不能继承），
但是增加一个继承属性就可以被继承：inherit
//若布局没有被继承，看图1
<div>
<p>I like chinese and you</p>
</div>
div {
border: 6px solid;
width: 300px;
height: 300px;
background: repeat center center;
background-color: red;
}
//但加上了就能够被继承，看图2
p{
border：inhreit；
}
css优先级
五个原则
五个原则：1、设置相同样式时，后面的优先级更高，但尽量不要重复设置
2、内部样式与外部样式优先级相同，设置了相同样式，后面的优先级更高
3、单一样式优先级：内联样式>id>class>tag>*>继承
内部样式：<style></style>
外部样式:<link rel="stylesheet" href="./css">
内联样式:<p style=""></p>
4、标签+类>单类优先级
p.box{}>.box{}
5、群组选择器与单一选择器优先级相同，后写优先级更高
群组：div，p{color：red；}
单一：div{color：blue；}
由于单一选择器在后面，则div字体颜色会为蓝色
//提高优先级！important，但是一般不用，容易出错
格式：div{color:red !improtant;}
权重计算
或者通过权重去计算：
1、!important，加在样式属性值后，优先级最高，权重值：10000
2、内联样式，如：<div style=""></div>，权重值：1000
3、ID选择器，如：#app，权重值：100
4、类选择器，伪类选择器和属性选择器，如： .content、:hover、a[href]，权重值：10
5、标签选择器和伪元素选择器，如：div、p、:first-line、:before，权重值：1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~），权重值：0
注意：但不是说11个权重为1的就可以大于一个权重为10的标签，这是不对的
总结
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符
例子
例子1：.search {
color: antiquewhite;
}
div.search {
color: black;
}
<div class="search">789</div>
//标签+类>类的优先级
css盒子模型
外边距margin与内边距padding
盒子组成由内向外：context（物品，属于内容区域，由width和height组成）
->padding（填充物，内边距px，若要针对某一个方向：padding-top（方向）
->border（包装盒、边框）
->margin（盒子与盒子之间的距离，外边距px，若要针对某一个方向：margin-top（方向）
margin和padding写两个值的时候为：上下px，左右px
margin和padding写三个值的时候为：上px，左右px，下px
margin和padding写四个值的时候为：上px，右px，下px，左px（顺时针）
注意的点：
- 背景颜色时填充到margin以内的区域，即超过内容区域的
- 文字这些全在content区域
- padding不能出现负值，而margin可以为负值，代表盒子与盒子会重合在一起
box-sizing
意思为盒子的尺寸，可以改变盒子的展示形态，取值content-box（默认）|border-box
默认值代表：width、height=content，即宽度和高度构成盒子的内容
border-box代表：width、height=content+padding+border，
即宽度和高度构成盒子内容部分+内边距+边框
而这有什么用呢？
- 不用再去计算一些值，比如想要一个盒子宽度为200px，
- 但是加上你的边框和内边距就超过200px了，那就要再去重新计算你的宽度，
- 而使用border-box则会帮你计算好
- 解决一些百分比的问题，比如一个盒子宽度你设置了页面50%的大小，
- 但是你觉得内容部分右移30px比较对齐和好看，
- 直接padding:30px会出现%换算，可能会出现错误
例子： 一开始没加整个盒子就不止200px了，效果图看图1、2
.search {
width: 200px;
height: 100px;
background: antiquewhite;
border: 5px red solid;
padding: 30px;
}
加上之后，整个盒子才为200px，可以减少我们的计算，效果图看图3、4
box-sizing: border-box;
margin问题
margin叠加
当给两个盒子同时添加上下外边距的时候，就会出现叠加问题，
而这个问题只有上下外边距才会出现，左右则无。
出现这个问题之后会取上下外边距中较大的值作为叠加后的值
例子： .search {
width: 200px;
height: 50px;
background: antiquewhite;
border: 5px red solid;
padding: 30px;
margin-bottom: 20px;
}
.box {
width: 200px;
height: 50px;
background: antiquewhite;
border: 5px red solid;
padding: 30px;
margin-top: 20px;
}
//本来上面的已经与下面的盒子距离20px，
但在下面盒子再加margin-top之后却距离没有变大，仍为20px，看图1，
而图2为上下距离为40px，这就是margin叠加问题
解决方法：1、想办法只给一个容器加间距
2、BFC规范（进阶部分会说）
margin传递问题
出现在嵌套的结构中，只是针对margin-top问题
例子：.box {
width: 200px;
height: 100px;
background-color: blue;
}
.box1 {
width: 200px;
height: 50px;
background-color: coral;
margin-top: 50px;//图一是没有添加的效果图，在添加之后，
//box1确实向下移动了，但box也向下移动了40px，这就是传递问题
}
解决方法:1、给父容器加边框
2、将子容器的margin换成父容器的padding，并要调整父容器的width和height
3、BFC规范
图1：
图2：
margin自适应居中
margin-left：auto；会使盒子往去到最右边，同理margin-right：auto；会使盒子往去到最左边
而两个一起使用，则盒子会居中，或者margin：0 auto 0 auto；或者margin：0 auto；
而上下自适应不能用这种方法，毕竟高度会随设计者的设计而增加，而且设计时下面的margin也会影响，但后面会讲到其它方法实现
- 块元素通过这种方法都可以实现盒子在页面宽度居中对齐
- 行内元素可能会有一些偏差
width、height不设置
width、height不设置对盒子有一定的影响：当父容器已经有宽度和高度之后，
会自动计算子容器的大小，减少代码量
比如：一开始设置父容器和子容器的宽度，但子容器设置了边框和padding之后，
会使子容器超出父容器范围，但不设置子容器的宽度和高度却不会
例子：.box {
width: 200px;
height: 100px;
background-color: blue;
}
.box1 {
width: 200px;
height: 50px;
background-color: coral;
padding-left: 10px;
border-right: 6px red solid;
}
<div class="box">
<div class="box1">
758
</div>
</div>
//设置了子容器的高度就会超出范围，但不设置则不会
标签分类
类型分类
block(块)：div、p、ul、ol、li、h1（标题都算）、form、hr（水平分割线...
作用：1、独占一行
2、支持所有的样式
3、不写宽的时候，跟父元素的宽一样
4、所占区域是一个矩型
inline(内联)：span、a、em、strong、img...
作用：1、内联标签是挨在一起的，不独占一行
2、有些样式不支持，例如:width、height、margin（只支持margin-left，其它都不支持）、
padding-right
3、宽度、高度由内容决定，若为文字，则文字大小和多少文字决定它的宽度，
行高决定它的宽度（但img这种特殊的可以支持width和height）
4、所占区域不一定是矩阵，因为在一行放不下的时候，会换行，这样出来的图案就不是矩形
5、内联标签之间会有空隙，原因事换行产生的，有两种解决方法：
（1）不换行，例如：<span></span><a></a>两个内联紧靠在一起就不会有空隙
（2）在它的父容器加上font-size:0; 而子容器重新设置字体大小
inline-block(内联块)：input、select...
作用：1、挨在一起，不独占一行，但支持宽高
2、支持样式
3、所占区域为矩形，但标签之间有空隙
例子1：span {
width: 500px;
height: 200px;
background-color: antiquewhite;
}
<span></span>//若写入文字，则不会出现效果，因为内联标签是靠内容而决定它的大小的
例子2：<span>123</span>
<span>456</span>
body {
font-size: 0;
}//由于这一个span标签的父容器为body，故设置body
span {
background-color: antiquewhite;
font-size: 16px;
}
按显示分类
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
img、input...
非替换元素：将内容直接告诉浏览器，将其显示出来
div、h1、p、span...
可能还不是很懂，简单说明一下，替换元素就是只依赖标签还不能将内容（文字、图片等等）显示出来，
比如：<img src="" alt="">若不写src这一个图片的路径的属性，图片是显示不出来的
而非替换元素只能依靠标签就可以将其内容显示出来，
比如<p>122</p>不需要添加什么属性都可以将内容122显示出来
按内容
Flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
（详情：https://www.w3.org/TR/html5/dom.html）
display显示框类型
display:block;//让区域显示为块元素
display:inline;//让区域显示为内联元素
display:inline-block;//让区域显示为内联块，前面按类型分有讲
display:none;//在页面上不显示，看不到标签的区域和内容
display:none;与visibility:hidden的区别：
前面的是不占空间的隐藏，隐藏了，这个标签就不占空间，下面的标签可以往上移；
而后面的是占空间的隐藏
例子： span {
background-color: antiquewhite;
font-size: 16px;
display: block;
}
<span>123</span>
<span>456</span>//本来span是让它们都在一行显示，改变成块元素之后就独占一行了
标签嵌套规范
好像ul、li；dl、dt、dd；table、tr、td；是一定要一起使用的
（1）块能够嵌套内联标签
比如： <div>
<span></span>
<a></a>
</div>
(2)块不一定能够嵌套块标签
<div>
<div></div>
</div>
但有一种特殊情况：
错误：<p>
<div></div>
</p> 段落里面不能再嵌套标签
（3） 内联不能够嵌套块：
错误：<span>
<div></div>
</span>
但也有一种特殊情况：<a>
<div></div>
</a>
a标签可以嵌套块元素
overflow溢出隐藏
四个值：visible可显示的，默认值
hidden：隐藏，就将超出盒子的部分隐藏起来
scroll：如果有超出的部分，就加一个滑动条，滑动整个盒子
auto：自动，如果没有超出则没有效果，若x轴超出盒子范围，则x轴加滚动条，
同理y轴也一样，若两个都超出则，两个轴都有滚动条
x轴、y轴：分别针对x、y轴的操作，值和上面一样
overflow-x
overflow-y
例子：图1是没有设置overflow，为默认值的时候
图2是overflow为auto值的时候，由于高度不够，则y轴加了滚动条
图3是overflow为scroll的时候，x、y轴都有滚动条
透明度与手势
opacity：0（透明） ~1（不透明），0.5（半透明）
注意：透明了也会占空间，并且盒子里面的子内容也会跟随着透明
rgba：0（透明）~1（不透明）
注意：可以让指定的样式透明，而不影响其它样式
cursor：手势，鼠标光标形状
default：默认为箭头
自定义手势：准备好图片：.cur、.ico的图片格式
cursor:url(""),auto;
例子1：div {
width: 150px;
height: 100px;
background-color: antiquewhite;
opacity: 0.5;
cursor: pointer;//鼠标形状为手掌
}
<div>
溢出隐藏
</div>
例子2：div {
width: 150px;
height: 100px;
background-color: rgba(255, 0, 0, 0.2);//不改变字的透明度
cursor: pointer;
}
最大、最小宽高
min-width：40px（相当于width>=40px)，max-width：500px（相当于width<=500px),
这让子可以根据盒子内容自动调整大小，比如min-width：40px，盒子里面内容多的时候就大于40px，
内容少的时候就为40px
min-height 、max-height也是一样
%单位，是根据父容器的大小来进行百分比运算的，如果父容器没有设置大小，
则子容器%百分比也是没有大小的，就算祖先容器有大小也没用
一个容器适应屏幕的高：容器：height：100%；--->继承于 body:100%
(那么这个body也要100%才能够符合屏幕) ------>继承于html：100%（即这个页面的100%）
所以一般要写：html，body{height：100%；}
例子：div {
width: 150px;
min-height: 20px;
background-color: rgba(255, 0, 0, 0.2);
cursor: pointer;
}
//两张图都是同一段代码，当内容变多则高度也随之改变了
css默认样式
没有默认样式的标签：div，span
具有默认样式的标签（即不用写css，它都自带这种样式）：
body ->margin：8px；
h1-> margin：上下21.44px
font-weight：bold
p-> margin :上下16px；
ul->margin :上下16px； padding：左 40px；
默认点： list-style：disc；
a-> text-decoration：underline；（下划线）
css重置样式
去掉标签的默认样式，因为有些标签的默认样式不美观，重复的写代码删除过于繁琐，故可以使用通配选择器的方式去除掉
例子1：*{
margin:0;
padding:0;
}
将标签自带的margin和padding样式去掉，当我们需要设置的时候，
就使用比通配选择器更高等级的选择器加上这个样式就可以了
例子2：a{
text-decoration：none；
}
由于a标签自带下划线和颜色，看起来比较不美观，而如果每次都去设置这一个样式就比较繁琐，
所以就可以提前更改好这个a标签的默认样式就好了
例子3：img{
display：block；
}
由于图片与容器的底部是有一些空隙，这是由于内联标签的对齐方式是按照文字基线对齐的，
而不是文字底线对齐
而更改这一个小缺陷，有两种方式：
（1）css样式{vertical-align：baseline}改变对齐方式
(2)将其设置为块元素，块元素就不会出现这种错误
代码：<div>
<img src="./网页/201911210847.jpg">
</div>
div {
border: 1px red solid;
}
#可以看到没有设置之前会有一个小小的空隙
ul{
list-style：none；把默认的点给去掉
}
float浮动
文档流：文档中可显示对象在排列时所占用的位置，即写完结构时的排列方式
float特性：元素加了浮动后，会脱离文档流，提升了半层层级，向着指定方向移动，直到遇到父元素的边界或另一个浮动元素停止，不占据空间
取值为：right、left、none
浮：漂浮起来脱离文档流，动：朝着指定方向移动
比较难懂，可以通过例子来理解一下：
当没有设置浮动的时候为图1，当代码加上box2加上浮动效果为图2
.box1 {
width: 200px;
height: 100px;
background-color: antiquewhite;
}
.box2 {
width: 200px;
height: 100px;
float：left；
background-color: aquamarine;
}
.box3 {
width: 200px;
height: 100px;
background-color: brown;
}
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
#可以看到box3的背景色消失了，是因为box2加了浮动，就不在占父容器的空间，
不在跟随原来的排列方式，box3就上移了，被box2所挡住了，这就是所谓的提高了半层层级，
可以挡住box3的css样式
我们也可以看到box3的文字没有上移，这是因为这是因为文字内容的层级更高一些，
所以box2挡不住这一个，但内容插入不进去，
大概比如一下：box2加了浮动为2，box3则为1，
故高了一级可以被覆盖，但文字为1.5，才高0.5级时不能被覆盖的
图1：
图2：
特点和用处
- 只会影响后面的元素，比如上面的例子，box2的浮动只影响到了box3，对box1没有影响
- 内容默认提高半层，所以上面的文字没有上移
- 默认宽根据内容决定，一般来说块元素时跟随父容器的的宽，但加了浮动之后会根据内容的长度来调整宽度，可以去写一个div例子来看一看
- float可以实现换行排列，本来块元素都是占一行的，加了浮动之后会根据顺序来进行一行排列，放不下就换行
- 主要给块元素添加，因为比较多的操作性对于父容器，但也可以对内联元素进行操作
例子：.box {
width: 100px;
height: 250px;
border: 5px red solid;
}
.box1 {
width: 50px;
height: 100px;
float: left;
background-color: antiquewhite;
}
.box2 {
width: 50px;
height: 100px;
float: left;
background-color: aquamarine;
}
.box3 {
width: 50px;
height: 100px;
float: left;
background-color: brown;
}
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
清除浮动
上下排列
clear属性，表示清除浮动，值有left、right、both（左和右都清楚，一般直接设置这一个）
注意：clear只能操作块标签，对内联标签不起作用，并且要在同一个父容器下的标签才有用
例子理解：
例子1：box2清除了box1浮动的影响，没有被覆盖，但并没有改变box1的层级，
它仍为2，而box2处于文档流，为1
.box1 {
width: 50px;
height: 100px;
float: left;
background-color: antiquewhite;
}
.box2 {
width: 50px;
height: 100px;
clear: both;
background-color: aquamarine;
}
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
嵌套关系
当为这种嵌套关系的时候，就需要其它方式解决，因为clear只能解决同一父容器上下排列，
如果不解决box1的浮动，那么box则没有高度，可看图
.box {
width: 100px;
border: 5px red solid;
}
.box1 {
width: 50px;
height: 100px;
float: left;
background-color: antiquewhite;
}
<div class="box">
<div class="box1">box1</div>
</div>
1111
解决方法：
-
固定宽高：将父容器设置高度和宽度，但是不推荐，因为无法得到自适应的效果
-
父元素也设置浮动：但是也不推荐，毕竟父容器浮动也会影响后面的元素
-
overflow：hidden;在父容器上加上这一个，但是也不推荐，毕竟这一个是将子元素的溢出隐藏起来，如果子元素想要溢出则没有办法
-
display：inline-block；在父容器加上这一个，也是不推荐，设置之后，父容器会影响后面的元素，效果如下：后面的字不能够很好排列，上移了一个高度
- 设置空标签，也是不太推荐，因为比较繁琐，多加了一个标签
.box1 {
width: 50px;
height: 100px;
float: left;
background-color: antiquewhite;
}
.box2 {
clear: both;
}
<div class="box">
<div class="box1">box1</div>
<div class="box2"></div>
</div>
1111
这样子的设置可以解决父容器的宽高问题，并且后面的元素没有影响到，就是比较麻烦
- 使用after伪类，推荐这一个方法，属于空标签的加强版，在父容器上加上after伪类，各公司都是用这种方法
#fu {
width: 100px;
border: 5px red solid;
}
.box::after {
content: "";
display: block;
//之所以要加上这一个是因为content这个内容相当于与box1为上下排列，
//所以动用clear可以清除掉浮动，但是由于content属于内联元素，
//所以要将其改变为块元素才可以
clear: both;
}
.box1 {
width: 50px;
height: 100px;
float: left;
background-color: antiquewhite;
}
<div class="box" id="fu">
<div class="box1">box1</div>
</div>
1111
注意：父容器要设置多一个id选择器，宽度和边框写在id选择器里面，
不能够同时写在class选择器里面，不然会出错
浮动练习
需要答案可以在下方评论
定位
css中的position属性用于指定一个元素在文档中的定位方式。top、left、right、bottom属性决定了该元素的最终位置
position的取值有static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（黏性定位）
relative相对定位
有四个特性：
- 如果没有定义偏移量，对元素本身没有任何影响
- 不使元素脱离文档流
- 不影响其它元素的布局
- relative是相对于当前元素自身进行偏移的，top、left、right、bottom就是表示相对自身的上左下右偏移多少，即偏移量
通过例子来认识一下：
图1代表没有加上偏移值的情况，可知是对本身box2这一个盒子是没有任何影响的
图2代表加上了left：100px的情况，要注意这一个是代表向右移动100px，即距离左边100px的意思
图3是在图2基础上加上了top：50px，可知是对box3没有影响的，
如果使用margin-top，则box3这一个盒子也会向下移动50px，
所以使用这一个相对定位的好处就在这里，不会影响其它元素的布局
#box1 {
width: 50px;
height: 50px;
background-color: antiquewhite;
}
#box2 {
width: 50px;
height: 50px;
background-color: red;
position: relative;
left: 100px;
top：50px；
}
#box3 {
width: 50px;
height: 50px;
background-color: rosybrown;
}
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
图1：
图2：
图3：
absolute绝对定位
具有四个特性：
- 使元素完全脱离文档流
- 使内联元素支持宽高（让其具备块的特性，并不是所有属性都能拥有）
- 使块元素默认宽根据内容决定（让其具备内联的特性）
- 如果添加定位（绝对、相对、固定其中一种）在祖先元素上，那么它会根据这一个祖先元素来进行偏移，如果没有添加定位元素的话，则相对于整个文档进行偏移，即可视的整个页面进行偏移
通过一些例子来理解：
例子1：
可知道加了position: absolute;之后，box1脱离了文档流，
才使box2可以上移开了，因为脱离了文档流就不占父容器的空间了，
不清楚可以看一下前面的笔记
#box1 {
width: 50px;
height: 50px;
margin-left: 100px;
background-color: antiquewhite;
position: absolute;
}
#box2 {
width: 50px;
height: 50px;
background-color: red;
}
<div id="box1"></div>
<div id="box2">123</div>
例子2
本来内联元素是无法设置宽高的，但是设置了绝对定位就可以给内联元素加上宽高
（但注意的是并不是所有的块元素的属性都可以拥有）
#box1 {
width: 50px;
height: 50px;
background-color: antiquewhite;
position: absolute;
}
<span id="box1">12345</span>
例子3
可以看到本来div在没有设置宽的时候是跟随父元素默认宽的，即body宽度，
一个是整一行屏幕的宽度，但是设置了绝对定位之后就跟随内容的大小来决定默认的宽度
（注意是没有设置宽度的时候）
#box1 {
background-color: antiquewhite;
position: absolute;
}
<div id="box1">1446443</div>
例子4
图1为一开始没有设置绝对定位的偏移值的时候是跟随box1移动的
图2是设置了top和left的偏移值的时候，但此时box2已经不跟随box1的移动，
而是在网页最左边和上边，但是我们设置都是为0px，为什么不是在原来的位置呢？
这是因为绝对定位box2跟随的偏移的点不在box1当中，并不是由box1所决定，
而是整个文档，即这一个网页的位置，box2距离网页top：0和left：0，
那不就是在网页最上边和最左边的位置嘛，但注意如果设置为bottom：0，
但是页面很大，那box2这一个盒子不是在最下面，
而是在我们的可视范围的最下面（即打开一个网页，我们能看到网页的最下面），可看图3
但只要我们在box1加上相对定位、绝对定位、固定定位的其中一种，
那么box2的移动就会根据box1在进行移动，但注意一定要是box2的祖先元素或者父元素，
如果是兄弟元素是不行的，效果看图4
(并且没有祖先元素或父元素添加定位的话，那就会根据网页来进行偏移)
#box1 {
width: 200px;
height: 150px;
margin: 200px 0px 0px 100px;
border: 3px red solid;
position: absolute;
}
#box2 {
width: 50px;
height: 50px;
background-color: antiquewhite;
position: absolute;
top: 0;
left: 0;
}
<div id="box1">
<div id="box2"></div>
</div>
fixed固定定位
四个特性：
- 使元素完全脱离文档流
- 使内联元素支持宽高（让其具备块的特性，并不是所有属性都能拥有）
- 使块元素默认宽根据内容决定（让其具备内联的特性）
- 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
由于前面三个与绝对定位一样，就不多做解释了，直接看第四个点
由效果图可以，看出无论无论滚动条怎么拉动，box2仍然在页面的最右边和最底部的位置，
不会受到影响，我们通过这一个特性可以做这些小功能：固定窗口、底部回跳顶部的按钮
注意：就算父元素和祖先元素加了定位，固定定位仍然是相对于浏览器窗口进行偏移的，
这是与绝对定位不一样的地方
#box2 {
width: 50px;
height: 50px;
background-color: antiquewhite;
position: fixed;
bottom: 0;
right: 0;
}
sticky黏性定位
在指定位置，进行黏性操作，即到某个位置就不动了
有几个注意的点：
- 只加 position: sticky;这一个是没有任何效果的，要加上偏移值
- top: 0代表会在滚动条拉动的时候，不会消失，会留在页面的0px处一直停留，直到父容器也被滚动条拉走了，那么这个box2盒子也会消失掉，如果它的父容器是body，那么就不会消失了，因为body是整个页面，这个父容器不会被滚动条拉走，box2就能一直留在页面的最顶部
- 这一般可以用来做下拉的效果
#box2 {
width: 50px;
height: 50px;
margin-top: 500px;
background-color: antiquewhite;
position: sticky;
top: 0;
}
<div id="box2">
</div>
可以自己去查看效果，这个不会太好截图
z-index定位层级
注意：是针对设置了定位的元素
- 默认层级为0
例子1：图1为都没有设置z-index，当两个样式都没设置层级时，默认后面的更大，
图2为设置box1设置了z-index设置之后，box1覆盖box2，
但注意直接加是没有效果的，需要加上定位才可以设置成功，毕竟这是定位层级
#box1 {
width: 50px;
height: 50px;
background-color: aquamarine;
position: absolute;
z-index: 1;
}
#box2 {
width: 50px;
height: 50px;
background-color: antiquewhite;
position: absolute;
left: 20px;
top: 30px;
}
<div id="box1"></div>
<div id="box2"></div>
- 嵌套时的层级问题
由代码和效果图可知，就算子元素box3设置z-index: 2;
但是这种嵌套情况时比较的是父元素的层级即同等级比较，
所以在box1和box2都没有设置的时候，默认后面层级更大，
所以box2在最上面，而子元素优先级比父元素更高，故box3在第二层，box1在最下面
#box1 {
width: 50px;
height: 50px;
background-color: aquamarine;
position: absolute;
}
#box2 {
width: 50px;
height: 50px;
background-color: antiquewhite;
position: absolute;
left: 20px;
top: 30px;
z-index: 2;
}
#box3 {
width: 50px;
height: 50px;
background-color: blueviolet;
position: absolute;
left: 10px;
top: 10px;
}
<div id="box1">
<div id="box3"></div>
</div>
<div id="box2"></div>
css省略号
- 必须给盒子一个宽度width
- 不让内容折行，white-space：nowarp
- 隐藏溢出的内容，overflow：hidden
- 添加省略号，text-overflow：ellipsis；
div {
border: 1px red solid;
width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div>ddfsdsdfsdsfgdgsdgsdsgsd</div>
圆角边框
通过border-radius:（填入px或%），来进行圆角设置，填入像素代表圆的半径，是通过这个与背景相切而得到的圆角，如果要将背景变为一个圆，则设置为高度50%
border-radius：上左、上右、下右、下左（四个值的时候）
左上右下、右上左下（两个值的时候）
上下左右（一个值的时候，代表圆的半径）
border-radius：20px /50px，代表椭圆与背景的盒子相切，20px为x，50px为y得到的椭圆
如果想要形成一个上半圆，可以设置为border-radius：盒子宽度 盒子宽度 0 0，并且高度为盒子宽度一半，而下半圆则相反
div {
border: 1px red solid;
width: 200px;
height: 100px;
border-radius: 200px 200px 0 0;
}
css精灵技术
精灵技术产生的背景
当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
精灵图的坐标
这里借鉴了HTML中文网的一张图
精灵技术本质
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图）
小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。
扫一扫
3088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
