| 关于CSS盒子模型的理解 | 您所在的位置：网站首页 › css盒子模型的理解 › 关于CSS盒子模型的理解 |
关于CSS盒子模型的理解
|
关于css盒模型
盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：有效内容区域(width,height),内边距padding,边框border,外边距margin。（即装东西的容器） ，下面所说的盒子都等同于 HTML 元素，这里的盒子是二维的。所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。 （即网页布局 就是利用 CSS 摆盒子）
概述 ：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 光有边框也行== 内边距 paddingCSS 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; }解决方法 给父元素设置边框或内边距（慎用） 父元素overflow:hidden,改变渲染规则 |
【本文地址】