关于css盒模型
盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:有效内容区域(width,height),内边距padding,边框border,外边距margin。(即装东西的容器) ,下面所说的盒子都等同于 HTML 元素,这里的盒子是二维的。所有 HTML 标签可以看作盒子,在 CSS 中,"box model" 这一术语是用来设计和布局时使用的。 (即网页布局 就是利用 CSS 摆盒子)
内容 content
概述 :CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。
width
-
作用:设置宽度
-
取值
-
auto默认值。浏览器可计算出实际的宽度。
-
px
-
百分比
-
height
-
作用:设置高度
-
取值
-
auto默认值。浏览器可计算出实际的宽度。
-
px
-
百分比
-
==html的宽高==
html {
width:100%; //html元素取浏览器可视区域宽度作为自己的宽度
height:100%;//html元素取浏览器可视区域高度作为自己的高度
}
==其余元素宽高 100% 都是取父盒子的宽高100%!!!==
边框 border
边框是围绕内容和内边距之间的一条或多条线,通过边框属性指定一个元素的边框的宽度、样式和颜色
border-width边框宽度
-
作用
-
设置所有边框宽度,或者单独地为各边边框设置宽度
-
-
取值
-
长度值
-
不允许指定负长度值。
-
-
语法
-
空格隔开1-4个值
-
1个值 设置所有边框宽度
-
2个值 设置上下、左右
-
3个值 设置上、左右、下
-
4个值 设置上、右、下、左
-
-
border-style边框样式
-
作用:设置标签所有边框的样式,或者单独地为各边设置边框样式。
-
取值
-
none 定义无边框。
-
dotted 定义点状边框。
-
dashed 定义虚线。
-
solid 定义实线。
-
double 定义双线。双线的 宽度等于 border-width 的值。
-
简写
定义四个边
-
语法:border:样式 宽度 颜色
.box{ width:100px; height:100px; /* 四个边简写 */ /* border:10px solid red; */ }
单个方向定义
说明:每个边框都可以设置样式宽度颜色 语法:border-方向:宽度 样式 颜色 【空格隔开】
拆分语法
-
border-方向-width:
-
border-方向-color
-
border-方向-style
.box{
/* 单个边简写 */
border-left:10px solid red;
border-right:10px solid green;
border-top:10px solid pink;
/* border-bottom:10px solid red; */
/* 单个边拆分的写法 */
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:yellow;
}
注意:边框会影响盒子实际大小,样式、宽度、颜色无书写顺序要求
==边框的添加也会撑大盒子模型!!!也是需要内减的!!!一个盒子可以w,h 为0 光有边框也行==
内边距 padding
CSS padding(内边距)属性,定义元素边框与元素内容之间的空间。 padding 可以单独改变元素的上、下、左、右边距,也可以一次改变所有的属性。
==内容与盒子边界距离!!==
单个方向设置
-
padding-bottom 设置标签的下内边距。
-
padding-left 设置标签的左内边距。
-
padding-right 设置标签的右内边距。
-
padding-top 设置标签的上内边距。
取值
-
px
-
默认值0
-
百分比
-
不可使用负值
==内边距不能放内容,但是可以填充背景色!!!!==
.box{
width:200px;
background-color:red;
padding-left:10px;
padding-right:20px;
padding-top:30px;
padding-bottom:40px;
}
简写
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
-
语法:padding:1-4个值 【空格隔开】
-
规则:
-
1个值:表示【四个方向】的内边距值
-
2个值:分别表示【上下,左右】的内边距值
-
3个值:分别表示【上,左右,下】的内边距值
-
4个值:分别表示【上,右,下、左】的内边距值
-
.box{
width:200px;
background-color:red;
padding:10px; 四个方向都是10px
padding:10px 20px; 上下为10px 左右20px
padding:10px 20px 30px; 上10px 左右20px 下30px
padding:10px 20px 30px 40px;上右下左
}
==设置内边距,撑大盒模型,需要内减计算! 在width,height属性上去减!==
外边距margin
概述:用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性
==左上外边距可以移动盒子位置 ,右下不可以移动盒子位置,但是可以设置盒子与盒子之间的距离!!!==
+margin-left 向右移动
-margin-left 向左移动
top外边距用法一样
单个方向定义
-
margin-bottom 设置下内边距。
-
margin-left 设置左内边距。
-
margin-right 设置右内边距。
-
margin-top 设置上内边距。
.box{
width:200px;
background-color:red;
margin-left:10px;
margin-right:20px;
margin-top:30px;
margin-bottom:40px;
}
简写
-
语法:空格隔开
-
取值:1-4个规则与padding值 一致
-
取值
-
px,
-
auto浏览器自动计算
-
允许使用负值
-
.box{
width:200px;
background-color:red;
margin:10px 20px 30px 40px;
}
外边距应用
-
外边距实现已知宽度的块级盒子居中
.box{
width:200px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
}
外边距问题
典理情形一
-
结构关系:嵌套块元素的垂直外边距塌陷
-
问题描述 :当父元素没有padding,margin,border时子元素与父元素直接相临,子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果最终结果是正值取两者中的较大值,负值取绝对值较大的值
-
表现:父子元素公用一个外边距
.parent{ width:100px; height:100px; background-color:red; } .child{ width:100px; height:100px; background-color:green; margin-top:100px; margin-bottom:100px; } <div class="parent"> <div class="child"> </div> </div>
-
解决方法
-
给父元素设置边框或内边距(慎用)
-
父元素overflow:hidden,改变渲染规则
-