盒子模型由外到内：由外边距margin，边框border，内边距padding，内容content这四个属性组成。
1.外边距：margin: val
val可以是左右居中 auto
- 两个盒子水平方向：一个盒子存在margin-left ，第二个存在margin-right。取两者之和显示在浏览器上·
- 两个盒子垂直方向：一个盒子存在margin-bottom ，第二个存在margin-top。取距离大的值显示在浏览器上·
- 解决内边距重叠：overflow: hidden;
/*外边距margin 默认方向是 上—左—下—右
给一个值默认四个方向都一样 两个值分别代表上下 和 左右，三个值代表上 左右 下*/
/*margin: 15px;*/
/*margin: 15px 10px;*/
/*margin: 15px 10px 5px;*/
/*margin: 15px 10px 5px 0;*/
/*也可以给定方位 margin-方位: width*/
/*margin-top: 10px;*/
2.border边框：border: width style color
- style: 实线solid,虚线dashed,点线dotted,双边框double
- border-radius: 50% (对于正方形边框达到快速圆角的效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*border边框：border: width style color*/
border: 5px dotted red; /*常用写法*/
/*border-方位-width*/
border-right-width: 10px;
/*border-方位-style*/
border-bottom-style: dashed;
/*border-方位-color*/
border-left-color: #000;
</style>
</head>
<body>
<div class="box2">
</div>
</body>
</html>
3.内边距:内容和边框的边距padding: val;
*** 行内元素只有左右的内边距
/*!*内边距 padding-四个方位：width*!*/
padding: 90px;
/*padding-方向:val*/
padding-right: 10px;
4.浮动float: 只有左右浮动
float-left float-right
- 浮动的定义：使元素**脱离文档流** ，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
- **文档流** 是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）
- **脱离文档流** ：在页面内中不占位置
- 清除浮动 ：消除浮动带来的不利影响 是给浮动元素的父级消除影响
- overflow: hidden;
- .clearfix: after{content:'';display:block;clear:both;} clearfix是一个classname
5.定位：position
分为四种：静态定位static
1.静态定位相当于没有定位，是在浏览器默认的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ /*使内容左右居中*/ text-align: center; /*是内容上下居中 通过设置行高达到,行高等于该div的高度*/ line-height: 200px; width: 200px; height: 200px; background: red; /*静态定位 */ position: static; /*静态定位后 给方位值没有效果 没有定位也不能top*/ top: 50px; } </style> </head> <body> <div> 这是div </div> </body> </html>
效果不变，div块没有移动
2.相对定位 relactive 不脱离文档流，会占据空间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ /*使内容左右居中*/ text-align: center; /*是内容上下居中 通过设置行高达到,行高等于该div的高度*/ line-height: 200px; width: 200px; height: 200px; background: red; /*相对定位 不定义偏移量 没效果*/ position: relative; /*相对定位后 给方位值（定义偏移量）有效果*/ right: -500px; } </style> </head> <body> <div> 这是div </div> </body> </html>
效果距离right: -500px;
3.绝对定位 absolute 脱离文档流不占据空间，参考父级relactive 或 fixed 定位 或 （没有父级）body
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ /*使内容左右居中*/ text-align: center; width: 200px; height: 200px; background: red; /*相对定位 不定义偏移量 没效果*/ position: relative; /*相对定位后 给方位值（定义偏移量）有效果*/ top: 0px; /*定位后消除定位带来的不利*/ overflow: hidden; } p{ /*text-align: center;*/ width: 100px; height:100px; border: 1px solid yellow; background: yellow; /*绝对定位 他的父级是div(relactive)*/ position: absolute; /*离他父级的top2px*/ top: 2; } </style> </head> <body> <div> 这是div relactive </div> <p>这是p测试absolute</p> </body> </html>
效果p定位之前 ------- 之后 /*离他父级的top2px*/
4.固定定位 fixed ，相对于浏览器窗口进行定位，无论窗口怎么拉伸，他都跟着跑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ /*使内容左右居中*/ text-align: center; /*是内容上下居中 通过设置行高达到,行高等于该div的高度*/ line-height: 200px; width: 200px; height: 200px; background: red; /*固定定位 */ position: fixed; /*固定定位，给方位*/ top: 100px; right: 100px; } </style> </head> <body> <div> 这是div fixed </div> </body> </html>
fixed的效果
****** 层级 z-index 默认=0
<style> ul{ width: 100px; height: 100px; border: 1px solid red;
position: relative; } ul li{ width: 100px; height: 100px; background: #ddd;
position: absolute; --2图
} </style> <body> <ul>
<li style="background: red"></li> 提高层级 <li style="z-index: 1">我是li1</li>
<li style="background: yellow"></li>
<li style="background: blue"></li>
</ul> </body>
不定位 li 绝对定位后不占空间重叠在一起，最后一个li在最外层 要使 li1 显示 用属性z-index: num num越大层级就高，就能显示出来
