一、使用位置
1、内联样式
<h1 style="text-align: center;">这是标题</h1>2、内部样式
<head>
<style>
/*h1叫做选择器，该css语句是文字居中*/
h1{
text-align: center;
}
</style>
</head>3、外部样式
/*在外部新建css文件 style.css，然后引入*/
<link href="./style.css" rel="stylesheet" />二、选择器
- 简单选择器（标签名称、id、class来选取元素）
- 交集选择器（交集选择器如果有元素选择器，必须以元素开头）
- 关系选择器（根据元素的父子关系判断的选择器）
- 组合选择器（根据它们之间的特定关系来选取元素）
- 属性选择器（根据属性或属性值来选取元素）
- 伪类选择器（一般情况下的使用：第一个子元素，被点击的元素，鼠标移到的元素，等）
- 伪元素选择器（修改元素中特殊位置的内容）
选择器的比重
内联样式 1000 id选择器100 类和伪类选择器10 元素选择器1 通配选择器0
内联样式 > id选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承样式
注意事项：
（1）交集选择器优先级：所有选择器等级相加
（2）组成交集选择器的优先级（也就是说，内联样式权重始终最大）
（3）如果优先级相同，会使用样式书写位置靠下的
（4）继承样式没有优先级，都能覆盖
（5）可以在某一个样式后面添加 !important，则此样式获得最高优先级，超过内联样式
p {
background-color: antiquewhite !important;
}1、简单选择器
<body>
<div class="d" id="a">我是div标签</div>
</body>
<style>
/*标签选择*/
div {
color: red
}
/*class选择器*/
.d {
color: red
}
/*id选择器*/
#a {
color: "red"
}
</style>2、交集选择器：同时满足多个条件
<style>
/*选择class为a的div标签*/
/*交集选择器如果有元素选择器，必须以元素开头*/
div.a {
color: brown;
}
/*选择class同时为a、b、c*/
.a.b.c {
}
</style>
3、关系选择器
<body>
<div class="d">
<span>我是第一个</span>
<p>
<span>我是第二个</span>
<div>我是第三个</div>
<div>我是第四个</div>
</p>
</div>
</body>
<style>
/* 选择属性为d的div标签的子元素p的子元素span 语法： 父元素 > 子元素 */
div.d > p > span{
color: aqua;
}
/* 选择属性为d的div标签所有子元素（选择某个元素的所有子元素） 语法： 祖先 子元素 */
div.d span {
color: brown;
}
/* 选择span的下一个兄弟标签p 语法： 前一个 + 后一个 */
span + p {
font-size: 100px;
}
/* 选择p标签的所有div子标签 语法: 兄 ~ 弟 */
p ~ div {
color: blue;
}
</style>4、组合器选择器
将多个简单选择器逗号隔开
<style>
.cc, #pas, p{
color: #4169E1;
}
</style>5、属性选择器：通过标签的属性选中元素
<style>
/*选择span标签，id属性为hello的标签*/
span[id = 'hello'] {
color: antiquewhite;
}
/*选择span标签，带有id属性的标签*/
span[id] {
color: antiquewhite;
}
</style>6、伪类选择器
一般情况下的使用：第一个子元素，被点击的元素，鼠标移到的元素，等
<body>
<ul>
<span>与众不同</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
<style>
/* 需要注意的是，child这些伪类选择的元素，是根据所提供的所有子元素中进行选择 */
/* 始终选择ul的第一个li子元素 */
ul > li:first-child {
color: aquamarine;
}
/* 始终选择ul的最后一个li子元素 */
ul > li:last-child {
color: aqua;
}
/* 始终选择ul的第n个li子元素 */
/* n的范围为正整数（0~n） 2n或者even表示选中偶数行 2n+1或odd表示选中奇数行*/
ul > li:nth-child(2n) {
color: blue;
}
/* 需要注意的是，type这些伪类选择的元素，是根据所提供的所有子元素中同类型进行选择 */
ul > li:first-of-type {
color: aliceblue;
}
ul > li:last-of-type {
color: aliceblue;
}
ul > li:nth-of-type(2n) {
color: aliceblue;
}
</style>鼠标移入改变背景颜色
<style>
div:hover {
background-color: antiquewhite;
}
</style>7、伪元素选择器
<body>
<p>shakhdsiuadhsakdhskad<br>sjalsjal</p>
</body>
<style>
/* 将p标签首字母字体放大 */
p::first-letter {
font-size: 50px;
}
/* 修改元素第一行背景颜色 */
p::first-line {
background-color: antiquewhite;
}
</style>三、长度单位
1、像素和百分比
像素：显示器实际上是由一个一个像素组成
百分比：设置具有父元素的元素，子元素相对于父元素的占比（宽高等等）
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: aqua;
}
.box2 {
width: 50%;
height: 50%;
background-color: black;
}
</style>
2、em和rem
em单位转换为像素值的时候，取决于使用它们的元素的font-size的大小，但是有因为有继承关系，所以比较复杂。
rem单位翻译为像素值的时候是由html元素的字体大小决定的，此字体大小会被浏览器中字体大小的设置影响。
1em = 1rem = font-size (font-size 默认16个像素)
四、颜色
1、RGB值
在css中可以直接用颜色的英文单词来设置颜色。比如：red、green、yellow ····
RGB值：
RGB通过控制3种颜色（red、green、blue）不同的浓度调配不同的颜色，每一种颜色范围在0~255之间。
RGBA：
设置透明度。0不透明，1完全透明
语法：background-color: rgb(0, 0, 255,0.5);
语法：
background-color: rgb(0, 0, 255); 或者
background-color: #19ffff（#红绿蓝，16进制，每一位00~ff）
2、HLS
HLS语法：
background-color: hls(hue, saturation, lightness)
hue色像（0~360） saturation饱和度（0~100%） lightness亮度（0~100%）
HLSA语法：
background-color: hsla(hue, saturation, lightness, alpha)
alpha透明度
五、文档流
网页是一个多层结构，一层摞着一层，通过css可以分别为每一层设置样式，作为用户来讲只能看到最上面的一层。在这些层中，最底部的叫做文档流，文档流是网页的基础。我们所创建的元素，默认都是在文档流中排列的
对于我们来说，元素只存在两个地方，文档流中或者在文档流之外
元素在文档流中的特点
块元素特点：
（1）块元素独占一行，多个快元素至上到下垂直排列。
（2）默认宽度继承父元素（将父元素撑满）
（3）默认高度被内容撑开
行内元素特点：
（1）不会独占一行，只占自身大小，多个行内元素至左向右水平排列
（2）如果一行内不能容纳多个行内元素，会自动换行，继续至左向右水平排列
（3）行内元素默认高度和宽度都是被内容撑开
#e {
/* 将元素设置为行内元素 */
display: inline;
/* 将元素设置为块元素 */
display: block;
}六、盒子模型
1、盒子模型基础
将每个元素看成一个盒子。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
margin（外边距）
div {
如果设置负值，就是相反的作用
上边距和左边距是移动自己
/* 单独由边距 */
margin-right: 10px;
/* 单独上边距 */
margin-top: 10px;
左边距和下边距是移动别的元素
/* 单独左边距 */
margin-left: 10px;
/* 单独下边距 */
margin-bottom: 10px;
}border（边框样式）
div {
/* 边框粗细 上下左右 */
border-width: 10px;
/* 同时指定4个边框 上 右 下 左 */
border-width: 10px 20px 30px 40px;
/* 同时指定4个边框 上 左右 下 */
border-width: 10px 20px 30px;
/* 同时指定4个边框 上下 左右 */
border-width: 10px 20px;
/* 单独指定上边框 */
border-top-width: 10px;
/* 边框颜色 */
border-color: rgb(119, 9, 170);
/* 边框样式--实线 */
border-style: solid;
/* 外边框为黄色10像素的虚线 */
border: 10px dotted yellow;
}补充outline（边框轮廓）
与border用法一样，但是不会影响页面布局，使用该属性设置边框，只会覆盖原有内容，盒子不会移动
padding（内边距）
内边距的设置会影响盒子的大小（父元素上边距和左边距设置过大，会撑开元素）
div {
/* 内边距为20像素 */
padding: 20px;
}2、特点
（1）水平方向布局
（2）垂直方向布局
子元素的高度超过父元素的高度，子元素会溢出。overflow属性处理子元素溢出
<style>
.a {
width: 450px;
height: 450px;
background-color: aquamarine;
/* overflow处理子元素溢出
visible 默认值不处理
hidden 溢出裁剪掉,多余内容不要
scroll 添加滚动条
auto 根据情况自定义生成xy轴滚动条
此外还有overflow-y 和 overflow-x 分别单独处理x和y的溢出*/
overflow: auto;
}
</style>（3）外边距的折叠
垂直方向的外边距：
- 两个相邻元素垂直方向的外边距会重叠；
- 兄弟元素：相邻兄弟元素垂直方向外边距取最大值；
- 父子元素：父子元素直方向的相邻外边距，子元素会传递给父元素。这会影响到页面布局，需要处理。
清除父子元素直方向的相邻外边距折叠（高度塌陷原理在六—7，与清除父子元素外边框折叠原理相似）：
<head>
<link href="./reset.css" rel="stylesheet"></link>
<style>
.a {
height: 200px;
width: 200px;
background-color: aqua;
}
.b {
height: 100px;
width: 100px;
background-color: antiquewhite;
margin-top: 100px;
}
/* .clearfix::after与content、display、clear解决高度塌陷问题
.clearfix::before与content、display解决父子元素直方向的相邻外边距折叠
可以作为两种缺陷的解决模板 */
.clearfix::before, .clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="a clearfix">
<div class="b"></div>
</div>
</body>
3、行内元素的盒子模型
行内元素盒子模型的特点：
（1）行内元素不能设置高度和宽度。只能被内容撑开
（2）行内元素设置的padding、border，垂直方向的padding、border不会影响页面布局，会覆盖bottom方向的元素，不会造成挤压。
（3）行内元素设置的margin，水平方向相加，垂直方向不会有任何影响
4、修改盒子样式
（1）box-sizing属性设置盒子大小计算方式
默认情况下，盒子可见大小由 border+ padding + content
/* width和height设置盒子的内容区大小*/
#e {
height: 45px;
width: 45px;
box-sizing: content-box;
}/* width和height设置了整个盒子的大小（外边距） */
#e {
height: 45px;
width: 45px;
box-sizing: border-box;
}（2）盒子阴影
div.d1 a {
/* 设置盒子的阴影，第一个值：水平偏移量，正值向右，负值向左；第二个值：垂直偏移量；第三个值：模糊半径，值越大，越模糊，可忽略不写；第四个值：阴影颜色 */
box-sizing: 10px 10px red;
}
（3）盒子圆角
.d {
box-shadow: 20px 20px 10px red;
/* 同时设置盒子4个脚的圆角，每个角也可以单独设置 */
border-radius: 10px;
}七、浮动float
作用：将块元素放在一行中
1、浮动的特点
- 设置浮动以后，水平布局的等式便不需要强制成立
- 元素设置浮动以后，会完全脱离文档流（元素的一些特点会发生变化）
- 块元素：块元素不再独占一行，如果不单独设置元素宽度和高度，元素的宽度和高度被内容撑开
- 行内元素：行内元素和脱离文档流的块元素特点一样，也就是说，脱离文档流之后，就没有块元素和行内元素之分了！
- 文档流在浮动层之下
- 相邻的两个块元素，第一个元素不浮动，第二个元素浮动，则不存在覆盖。第一个元素浮动，第二个元素不浮动，则第二个元素会被覆盖（文字不会被覆盖，可以设置文字环绕图片的效果）
- 如果一行中容纳不下多个浮动元素，会自动换行
.d {
width: 200px;
height: 200px;
background-color: aqua;
/* 默认值为none，
right：元素向右浮动
left：元素向左移动
*/
float: left;
}针对第六个特点，设置不覆盖的解决方法
clear：清除浮动对当前元素的影响。right：清除右浮动。left：清除左浮动。both：清除两侧影响最大的那个的浮动效果。
clear属性原理：以本例来说，设置清除浮动以后，浏览器会自动为2号元素添加一个margin-top = 100px（自动计算），使其位置不受浮动元素影响。但是1号元素依旧是浮动元素性质不变！
<head>
<title>clear演示</title>
<link href="./reset.css" rel="stylesheet"></link>
<style>
div {
font-size: 50px;
}
.a, .b{
width: 100px;
height: 100px;
}
.a {
float: left;
background-color: antiquewhite;
}
.b {
background-color: aqua;
clear: both;
}
.c {
width: 100px;
height: 200px;
background-color: tomato;
float: right;
}
</style>
</head>
<body>
<div class="a">1</div>
<div class="c">3</div>
<div class="b">2</div>
</body>
2、浮动造成的高度塌陷
在浮动布局中，父元素高度设置为auto，父元素会被子元素撑开。但是子元素设置了浮动，脱离了文档流。就会导致父元素高度丢失。这就是高度塌陷
3、BFC解决浮动造成的高度塌陷
（1）什么是BFC（块级格式化环境）
官方定义：BFC（Block Formatting Context）块格式化上下文， 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 说人话：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
（2）特点
- 相邻的两个块元素，第一个元素浮动，第二个元素不浮动，则第二个元素会被覆盖，第二个元素开启bfc之后，就不会被覆盖。
- 开启bfc的父元素外边距，当中子元素的外边距不会作用于父元素的外边距
- 开启bfc的元素可以包含浮动元素
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
（3）如何创建一个BFC
- 浮动元素（元素的float不是 none，指定float为left或者right就可以创建BFC）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- display:inline-block，display:table-cell，display:flex，display:inline-flex
- overflow指定除了visible的值（推荐 overflow: hidden）
4、after伪元素解决高度塌陷
after伪元素的原理代码
<head>
<title>after伪元素的原理代码</title>
<link href="./reset.css" rel="stylesheet"></link>
<style>
.a {
border: 10px salmon solid;
}
.b {
width: 200px;
height: 200px;
float: left;
background-color: aqua;
}
.c {
clear: both;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c"></div>
</div>
</body>
解决方案
/* 替代属性为c的div标签的作用 */
.a::after {
/* 该伪元素显示的文字（不需要就空字符串） */
content: "";
/* 清除浮动带来的覆盖问题 */
clear: both;
/* 该伪元素默认是一个行内元素，转换成块元素 */
display: block;
}八、定位
定位：一种更高级的布局手段，通过定位可以将元素摆放到页面任意位置
1、定位分类
static：默认值，静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
sticky：粘滞定位
2、相对定位
（1）设置了相对定位，不设置偏移量，元素位置不会发生变化。设置偏移量的属性（top bottom left right）
（2）定位点，设置偏移量的盒子模型的右上角的点为原点
（3）外边距与偏移量的设置不会重叠，外边距会影响页面布局，而偏移量不会影响页面布局，会覆盖其他元素。也就说，整个盒子跟随偏移。
（4）如果该盒子设置的偏移位置有其他元素，偏移盒子会覆盖其他元素。也就是说，相对定位会提升元素的层级（但是不会脱离文档流，不会改变元素性质）
（5）开启相对定位
.b {
/* 开启相对定位 */
position: relative;
bottom: 100px;
}3、绝对定位
（1）设置绝对定位，不设置偏移量，元素位置不会发生变化。
（2）开启绝对定位后，元素会从文档流中脱离，从而改变元素性质。绝对定位会提升元素的层级（覆盖其他元素）。
（3）定位点，距离当前元素最近的开启了定位的祖先块元素。如果没有就相对于根元素进行定位。
.d {
// 使用相对定位，让元素居中的方法。垂直方向也使用
margin-top: auto;
margin-bottom: auto;
position: absolute;
bottom: 0;
top: 0;
}4、固定定位
固定定位也是一种绝对定位，拥有绝对定位的绝大部分特点。唯一不同的是定位点参照浏览器的视口（浏览器可见部分）。
5、粘滞定位
// TODO 暂时不学
6、元素的层级
对于开启定位的元素，可以通过z-index属性设置元素的层级，值越大，层级越高。
对于兄弟元素，如果层级一样，优先显示下方的元素。
对于祖先元素和后代元素，祖先元素的层级再高，也不会盖住后代元素。
九、浏览器的默认样式
默认样式会影响浏览器的页面布局，有时候需要去除默认样式
reset.css，样式重置为0
/* v2.0 | 20110126
http://meyerweb.com/eric/tools/css/reset/
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}normalize.css 统一样式
https://necolas.github.io/normalize.css/8.0.1/normalize.css
十、其他样式
1、diaplay样式
#e {
/* 将元素设置为行内元素 */
display: inline;
/* 将元素设置为块元素 */
display: block;
/* 将元素设置为行内块元素 */
/* 行内块元素：既可以设置高度和宽度，还不会独占一行 */
display: inline-block;
/* 解决高度塌陷问题，解决父子元素直方向的相邻外边距折叠时可以使用 */
display: table;
/* 隐藏一个元素 */
display: none;
}2、display和visibility隐藏元素的区别
#e {
/* 隐藏元素，但是会占据该隐藏元素的位置 */
visibility: hidden;
/* 显示元素，默认值 */
visibility: visible;
}3、在父元素中垂直居中
/* 想要在父元素中垂直居中，只需要设置父元素的line-height和height高度一致即可 */
.d1 {
height: 45px;
line-height: 45px;
}4、去除超链接的下划线
a {
text-decoration: none;
}