- 所有的页面元素都可以看成一个盒子，并且占据着一定的页面空间。无论是div、span、还是a都是盒子，但是，图片、表单元素一律看作是文本，它们并不是盒子。比如说，一张图片里并不能放东西，它自己就是自己的内容；
- 盒子模型是由content(内容)、 padding(内边距)、 margin(外边距)、 border(边框)这四个属性组成的。
盒模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当做一个盒装物。对我们来说，只需要理解元素在页面中所占据的位置。
border边框
- 复合样式：border:边框大小 类型 颜色;
border:5px solid #006633；
border-width: 5px; 大小
border-style: solid; 类型
border-color: red; 颜色
border-top:0px; /*去除上边框*/
border-top:none; /*去除上边框*/
- border-width：边框大小
- 四个值：上 右 下 左(顺时针)
- 三个值：上 左右 下
- 二个值：上下 左右
- 一个值：四个方向值相等
- border-top-width 顶部边框大小
- border-right-width 右边框大小
- border-bottom-width 底部边框大小
- border-left-width 左边框大小
- border-style： 边框类型
- solid 实线
- dashed 虚线
- dotted 点线
- double 双边框
- 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 左边框颜色
padding内边距
边框与内容之间的距离
- 四个值：上 右 下 左(顺时针)
- 三个值：上 左右 下
- 二个值：上下 左右
- 一个值：四个方向值相等
- padding-top 顶部内边距
- padding-right 右内边距
- padding-bottom 底部内边距
- padding-left 左内边距
margin外边距
元素与其他元素的距离（边框以外的距离）
- margin-top 顶部外边距
- margin-right 右外边距
- margin-bottom 底部外边距
- margin-left 左外边距
- 自动水平居中
- margin:auto; 左右居中
- margin:20px auto; 上下20px 左右居中
- margin:20px auto 0; 上20px 左右居中 下0
盒子大小的计算
- content+border+padding盒子大小 = 样式宽 + 内边距 + 边框
- 盒子宽度 = 左border+左padding+width+右padding +右border
- 盒子高度 = 上border+上padding+height+下padding+下border
文档流
文档流是浏览器解析网页的一个重要概念，对于一个XHTML网页，body元素下的任意元素，根据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素顺序去显示他们在网页中的位置。
文档流是浏览器默认显示规则
float浮动
浮动起初作用是为了让文字环绕效果。
- 浮动的定义：使元素脱离文档流 ，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停了下来；
- 文档流 是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）；
- 脱离文档流 ：在页面内中不占位置，所以浮动元素后面的元素会占据浮动元素本来应该所处的位置。
- 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行
浮动的一般情况
- float:left;
- float:right;
- none;
如果一个元素（无论是块级元素还是行内元素）被设置为float之后，那么它默认会添加属性display:inline-block（行内块级元素），也就是说浮动会让元素变为拥有块级属性的行内元素，这时它的默认宽度不是100%，且给该元素设置padding-top和padding-bottom或者width、height都是有效果的。
清除浮动
- 什么情况下需要清除浮动？
父元素没有高度（指的是不设值，height:0不算）的情况下，里面的子元素都设置了浮动。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。 但是一般，高度height很少出现。为什么？因为能被内容撑高！ - 为什么需要清除浮动？
当元素设置浮动属性后，会对相邻的元素产生影响。相邻元素是指紧邻后面的元素。 - 清除浮动办法：
- overflow: hidden; 是将父元素解除浮动的影响，需要注意这个属性不仅能清除浮动，还有超出隐藏效果。
给没有设置高度的父元素设置overflow:hidden，一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。
# 时下主流，应该用在包含浮动元素的父元素上；
.clearfix:after{
content:'';
display:block;
clear:both;
height:0;
}
css给块级元素设上display: inline与float:left的区别是什么？
设了float:left的元素允许它的右边存在任何元素同行显示，不论是内联元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示，哪怕其它的元素的代码在前，除非也给前面的元素加上float:left后，才允许同行显示。
设了display:inline的元素，允许它的前后存在其它的内联元素同行显示。如果要让代码在前面的块元素与之同行显示，则要让前面的元素浮动（不管是左还是右浮动）或设为display:inline，如果要让代码在后面的块元素与之同行显示，则只能设为display:inline，浮动不起作用（无论左浮动还是右浮动）。即允许内联同行，块级要看情况。 给块级元素设上display:inline是解决有名的IE6中双倍浮动的利器。
position定位
规定元素的定位类型
- static 静态定位（没有定位），默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- relative 相对定位，相对于其正常位置进行定位。
不会脱离文档流；
不影响元素本身的特性；
如果没有定位偏移量，对元素本身没有任何影响； - absolute 绝对定位，最近非static定位的父级进行定位。
使元素完全脱离文档流；
没有定位父级则相对于body(整个文档)发生偏移；
绝对定位一般配合相对定位使用； - fixed 固定定位，相对于浏览器窗口进行定位。
方位词
- left: 距离左边的距离
- right: 距离右边的距离
- top:距离顶部的距离
- bottom:距离底部的距离
- z-index 规定定位的层级（默认0），仅能在定位元素上奏效。
值：number 值越大层级越高
注意：方位词相对于哪个对象偏移的
注意1：float和absolute会脱离文档流，所以对其设置宽高，不会影响其父元素的，切不要想通过设置其来撑开父级元素！
注意2：需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
案例
需求：实现如下效果
①进入的时候界面：
image.png
②鼠标进入里面，两边“耳朵”显示出来：
image.png
③鼠标移动到某个圆，对应圆亮
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第四次作业</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin: 50px auto; /*左右居中*/
width: 520px;
height: 280px;
position: relative;
}
ul.tab{
width: 110px;
height: 20px;
border: 1px solid red;
border-radius:20px;
background: rgba(255,255,255,0.4);
overflow: hidden;/*!*取消因li浮动导致的横线效果*!*/
position: absolute;
bottom: 10px; /*相对于父级div偏移*/
left: 50%; /*左偏移50%*/
margin-left: -50px;/*左边距再往回移动50px*/
}
ul.tab li{
list-style: none;
width: 10px;
height: 10px;
border: 1px solid red;
background: white;
border-radius: 50%;
float: left; /*使li左浮动*/
margin: 5px; /*间隔拉大点*/
}
ul.btn li{
list-style: none;
width: 25px;
height: 30px;
background: rgba(0,0,0,0.2);
text-align: center;/*使li里面的内容水平居中和垂直居中*/
line-height: 30px;
font-size: 20px;
color: white;
position: absolute;/*因为要用到左右一个li，所以定位写在li里面，它会参考最近非static定位的父级进行定位即div*/
top: 50%;
margin-top: -15px;
display:none;/*先隐藏起来*/
}
ul.btn li.left{
left:0; /*相对于div左移*/
border-radius:0 20px 20px 0;
margin-left: -5px;
}
ul.btn li.right{
right:0;/*相对于div右移*/
border-radius:20px 0 0 20px;
margin-right: -5px;
}
ul.tab li:hover{
background: #F40;
cursor: pointer;
}
div:hover ul.btn li{
display: block;/*显示*/
}
div ul.btn li:hover{
background: rgba(0,0,0,0.7);
cursor: pointer;
}
</style>
</head>
<body>
<div>
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt=""/>
<ul class="tab">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="btn">
<li class="left"><</li>
<li class="right">></li>
</ul>
</div>
</body>
</html>
网友评论