盒子模式的计算公式
宽=width+左右两边边框的高度+左右两边的内边距
高=height+上下两边边框的高度+上下两边的内边距
盒子
- CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里
- 为什么要想象成盒子呢？因为如果把所有的元 素都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。
- 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
盒子模型
一个盒子我们可以分为几个部分：
- 内容区：content
内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的。
通过width和height两个属性可以设置内容区的大小
- 内边距：padding
内边距指的就是元素内容区与边框以内 的空间
例如：
‘’1. padding：10px 20px 30px 40px； 上、右、下、左四个方向的内边距
‘’2. padding:10px 20px 30px;分别指定上、左右、下四个方向的内边距
‘’3. padding:10px 20px;分别指定上下、左右四个方向的内边距
‘’4.padding:10px;同时指定上左右下四个方向的内边距
在css中还提供了padding-top、padding-left、padding-right、padding-bottom分别用来指定四个方向的内边距
- 边框：border
在元素周围创建边框，边框是元素可见框的最外部
语法：border
border：1px red solid；分别指定宽度，颜色和样式
也可以使用border—top/left/right/bottom
边框的样式
- none 没有边框
- dotted 点线
- dashed 虚线
- solid 实线
- double 双线
- 外边距：margin
定义 ：是元素边框与周围元素相距的空间
语法：margin
margin -top/right/bottom/left;
display
修改元素的性质
可选值：
- block：设置元素为块元素
- inline：设置元素为行内元素
- inline-block：设置元素为行内块元素
- none：隐藏元素（元素将在页面中完全消失）
visibility
visibity属性主要用于元素是否可见。
使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
可选值：
- visible：可见的
2.hidden：隐藏的
overflow
可以通过overflow来控制内容溢出情况。
可选值：
visible：默认值
scroll：添加滚动条
auto：根据需要添加滚动条
hidden：隐藏超出盒子的内容
浮动
- 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕 在元素的周围。
- 浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。
- 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他 浮动元素。
- 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也 就是浮动元素不会撑开父元素。
- 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个 块元素。
清除浮动
clear属性可以用于清除元素周围的浮动对元素的影响。
也就是元素不会因为上方出现了浮动元素而改变位置。
可选值：
left：忽略左侧浮动
right：忽略右侧浮动
both：忽略全部浮动
none：不忽略浮动，默认值
根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的.
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC:
1.设置元素浮动- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
zoom
但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题。
开启方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可
zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍。
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout。
zoom这个样式，只在IE中支持，其他浏览器都不支持。
解决高度塌陷
①.box1{
border: 10px red solid;
overflow: hidden;
zoom: 1;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
②.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.clear{
clear: both;
}
*通过after伪类，选中box1的后边
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
③.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
/*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理*/
.clearfix{
zoom: 1;
}
开班信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开班信息</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.all{
width: 302px;
height: 471px;
margin: 150px auto;
border: 4px #f5f5f5 solid;
}
.small{
width: 302px;
height: 3px;
background-color: #019e8b;
}
.header{
width: 302px;
height: 37px;
background-color: #f5f5f5;
}
.header1{
width: 100px;
text-decoration: none;
color: black;
display: block;
font-size: 15px;
text-align: center;
padding: 7px 5px 5px 2px;
float: left;
}
.header2{
width:202px ;
display: block;
font-size: 10px;
color: red;
text-align: right;
padding: 10px 5px 10px 80px;
}
.content{
padding: 10px 28px 0 20px;
}
.content .title{
font-weight: bold;
margin-top: 14px;
}
.content a{
text-decoration: none;
color: black;
font-size: 12px;
font-family: 微软雅黑 ;
}
a:hover,a :hover{
color: aqua;
}
.content ul{
list-style: none;
}
.content li{
margin-top: 6px;
margin-bottom: 6px;
}
.red{
color: red;
font-weight: bold;
}
.left{
float: left;
}
.right{
float: right;
}
.xian{
color:#deddd9 ;
}
</style>
</head>
<body>
<div class="all">
<div class="small"></div>
<div class="header">
<a href="#" class="header1">近期开班</a>
<a href="#" class="header2">18年面授开班计划</a>
</div>
<div class="content">
<a href="#" class="title">人工智能+python-高薪就业班</a>
<ul>
<li>
<a href="#" class="left">开班时间：<span class="red">2018-04-10</span></a>
<a href="#" class="right"><span class="red">预约报名</span></a>
</li><br>
<li>
<a href="#" class="left">开班时间：<span class="red">2018-04-10</span></a>
<a href="#" class="right"><span class="red">无座，名额爆满</span></a>
</li><br>
<li>
<a href="#" class="left">开班时间：2018-04-10</a>
<a href="#" class="right">开班盛况</a>
</li><br>
<li>
<a href="#" class="left">开班时间：2018-04-10</a>
<a href="#" class="right">开班盛况</a>
</li>
</ul><br>
<p class="xian">------------------------------------</p>
<a href="#" class="title">Android</a>
<ul>
<li>
<a href="#" class="left">开班时间：<span class="red">2018-04-10</span></a>
<a href="#" class="right"><span class="red">预约报名</span></a>
</li><br>
<li>
<a href="#" class="left">开班时间：2018-04-10</a>
<a href="#" class="right">开班盛况</a>
</li><br>
<li>
<a href="#" class="left">开班时间：2018-04-10</a>
<a href="#" class="right">开班盛况</a>
</li><br>
<li>
<a href="#" class="left">开班时间：2018-04-10</a>
<a href="#" class="right">开班盛况</a>
</li>
</ul><br>
<p class="xian">------------------------------------</p>
<a href="#" class="title">大数据</a>
<ul>
<li>
<a href="#" class="left">开班时间：<span class="red">2018-04-10</span></a>
<a href="#" class="right"><span class="red">预约报名</span></a>
</li><br>
<li>
<a href="#" class="left">开班时间：2018-04-10</a>
<a href="#" class="right">开班盛况</a>
</li>
</u1>
</div>
</div>
</body>
</html>
结果：
9_10.png
网友评论