一、CSS样式引入的方式
1、内联样式（不推荐使用）
<h1 style="color: red">内容</h1>2、在style标签内定义（根据实际开发需求决定）
<style>
h1 {
color: pink;
}
</style>3、使用@import导入外部CSS样式表（根据实际开发需求决定）
<header>
<style>
@import url("style.css");
</style>
</header>4、使用<link>标签导入外部样式（推荐）
<header>
<link rel="stylesheet" href="style.css" />
</header>二、CSS常见选择器
1、通配符选择器：选中所有元素，常用于初始化样式
*{
/* */
}2、标签选择器：用于选中所有该标签名的元素，统一设定格式
div{
/* */
}3、类名选择器：选中对应class的元素，修改样式
<div class="box">内容</div>
.box{
/* */
}4、id选择器：选中对应id的元素，修改样式
<div id="box">内容</div>
#box{
/* */
}5、属性选择器：选中了指定元素中包含指定属性的标签，修改样式
<img src="zero.jpg" alt="banner">
img[alt*="banner"]{
/* */
}6、直接子代选择器：选出A元素中的第一代子代
<main>
<div>
<p>内容一</p>
<div>
<p>内容二</p>
</main>
main > p{
/* */
}
//选择的结果是 内容一7、后代选择器：选出A元素中的所有B后代
<main>
<div>
<p>内容一</p>
<div>
<p>内容二</p>
</main>
main p{
/* */
}
//选择的结果是 内容一 和 内容二8、伪类选择器：常用于交互效果、样式效果实现
a:hover{
color:pink;
}
p::before {
content: "♥";
}重点
三、盒子模型
1、盒子模型
2、内外边距，边框的设置方式
内外边距，margin处可以用padding代替
1.分别设置上右下左
.box {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
2.一次性赋值,分别
.box {
margin: 10px 15px 20px 25px;
}边框 solid实线 none无边框 dotted点线 dashed虚线
.box01 {
专门设置边框样式
border-style: solid solid solid double;
or
简写
border-: 1px solid #ccc;
}3、盒子模型的box-sizing
浏览器默认的盒子模型元素width是不包括左右内边距和左右边框的，实际开发中，通常会将box-sizing的值设置为border-box，让width包含内容宽度、内边距和边框，更方便为元素调整样式，这一设定通常写入到初始化样式里
*{
默认值为content-box,只包含内容
box-sizing: border-box;
}
水平方向 : 左外边距+左边框+左内边距+ content-width +右内边距+右边框+右外边距
垂直方向 : 上外边距+上边框+上内边距+ content-height +下内边距+下边框+下外边距4、HTML文档流
（1）块级元素和行内元素
块级元素独占一行，从上至下排列，行内元素从左到右排列，超过父元素边界则自动换行
（2）常见的块级、行内元素
块级：div、h1-h6、header、main、footer、nav、ul、ol、form、article、section、aside、table、video
行内：span、img、a、input、select、button、textarea
四、浮动布局（float）
1、浮动布局的概念及作用
通过元素浮动，可以使元素在水平上左右移动，通过margin属性调整位置，可以实现更简便、美观的布局
2、浮动实现
div {
float: left; //左浮动
float: right; //右浮动
}3、浮动特性
4、 清除浮动
浮动后，元素脱离文档流控制，最常见的是元素浮动后，导致布局塌陷，是因为浮动的元素没有撑开父元素的高度，所以为了布局工作的顺利进行，要清除浮动
<div class="big-box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="clearfix"></div>
方法一：在浮动元素后添加一个div，给div设置属性（不推荐）
.clearfix {
clear: both;
}
方法二：给浮动元素的父元素添加伪类（推荐）
.big-box::after {
display: block;
content: " ";
clear: both;
}五、定位布局（position）
1、相对定位（relative）
被设定position： relative; 属性的元素，会相对与自己原来的位置进行移动，不会脱标
.box {
position: relative;
离开左侧100px
left: 100px;
离开顶部50px
top: 50px;
}2、绝对定位（absolute 子绝父相）
被设定position: absolute; 属性的元素的位置，是根据父元素决定的，如果没有父元素或者父元素没有设置相对定位，则会以浏览器的位置来进行定位，会脱标
.big-box {
/* 设置相对定位 */
position: relative;
}
.box1 {
/* 设置绝对定位 */
position: absolute;
left: 70px;
top: 120px;
}3、固定定位
被设定：position：fixed；属性的元素，会被固定在浏览器某个固定区域，浏览器滚动时元素位置不会改变，会脱标，但是不会占用原来位置，固定定位可以当做是特殊的绝对定位，常用于二维码，侧边栏，联系客服等
box {
position: fixed;
top: 30px;
right: 30px;
}生命不息，学习不止，键盘敲烂，月薪过万！加油，代码人！
