文章目录
## 层叠样式表语言（Cascading style sheet）
内联定义方式：在标签里面使用
内联语法格式：<标签 style（style：风格，样式的意思）="样式名：样式值；
样式名：样式值；
样式名：样式值；">
</标签>
<div id="div1" style="样式名：样式值；
样式名：样式值；
样式名：样式值；">
</div>
定义内部样式块对象
在css地盘里，注释就跟Java相同
样式语法格式：选择器{
样式名：样式值；
样式名：样式值；
}
css常见的选择器包括
（最常用的三种选择器，每个选择器对应不同元素）
标签选择器
id选择器
class选择器
标签选择器
会适用于所有div标签
标签选择器格式
标签选择器{
}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定义内部样式块对象</title>
<style type="text/css">
/*
这是css的注释
*/
div(div是标签选择器){
background-color: aqua;
width:100px;
height:100px;
border-style:solid;
border-width: 1px;
}
</style>
</head>
<body>
<div>
</div>
</body>
id选择器
只作用于id这个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#usename{
width:100px;
height:5px;
border-style:double;
border-width:1px;
}
</style>
</head>
<body style="">
<div>
</div>
<input type="text" id="usename"/>
<!--通过id对文本框进行修饰-->
</body>
</html>
class选择器
任何标签都有class属性，class相同的可以看作同一类标签，修饰某一类元素
类选择器格式
.class{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.study{
font-size: 15px;
color: green;
}
</style>
</head>
<body>
<div>
</div>
<span class="study">文本span</span>
<p class="study">文本段落</p>
</body>
</html>
链入外部样式表文件
需要的时候从另一个文件引入
<!--另外一个文件；文件位置：1.css-->
#div1{
background-color: red;
width: 100px;
height:100px;
border: aqua;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链入外部样式表文件</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
注意：标签选择器优先级最低、其次是类的选择器、最高级是id选择器
导入样式（不建议使用直接在html中使用）
导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，可以在外部样式、style标签中使用。
@import "hd.css"
@import url("hd.css")
<!--导入样式要放在样式规则里面定义-->
<style>
@import url("hdcms.css");
body {
background: red;
}
</style1>
盒子模型
添加元素的时候定义：上右下左
| padding（内间距）-top | padding-right | padding-bottom | padding-left |
| border（边框区域）-top | border-right | border-bottom | border-left |
| margin（外边距的区域）-top | margin-right | margin-bottom | margin-left |
注意
- 加了
box-sizing:border-box；这个属性后，这个容器的大小就只有width和height不会受到padding或者border或者滚动条影响，相当于把padding和border的值都算在content里 - *{ margin:0; padding:0;} 这样 可以很好的避免标签的默认内外补丁所产生的差异。
- background-clip:content-box（填充内容区域）
替换元素
<ifame/><img/><video/>
定位
文档标准流
简单来说标准流就是浏览器按照各种元素标签排版布局中默认的状态，浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。
脱离文档流
脱离文档流就是元素像飞起来一样，或者理解为元素在文本流中会占用空间，脱离文本流以后，会在z轴的另外一层显示，原先的空间被其他元素占据
浏览器默认的排版方式就是文档流(或者叫标准流)排版方式。脱离文档流就是不按照文档流的排版方式
定位可以分为：静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。
静态定位
标签内不加任何定位属性
相对定位（relative）
对当前位置修改，相对定位元素不可层叠，left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计
position:relative;
绝对定位（absolute）
position:absolute;
- 使用
left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位 - 如果元素的父级没有设置定位属性，则参靠着文档
- 如果父级元素设置了
relative | fixed | sticky，绝对定位子元素将参数此父元素进行定位 - 对定位元素可层叠，层叠顺序可通过
z-index属性控制，z-index值为无单位的整数，大的在上面，可以有负值，z-index属性指定一个元素的堆叠顺序。 - 绝对定义不受文档流影响，就像漂浮在页面中的精灵，绝对定位元素拥有行内块特性
- 如果没有宽高定位，移动的是边界
- 如果父级设置有滚动
overflow:scroll的时候，且设置有相对定位，那么绝对定位会根据滚动条发生移动，而不会像初始一样定在那里 - 后出现的定位权重较高
粘性定位
设置position:sticky同时给一个(top,bottom,right,left)之一即可
- 父元素不能
overflow:hidden或者overflow:auto属性。 - 必须指定
top、bottom、left、right4个值之一，否则只会处于相对定位 - 父元素的高度不能低于
sticky元素的高度 sticky元素仅在其父元素内生效- 粘性定位还有另一个小特性：如果是同级关系，互相叠加；非同级的时候，另一个元素会把其他粘性定位顶走
- 粘性定位的元素是依赖于用户的滚动，在
position:relative与position:fixed定位之间切换。
position:sticky
固定定位
固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化（它参考的是浏览器窗口）
position:fixed;
弹性盒子布局
概念
虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理
弹性盒子（块级元素）
-
定义：
display: flex -
flex-flex-direction（flex-direction属性决定了主轴和交叉轴的方向）:
row | row-reverse | column | column-reverse -
flex-flow属性是flex-direction和flex-wrap（一行排不下时换行）属性的复合属性（
flex-flow属性用于设置或检索弹性盒模型对象的子元素排列方式） -
定义：flex-flow: flex-direction flex-wrap -
order属性 设置或检索弹性盒模型对象的子元素出现的順序（数值越大越靠后）
row（主轴默认是水平的）
row-reverse
column
column-reverse
主轴元素对齐方式
justify-content(设置内容对齐方式):flex-start;开始位置
justify-content:flex-end;靠后位置
justify-content:flex-center;居中位置
justify-content:space-between;（平均分布）
justify-content:space-around;（两边元素的间距是成倍间距）
justify-content:space-evenly（均匀）;（完全平均分布）
交叉轴元素对齐方式(属性来设置)
align-items(侧轴对齐方式):flex-start;
align-items:flex-end;
align-items:center;
align-items:stretch;(拉撑对齐)
多行元素在交叉轴排列方式
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
align-content:space-evenly;
单个元素交叉轴进行控制
article:nth-child(n){
align-self:center;
}
弹性元素规则
flex-grow:1;
（控制剩余空间是否放大，默认0，剩余也不放大，适合不确定文字数量自适应宽度）
<!--计算：flex-grow默认值为0，用于子元素的宽度之和小于父元素的宽度时分配剩余空间，假如父元素宽度为1000，三个子元素，div1宽度200，div2宽度300，div3宽度300；三个子元素都不设置flex-grow,那么浏览器默认不自动分配剩余空间，剩余空间超出；假如给div1设置flex-grow:1,那么剩余1000-200-300-300=200px全部分配给div1；其他的子元素div2和div3不参与分配,即不设置此属性就不参与分配。-->
flex-shrink:1;
（flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩）
<!--计算：A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2
1.父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px
2.100*1+100*1+100*1+100*2+100*2=700px
3.被移除溢出量：(100*1/700)*100，即约等于14px……以此类推-->
flex-basis:100px;
<!--默认值：auto。如果是主轴是默认row的话，基准是width；相反（column）是hight，也就是你即使删除width也不会有改变；flex-basis属性定义了（该属性用来设置元素的宽度）在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。-->
注意：以上三种定义的复合属性是flex:flex-grow|flex-shrink|flex-basis；如：flex:1 2 100px
样式装饰
列表隐藏样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链入外部样式表文件</title>
<style type="text/css">
#stealth{
display: none;
}
</style>
</head>
<body>
<ul>
<li>水
<ul id="stealth">
<li>二氧化氮</li>
<li>锂离子</li>
</ul>
</li>
<li>炸鸡</li>
<li>火腿</li>
<li>鸡翅</li>
</ul>
</body>
</html>
设置鼠标悬停效果
hover是专门设置鼠标悬停效果的（在使用hover的时候，左右两边不许有空格）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链入外部样式表文件</title>
<style type="text/css">
p:hover{
color: #FF0000;
font-size: 10px;
}
</style>
</head>
<body>
<p>氯化钠</p>
<p>氧化酶</p>
<p>氨基酸</p>
</body>
</html>
浮动样式
float属性定义元素在哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。- 没有设置浮动的块元素是独占一行的，两个元素都设置浮动后，会并排显示
- 浮动元素边界不能超过父元素的
padding - 元素浮动后会变为块元素包括行元素如
span，所以浮动后的元素可以设置宽高
浮动定义
float:left（向左浮动）
float:right（向右浮动）
float:none（不浮动）
清除浮动
第一种
clear:left/right\both;
第二种
.clearfix{
clear:both;
height:0;
}
<article class="clearfix"></article>
第三种
main::after{（把它当成普通标签使用）
content:"";
clear:both;
dispaly:block;
}
voerflow:hidden
- 给一个元素中设置
overflow:hidden那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位（溢出隐藏） - 清除浮动，父级元素不设置高度时，高度由随内容增加自适应高。子元素使用浮动后将不占用空间，这时父元素高度为将为0。通过添加父元素并设置
overflow属性可以清除浮动。将会使用父元素产生BFC机制，即父元素的高度计算会包括浮动元素的高度。
voerflow:hidden;
光标样式
使用pointer，不要使用hand因为有浏览器兼容问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链入外部样式表文件</title>
<style type="text/css">
img{
float: left;
}
#div1{
background-color: #FF0000;
border: solid 1px blue;
width: 100px;
height: 100px;
position: absolute;
top: 200px;
left: 101px;
}
#become:hover{
cursor: pointer;
text-decoration: underline;
color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<span id="become">百度</span>
</div>
</body>
</html>
补充
*通配符，意思是所有的标签都有的属性。>元素选择器中选择子元素，不包括孙级及以下元素（后面的元素）+紧挨着的同级兄弟元素。~*后面所有兄弟元素^=只要标签里面的属性值和style设置属性值前面相同元素都会被应用（以指定值开头的元素）$=以指定值结尾的元素|=以指定值开头或以属性连接破折号的元素~=指定值是独立值或者以空格隔开的独立值:nth-child()选择器，:nth-of-type(n)选择器（简单理解：有of是第n个某个元素；没有of是第n个元素）list-style:none去除样式