盒模型
HTML是由一个个html元素组成的
盒模型:把每一个html元素想象成一个盒子
本篇主要介绍两个方面:1.盒模型的结构;2.盒模型如何影响元素之间的位置关系
盒模型的结构:
1.content(内容):用来显示内容(图片或者文字)
2.padding(内边距):内容与边框的距离
3.border(边框):元素的边框
4.margin(外边距):元素与元素之间的距离(父子元素,兄弟元素)在普通盒模型下:
普通盒模型又叫标准盒模型
盒子的宽=width + 左右padding + 左右border + 左右margin
盒子的高=height + 上下padding + 上下border + 上下margin<style> #div0 { background-color:yellow; padding-left:50px; padding-right:60px; padding-top:70px; padding-bottom:80px; border-top:5px solid red; border-right:6px dotted black; border-bottom:7px dashed blue; border-left:8px solid pink; margin-top:40px; margin-right:50px; margin-left:60px; margin-bottom:70px; } </style> <div id="div0"> 这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div这是综合div </div>
- content(内容)——盒子的内容,显示文本和图像。
背景色会渲染到border区域
书写顺序可随意
边框宽度可不写,默认3px
颜色可不写,默认与当前元素文本默认色相同<style> #div1 { background-color:yellow; } </style> <div id="div1"> 这是content这是content这是content这是content这是content这是content这是content这是content </div>
- padding(内边距)——清除内容周围的区域,内边距是透明的。
<style> #div2 { background-color:cyan; /*内边距 padding*/ /*padding-left: 50px; padding-right:60px; padding-top:70px; padding-bottom:80px;*/ /*简写 4个值 顺时针 上 右 下 左*/ /*padding:10px 20px 30px 40px; */ /*简写 3个值 上 左右 下*/ /*padding:10px 20px 30px*/ /*简写 2个值 上下 左右*/ /*padding:20px 30px;*/ /*简写 1个值 上下左右*/ /*padding:20px;*/ /*padding值为0时候,单位px可以不写*/ } </style> <div id="div2"> 这是padding这是padding这是padding这是padding这是padding这是padding这是padding这是padding </div>
- border(边框)——围绕在内边距和内容外的边框。
<style> #div3 { /* 设置一个边框需要三种值 1.边框的宽度 px 2.边框的类型 solid:实线; dotted:小正方点; dashed:虚线; 3.边框的颜色 */ background-color:green; /*border-top:5px solid red; border-right:6px dotted black; border-bottom:7px dashed blue; border-left:8px solid pink;*/ /*简写*/ /*border:3px solid orange;*/ /*方向:上、右、下、左 (顺时针)*/ border-width:10px 20px 30px 40px; border-style:solid dotted dashed solid; border-color:red blue yellow orange; } a{ border:8px solid } </style> <div id="div3"> 这是border这是border这是border这是border这是border这是border这是border这是border </div> <a href="">这是a链接</a>
- margin(外边距)——清除边框外的区域,外边距是透明的
<style> #div4{ background-color:cyan; /*外边距 margin*/ /*margin-top:40px; margin-right:50px; margin-left:60px; margin-bottom:70px; */ /*简写 方法和效果与padding一样*/ margin:10px 20px 30px 40px; margin:10px 20px 30px; margin:10px 20px; margin:10px; } </style> <div id="div4"> 这是margin这是margin这是margin这是margin这是margin这是margin这是margin这是margin这是margin </div>
margin的坑
1.相邻兄弟之间在垂直方向上margin会出现融合,会取两个元素中margin值较大的为融合后的值。
解决办法:
1.padding代替
2.只设置其中一个的margin2.父子关系的元素,如果父元素和子元素都设置了margin,,子元素的margin会传递到父级。
解决办法
1.父元素padding代替
2.给父元素添加 overflow:hidden 样式(建议使用)
3.给子元素加 float:left;或display:inline-block;
4.给父元素或子元素透明边框加 border:1px solid transparent;
5.给子元素绝对定位 postion:absolute;
6.给子元素加 padding:1px;margin合并的计算规则(兄弟和父子关系规则相同):
1.正正最大指。
2.正负值相加。
3.负负最负值。单个元素height为0时的自身margin合并:
1.正正值情况该元素的外部尺寸是最大的那个值
2.正负值情况该元素的外部尺寸是相加值。
3.负负值情况该元素的外部尺寸是绝对负值最大的值。怪异盒模型下:
怪异盒模型又叫IE盒模型,和标准盒模型的区别就是:怪异盒模型的宽或者高包含padding和border
设置盒模型类型
1.box-sizing:content-box 普通盒模型
2:box-sizing:border-box 怪异盒模型盒子的宽=width(左右padding+左右border)+左右margin
盒子的高=height(上下padding+上下border)+上下margin
auto
auto是一个值,可以帮助我们灵活的进行元素布局
在盒模型里面,只有width和margin可以用auto作为其值,auto一般用在块元素的横向布局上
1.如果width,margin-left,margin-right三个值有一个为值auto,其余两个必须为定值.
2.如果width,margin-left,margin-right三个值都为定值,发生冲突时系统会强制修改margin-right的值.
3.如果margin-left和margin-right都为auto,width必须为定值