本节内容：CSS相关属性2
1、CSS盒子模型
2、float浮动
3、overflo溢出属性
4、position（定位）
一、CSS盒子模型
1、margin：外边距，控制元素间的距离，整个模型实际占的大小；
2、border：边框，文字的边框，在内边距和外边距之间；
3、padding：内边距，内容到边框的距离；
4、content：内容，盒子的内容，显示文本和图像。
1、margin外边距的写法
1、普通写法：
.margin-test{ # 选择器选择这个
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
一般浏览器会默认给加上一个margin，
所以我们一般写CSS样式的时候，都会先写一个body的上下左右的margin都设置为0.
2、如果将上下两个标签都设置了margin是什么效果
3、推荐使用简写：
顺序：上右下左
.margin-test {
margin: 5px 10px 15px 20px;
}
4、常见居中：
.mycenter {
margin: 0 auto; #上下0像素，左右自适应，居中的效果
}
如果你写的是三个：margin: 10px 20px 10px;意思是上为10，左右为20，下为10
2、padding内填充
写法跟margin相同：
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
1、推荐使用简写：
顺序：上右下左
.padding-test {
padding: 5px 10px 15px 20px;
}
补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
二、float浮动
脱离了标准文档流，
1、写法
.div1{
float: left;
}
三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动
先后顺序，一般按html写的顺序排，也可以自己写左右
效果：
2、标签浮起后，出现的副作用
浮动元素会生成一个块级框，而不论它本身是何种元素。
若父标签也没有，设置任何高度
将无法撑起自己的父标签，会被下面的标签顶上来，然后浮起的标签，盖在便签上
fe:浮起的副作用（浮起标签和下面的标签重叠）
解决办法：
3、浮动元素特点介绍：
浮动元素会生成一个块级框，而不论它本身是何种元素。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
4、clear清除浮动
为什么要用清除浮动：
把一个块级标签变成一个类似内敛标签的感觉，不好操控，容易混乱，
所以一般都用浮动来进行布局。
clear属性规定元素的哪一侧不允许其他浮动元素。
clear属性只会对自身起作用，而不会影响其他元素。
1、清除浮动的三种方式
浮动的副作用（父标签塌陷问题），所以要清除浮动
主要有三种方式：
1、固定高度 就是我们刚才的示例，在父标签里面加一个其他的标签
2、伪元素清除法 css来解决
3、overflow:hidden（用溢出属性解决）
fe1:第一种
fe2:第二种，伪元素清除法（使用较多）：
.clearfix:after {
content: "";
display: block;
clear: both;}
CSSCopy
四、overflow溢出属性 （先看下面的例子）
设置方向
overflow（水平和垂直均设置）
overflow-x（设置水平方向，只出现x轴的滚动条）
overflow-y（设置垂直方向，只出现y轴的滚动条）
1、防止溢出，文本不显示或者超出文本框
fe1:运用overflow示例，做圆形头像
运用overflow，做圆形头像
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圆形的头像示例</title>
<style>
* {
margin: 0;
padding: 0;
}
.header-img {
150px; #如果这个高度和宽度比图片的像素小怎么办，图片显示不全啊，因为用户上传的头像没准多大像素的，就需要设置下面哈格.header-mg>img，里面写上max-100%了
height: 150px;
border: 3px solid white;
border-radius: 50%; #圆形的边框
overflow: hidden; #溢出的内容隐藏
}
.header-img>img {
max- 100%; #相当于将图片的大小设置为父级标签的大小来显示了，因为用户上传的头像的像素我们是不知道的，就让它按照父级标签的大小来，就能放下整个头像了，就不会出现头像显示不全的问题了
#直接写100%就行，上面写max-width的意思是如果图片大于咱们设置的标签高宽的时候，就按照父级标签的大小来，比父级标签的高宽小的时候，就不需要按照父级标签的大小来了，了解一下就行了
}
</style>
</head>
<body>
<div class="header-img">
<img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>
</body>
</html>
HTMLCopy
五、position定位
小范围的布局一般都是定位做的，大范围的布局一般都是用float来做的
1、几种基本的相关定位
1、static（无定位，咱就不说了，主要看相对和绝对定位）
2、relative（相对定位）：
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置左上角为参照物。
元素还占据着原来文档流的空间，不会出现父级标签塌陷的问题。
移动方向：
往右移动：right:100px
都是按照元素自己的左上角进行计算的
3、absolute（绝对定位）
设置为绝对定位的元素框从文档流完全删除，也会有父级标签塌陷的问题
不占位置，
2、fixed（固定）：回到顶部的示例
不管页面怎么动，都在整个屏幕的某个位置
对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。
这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
fe:定位代码示例
定位代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>返回顶部示例</title>
<style>
* {
margin: 0;
}
.d1 {
height: 1000px;
}
.scrollTop {
padding: 10px;
text-align: center; #水平居中
position: fixed;
right: 10px; #距离窗口右边框的距离
bottom: 20px; #距离窗口下边框的距离
/*height：20px；
line-height：20；当line-height等于height的值的时候，就能实现一个文本居中的效果 */
}
</style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>
HTMLCopy
3、z-index（确定层叠关系，就是谁在前面）
结论：
1、z-index 值表示谁压着谁，数值大的压盖住数值小的，
2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，
都可以使用z-index，而浮动元素float不能使用z-index
3、z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，
或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4、从父现象：父亲怂了，儿子再牛逼也没用
fe:position的示例，用来定义模态对话框
position的示例，用来定义模态对话框
#自定义的一个模态对话框示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义模态框</title>
<style>
.cover {
#rgba的最后一个参数就是透明度的意思，所以如果我们这样写，就不需要写下面那个opcity了，但是这个只表示的背景颜色的透明度，opcity是标签的透明度及标签的内容(包括里面的文字)及标签下面的子标签的透明度
position: fixed;
top: 0;
right: 0; top
ightottomleft都设置为0，意思就是全屏，这个标签把全屏都覆盖了
bottom: 0;
left: 0;
z-index: 998;
#opcity:0.4; #设置元素的透明度
}
.modal {
position: fixed;
600px;
height: 400px;
left: 50%; #设置了left：50%和top：50%，你就会发现，你这个标签的左上角相对于页面的左面是50%，上面是50%，所以我们还要移动窗口，往左移动标签宽度的一半，往上移动高度的一半就行了。就是下面的margin设置
top: 50%;
margin: -200px 0 0 -300px; #左下右上，别忘了，往左移动要负值，往上移动要负值，因为它的移动是按照自己标签的左上角来移动的。
z-index: 1000;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="modal"></div>
</body>
</html>
HTMLCopy
六、综合示例
1、顶部导航菜单
顶部导航菜单
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>li标签的float示例</title>
<style>
/*清除浏览器默认外边距和内填充*/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none; /*去除a标签默认的下划线*/
}
.nav {
height: 40px;
100%;
position: fixed;
top: 0;
}
ul {
list-style-type: none; /*删除列表默认的圆点样式*/
margin: 0; /*删除列表默认的外边距*/
padding: 0; /*删除列表默认的内填充*/
}
/*li元素向左浮动*/
li {
float: left;
}
li > a {
display: block; /*让链接显示为块级标签*/
padding: 0 15px; /*设置左右各15像素的填充*/
color: #b0b0b0; /*设置字体颜色*/
line-height: 40px; /*设置行高*/
}
/*鼠标移上去颜色变白*/
li > a:hover {
color: #fff;
}
/*清除浮动 解决父级塌陷问题*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
<ul class="clearfix">
<li><a href="">玉米商城</a></li>
<li><a href="">MIUI</a></li>
<li><a href="">ioT</a></li>
<li><a href="">云服务</a></li>
<li><a href="">水滴</a></li>
<li><a href="">金融</a></li>
<li><a href="">优品</a></li>
</ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>
HTMLCopy
2、小米商城的示例，
按照红框--黄框--子框--蓝框来看整个布局：
产品经理需求–>UI（视觉、交互等各种UI）将这些页面做成图片（包括里面的文字大小图片大小等都给你准备好，标的很清楚）–>
前端工程师（通过前端代码来实现UI的页面）–>后端工程师（写提供数据、处理数据的逻辑）–>DBA管理数据
fe:给大家一个css只做动画效果的方式：
鼠标移动到标签上的时候，出现动态效果和阴影的效果：
鼠标移动到标签上，出现动态和阴影效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*给标签加上鼠标移动上去的一些效果*/
#test{
height: 200px;
border: 1px solid black;
}
#test:hover{
box-shadow: 0 5px 10px; /*给标签加阴影的效果，参数1是水平方向的阴影，参数2的5px是垂直方向上的阴影，参数3是阴影的范围*/
transform: translate3d(3px,-2px,0); /*鼠标移动上去之后有个标签往上台的效果，三个参数是：x轴，y轴，z轴，现在的效果是y轴方向往上移动2px,x轴往右移动3px*/
transition:all,.2s linear; /*这个的意思是所有的新样式改变，在0.2秒内慢慢的显示出来*/
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
HTMLCopy