Web-Lesson04-盒子模型，浮动+定位
一、盒子模型
盒子模型是由内容（content）、边框（border）、外边距（margin）、内边距（padding）组成
1.border：边框宽度，颜色，样式
border-width：
border-color：
border-style: solid实线 dashed虚线 dotted点线 double双边框border-color
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
border-width 边框大小
border-top-width 上边框大小
border-right-width 右边框大小
border-bottom-width 下边框大小
border-left-width 左边框大小
border-top-width:0
border-style 边框样式
border-top-style 顶部边框类型
border-right-style 右边边框类型
border-bottom-style 底部边框类型
border-left-style 左边边框类型
border-color 边框颜色
border-top-color 顶部边框颜色
border-right-color 右边边框颜色
border-bottom-color 底部边框颜色
border-left-color 左边边框颜色
2.margin 外边距 元素与其他元素的距离（边框以外的距离）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* margin 外边距 元素与其他元（边框以外的距离） 一个值的时候： 代表四个方向值一样 上右下左（顺时针） 二个值的时候： 上下 右左 三个值的时候： 上 右左 下 四个值的时候： 上 右 下 左 margin: auto; 左右居中 垂直方向： margin-bottom,margin-top 取两者之间的较大值 水平方向： margin-left,margin-right 取两者的和 overflow:hidden; 解决内边距重叠问题 */ * { margin: 0; padding: 0; } .box1{ width: 200px; height: 200px; background: red; overflow: hidden; } .box2{ width: 50px; height: 50px; background: blue; margin: 20px auto; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
margin: auto; 左右居中
垂直方向： margin-bottom,margin-top 取两者之间的较大值
水平方向： margin-left,margin-right 取两者的和
overflow:hidden; 解决内边距重叠问题
3.padding 内边距，边框与内容之间的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* padding 内边距，边框与内容之间的距离 一个值的时候： 代表四个方向值一样 上右下左（顺时针） 二个值的时候： 上下 右左 三个值的时候： 上 右左 下 四个值的时候： 上 右 下 左 */ div{ width: 200px; height: 200px; background: yellow; padding: 50px; } span,em{/*左右padding有效果*/ background: #136ec2; padding: 50px; } </style> </head> <body> <div>我是div</div> <span>我是span</span> <em>我是em</em> <div>我是div</div> </body> </html>
padding左右添加增加标签距离，上下增加会覆盖其他盒子布局。
4.盒子布局大小计算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; border: 10px solid yellow; padding: 50px; margin: 50px; } /* 盒子大小=样式宽 + 内边距 + 边框 盒子宽度=左border+右border+width+左padding+右padding 盒子高度=上border+下border+height+上padding+下padding */ </style> </head> <body> <div></div> </body> </html>
二、浮动
浮动的定义：使元素脱离文档流，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停下来。
文档流：是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）
脱离文档流 ：在页面中不占位置清除浮动
清除浮动
1.给父级增加高度（不推荐使用）
2.给父级加overflow:hidden;
3.给父级加一个类
.clearfix:after{
content: "";
display: block;
clear: both;
}
1.清除浮动第一种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /* 浮动的定义：使元素脱离文档流，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停下来。 文档流:是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置） 脱离文档流 ：在页面中不占位置 清除浮动 1.给父级增加高度（不推荐使用） 2.给父级加overflow:hidden; 3.给父级加一个类 .clearfix:after{ content: ""; display: block; clear: both; } 浮动的特点 如果只给前面的元素浮动，后面的要占据他的位置 */ .box1{ width: 100px; height: 100px; background: red; float: right; } .box2{ width: 200px; height: 200px; background: blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
2..清除浮动第二种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul{ border: 1px solid red; /*height: 200px;*/ /*overflow: hidden;*/ width: 350px; border-radius: 20px; } li{ list-style: none; background: greenyellow; width: 50px; height: 100px; float: left; margin-right: 20px; border-radius: 50%;/*快速圆角*/ } .clearfix:after{ content: ""; display: block; clear: both; } </style> </head> <body> <ul class="clearfix"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
三、定位
position 定位
static 静态定位（没有定位），默认原来的位置不发生变化。默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 相对定位，生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
absolute 绝对定位，没有占据位置，使元素完全脱离文档流，没有定位父级，则相对于整个文档发生偏移，参考最近非static定位的父级进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
可通过z-index进行层次分级。
fixed固定定位，生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
relative经常和absolute搭配使用
fixed 固定定位，相对于浏览器可视窗口进行定位
z-index 规定定位的层级（默认0）值：number 值越大层级越高（可以为负值）层级越高，越展示在上层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul{ width: 100px; height: 100px; border: 1px solid red; position: relative; } li{ list-style: none; width: 100px; height: 100px; background: #ddd; position: absolute; } .li1{ background: yellow; } .li2{ background: blue; /*z-index: 1;*/ } .li3{ background: blueviolet; z-index: -1;/*默认0 可正可负*/ } </style> </head> <body> <ul> <li class="li1"></li> <li class="li2"></li> <li class="li3"></li> </ul> </body> </html>
