标准盒子模型
一个标准的的盒子模型是有:
- content:内容
- padding:内边距(内容到元素边框的距离)
- border:边框,可以分开设置四边
- margin:外边框(此控件和相邻控件之间的距离)
border边框设定
border有四个方向的值可以设定top,right,bottom,left
border-方位-width:边框宽度像素
border-方位-style:solid(实线) dashed(虚线) dotted(点线) double(双边线)
border-方位-color:颜色
复合属性
border-方位:width style color
如:
border-bottom:1px solid red
四边设置
border:width style color
注意:
- 边框的设置至少要有两个值:宽度和类型、颜色不写默认是黑色
- 盒子设置边框会被撑大
- 背景颜色铺设在边框区域
说明:背景颜色会包含边框,及边框的底色依然是元素的背景色
所有的li的坐标不会超过border
注意:可以在网页的最上面设定一个通用css文件,里面放上通配符和超链接等通用样式
在建立一个网页的时候先导入,这样可以执行一些预备命令,比如:
- 取消系统给所有默认标签边框
- 取消列表符号
- 取消超链接下划线
- 设定字体大小和字体颜色
- 还可以设置输入框大小或格式等......
padding内边距
内容到边框的距离
padding-(top/left/right/bottom):width
复合属性
padding:width
复合属性的属性值有四种设置格式
- padding:上 右 下 左(四个值)
- padding:上 左右 下 (三个值)
- padding:上下 左右(两个值)
- padding:四边(一个值)
margin外间距
盒子与盒子之间的距离 / 合资与浏览器边之间的距离
- 盒子和盒子的兄弟关系
- 盒子和盒子的父级关系
计算标准盒子模型的大小
盒子标准的大小计算
- 盒子的宽度 = width + padding * 2(左右)+ border * 2(左右)
- 盒子的高度 = height + padding * 2(上下))+ border * 2(上下)
盒子占据控件大小
- 所占宽度 = width + padding * 2(左右)+ border * 2(左右)+ margin * 2(左右)
- 所站高度 = height + padding * 2(上下))+ border * 2(上下)+ margin * 2(上下)
示例:
说明:需要调试的网页在浏览器例行程css的检查调试器,可以进行当前页面的css临时修改
怪异盒子(IE盒子)
怪异盒子是之边框包含在控件的width取值范围内
width = content + padding + border
怪异盒子的大小计算
标准大小
- 宽度 width = (css中设置的width值)
- 高度 :height = css设置
所占空间
- 宽度 = width + margin * 2(左右)
- 高度:height + margin * 2(上下)
box-sizing:border-box
示例:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终大小就是 width 200的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪乔治
</div>
<br>
<p>小猪佩奇</p>
效果:
说明:由于边框内包所以导致整个内部的div不会撑开外部的结构(宽度)
怪异盒子变为普通盒子
content-box
注意
在这是设置padding和margin如果设置百分数时,无论哪个方向都会参考父元素的宽高
案例:
说明:设置margin为50%后,小div的左上角点就坐落在大div的中心点,因为margin-left和margin-top会有50%的间距。
- width的默认值auto和100%的区别
- 100%:盒子参考父元素的高度,父元素大小决定了内部容器的大小,添加padding和border会影响盒子的大小,即获取父原素的高度+border,父500 边框10 最终500+20=520高度
- 默认(auto):自动(自适应),动态取值,排除了padding+border+margin之后的所占空间,是剩下的区域 ,即获取父元素的高度-border 父500 边框10 最终500-20=480高度
练习
制作一个用边框完成的三角形图案
body {
background-color: violet;
}
.box {
/* width: 200px;
height: 200px; */
/* background-color: orangered; */
border-left: 100px solid red;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}
</style>
<div class="box"></div>
效果:
说明:当前在对一个边框进行设置颜色的时候,做透明设置,通知宽和高都为0,此时就能变为如图三角形形式