盒子模型
一、定义元素的宽高
width和height指内容区域的宽度和高度
元素实际宽度=左右外边距+左右边框+左右内边框+width；
元素实际高度=上下外边距+上下边框+上下内边距+height；
定义元素的宽和高需要使用下面属性：
1、width宽度、height高度：固定的宽度和高度，当内容超出宽度和高度之后，不会自动填充扩展
2、min-width最小宽度、min-height最小高度 ：
最小宽度、最小高度：设置了最小宽度和最小高度之后，如果在div中没有任务文字，系统会显示一个最小宽度和最小高度的区域，若div中的文字超过了最小宽和最小高度，那么区域会自动进行填充扩展
3、max-width最大宽度、max-height最大高度 ：
最大宽度和最大高度是可以在范围之内自动根据内容的多少进行自动填充扩展，但如果是超过了最大宽度和最大高度的话，元素将只会延展到最大值就不会再继续延展下去了
4、单位是px像素、%百分比：
px是精确的像素，百分比是根据窗口大小设置的，若指定百分比，会根据窗口拖动的大小，来自动换行
具体示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*没有内容，设定最小宽高度*/
.block{ min-width: 50px;min-height: 30px; background-color: red }
/*超过最小宽高度，自动填充扩展*/
.block1{ min-width: 50px;min-height: 30px; background-color: #0708ff}
/*没有超过最大宽高度，自动填充扩展*/
.block2{max-width: 400px;max-height: 80px;background-color: #00da47}
/*超过最大宽高度，不会自动填充扩展*/
.block3{max-width: 400px;max-height: 80px;background-color: #da06cc}
.father{width: 500px;height: 200px;background-color: #ffff00}
.child{width: 50%;height: 50%;background-color: #0097ff}
</style>
</head>
<body>
<div class="block"></div>
<div class="block1">12月4日晚19点25分左右，在杭州市观澜时代云邸苑有一名怀孕七个月左右的孕妇不慎掉入窨井身亡，据了解，事发当晚19点36分许，杭州消防中队在接消息后迅速赶到了现场进行营救。到场后发现被困女子跌落直径约1米，深度约4米的下水道深井中。随后，消防中队派出一名经验丰富的消防员携带救护工具下井进行施救。大约十几分钟后，消防员便将被困女子拉出了地面，此时的女子已经处于无意识的状态，随后该女子被送往医院救治。遗憾的是，因为女子被困时间过长。送医时已无生命体征，经过医院的全力救治，女子和胎儿最终没能救回。</div>
<div class="block2">公安部在京召开新闻发布会，通报公安部组织指挥浙江等地公安机关破获特大海外医疗诈骗案有关情况。</div>
<div class="block3">重庆外卖哥陈登超，12岁时因为小儿麻痹症，左腿完全萎缩。如今，他只能靠着一条腿和一副拐杖走路。送外卖，拼的就是速度。可是身有残疾的陈登超，又是如何及时把餐送到目的地的呢？</div>
<br/>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
二、margin外边距
1.一个布局元素与其他元素之间的距离
2.语法：margin：value；
3.属性：
margin：value 四个方向的外边距
margin-left： 左外边距
margin-right： 右外边距
margin-top： 上外边距
margin-bottom： 下外边距
4. 取值：1）具体数值（px）
2）% 百分比
3）值为auto，由浏览器自动计算 左右外边距，上下无效
允许让块级元素 ， 呈现出水平居中的表现效果，前提：块级元素必须设置宽度
5.举例
margin：0； 取消默认外边距
margin：10px 20px ； 上下各10像素外边距，左右各20像素外边距
margin：5px 10px 15px； 上外边距：5像素，左右外边距：10，下外边距：15
margin：1px 2px 3px 4px ； 上 1，右 2，下 3，左4三、padding内边距
1.内容区域与边框之间的区域
2.语法：padding：value；
3.属性：
padding：value 四个方向的内边距
padding-left：1px； 左内边距
padding-right：2px； 右外边距
padding-top：3px； 上内边距
padding-bottom：4px； 下内边距
4.取值：数值，% 用法与margin相似
使用margin与padding需要注意的事项
（1）在我们进行网页设计时，body是自带了外边距与内边距的，所以我们需要先利用css将body的内外边距设置为0
body{padding:0px;margin:0px;}
（2）同时我们在使用标签时，也会自带padding和margin，如果有需要的话，可以设置内外边距为0px
(3) 如上情况，可以使用通用选择器*{padding:0px;margin:0px;}来初始化所有标签的内外边距
(4) adding会增大元素的大小，若一个元素设置宽为200px，高为200px，假如设置了padding为20px，那么元素的大小为220px*220px，所以如果需要控制元素大小只能是200px*200px的话，那么在设置宽和高的时候，就只能设置180px、180px，需要将padding部分计算在内
(5) margin不会影响元素的大小
四、border边框
- 边框的组成部分包含以下三个属性：
border-width：边框宽度，单位为number
border-color：边框颜色，可以是颜色值也可以设置为透明色（transparent）
border-style：边框样式，solid –实线/ dotted-点线 / dashed-虚线段
- 边框的简写格式： 宽度，样式，颜色
border: width style color;
border:1px solid red;- 如果只需要修改四个方向中某一个方向的border，可以如下写法：
border-top：1px solid red
border-bottom：1px solid red
border-left：1px solid red
border-right：1px solid red- 如果需要改某个边的某一个值，可以如下写法：
border-top-color：red五、添加浮动
1、float添加浮动介绍
当我们在使用div进行嵌套布局时，如果div嵌套了div，那么一个嵌套的div就会占据一整行，如果我们想要实现多个嵌套的div能够在一行显示，那么就需要使用浮动功能float
2、float属性介绍
float：left 向左浮动
float：right 向右浮动
float：none（默认值，元素不浮动）
具体示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
/*同一行左右布局分栏*/
.block{width: 1000px;height:400px;border: 2px solid red}
.block_left { float:left;width:300px; height: 300px;background-color: orange}
.block_right { float:right;width:300px; height: 300px;background-color: orange}
.list{list-style: none; width:360px;height: 300px;border: 2px solid purple }
.list li{float: left; width: 100px;height: 100px; background-color: yblue;margin:10px }
</style>
</head>
<body>
<!--同一布局分栏-->
<div class="block">
<div class="block_left"></div>
<div class="block_right"></div>
</div>
<br/>
<!--列表实现多层同行显示布局-->
<div class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
