CSS盒子模型
CSS基础-盒模型
盒模型
边框属性
?什么边框?
?边框就是环绕在标签宽度和高度周围的线条
?边框属性的格式
?连写(同时设置四条边)
?border: 边框的宽度边框的样式边框的颜色;
?示例代码
?
? bd+ border: 1px solid #000;
?注意点:
?连写格式中颜色属性可以省略, 省略之后默认就是黑色?连写格式中样式不能省略, 省略之后就看不到边框了?连写格式中宽度可以省略, 省略之后还是可以看到边框?按方向连写(分别设置四条边)
? border-top: 边框的宽度边框的样式边框的颜色;
? border-right: 边框的宽度边框的样式边框的颜色; ? border-bottom: 边框的宽度边框的样式边框的颜色; ? border-left: 边框的宽度边框的样式边框的颜色; ?示例代码
?
? bt+ border-top: 1px solid #000;
? br+ border-right: 1px solid #000;
? bb+ border-bottom: 1px solid #000;
? bl+ border-left: 1px solid #000;
?按要素连写(分别设置四条边)
? border-width: 上右下左;
? border-style: 上右下左;
? border-color: 上右下左;
?示例代码
注意点:
?这三个属性的取值省略时的规律
?上右下左 > 上右下 > 左边的取值和右边的一样
?上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
?上右下左 > 上 > 右下左边取值和上边一样
外边距的那一部分是没有背景颜色的
外边距合并现象
默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
示例代码
我是span我是span
margin-top问题
如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)
示例代码
?text-align:center;和margin:0 auto;区别
?text-align: center; 是设置盒子中存储的文字/图片水平居中?margin:0 auto;是让盒子自己水平居中
?示例代码
盒模型
?什么是CSS盒模型?
?CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型
?CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
?这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML 标签又叫做盒模型
?示例代码
?盒模型宽度和高度
?内容的宽度和高度
?就是通过width/height属性设置的宽度和高度
?元素的宽度和高度
?宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
?高度同理可证
?规律
?增加了padding/border之后元素的宽高也会发生变化
- 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高
?元素空间的宽度和高度
?宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框+ 右外边距
?高度同理可证
box-sizing属性
?CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变?box-sizing取值
?content-box
?元素的宽高 = 边框 + 内边距 + 内容宽高
?border-box
?元素的宽高 = width/height的宽高
?增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度
?示例代码
CSS3——盒子模型
在浏览器上运行得网页实际上就是一份HTMＬ文件,这份文件得主体则就是由多个HTML标签所组成, 网页在显示这些标签得时候,会使用盒子模型来计算这些标签该如何显示在网页上。盒子模型得定义里,每个显示在网页上得标签都就是一个矩形对象,这些矩形对象包含了各种显示样式,在浏览器显示网页给用户时,会依照这些显示样式,来决定网页上标签得面积、边距、位置等显示外观。 另外,盒子模型中得矩形对象都包含了一个内容区域,这个内容区域能够容纳其她得矩形对象,盒子模型通过这样一层套一层得方式,将树状结构得标签,展开成为树状结构得矩形对象、浏览器在显示网页给用户时,会依照这个树状结构得矩形对象,来决定矩形对象之间会互相影响得显示外观。 矩形对象得主要得几个样式如下: １。外边距(marｇiｎ):定义了矩形对象与其她矩形对象之间得距离,包括矩形对象与内容区域之间得距离、同一个内容区域内相邻得两个矩形对象之间得距离。 (１)mａrgiｎ得属性内容可以设置为长度、百分比、autｏ等属性、当设置为百分比时,会依照父矩形对象得内容区域大小来作为百分比得计算基数;
当设置为ａuto时,浏览器会参照矩形对象本身、父矩形对象、定位样式等得样式,由浏览器自动配置矩形对象得外边距大小、 (2)外边距合并功能:上下两个相邻得矩形对象之间得外边距会合并,合并后得外边距会以较大得数值作为设置值。 2。边框(bｏｒder):定义边框得框线样式与框线粗细,还有颜色。
3.内边距(paｄding):内边距定义内容区域与边框之间得距离。同样得,其属性值可以就是长度、百分比(同外边距)等。
4。宽度与高度(ｗidth、hｅｉｇht):定义盒子模型得内容区域得大小,其属性可以就是长度、百分比与ａｕｔo等。
CSS盒子模型
CSS基础-盒模型 盒模型 边框属性 ?什么边框? ?边框就是环绕在标签宽度和高度周围的线条 ?边框属性的格式 ?连写(同时设置四条边) ?border: 边框的宽度边框的样式边框的颜色; ?示例代码 ? ? bd+ border: 1px solid #000; ?注意点: ?连写格式中颜色属性可以省略, 省略之后默认就是黑色?连写格式中样式不能省略, 省略之后就看不到边框了?连写格式中宽度可以省略, 省略之后还是可以看到边框?按方向连写(分别设置四条边) ? border-top: 边框的宽度边框的样式边框的颜色;
? border-right: 边框的宽度边框的样式边框的颜色; ? border-bottom: 边框的宽度边框的样式边框的颜色; ? border-left: 边框的宽度边框的样式边框的颜色; ?示例代码 ? ? bt+ border-top: 1px solid #000; ? br+ border-right: 1px solid #000; ? bb+ border-bottom: 1px solid #000; ? bl+ border-left: 1px solid #000; ?按要素连写(分别设置四条边) ? border-width: 上右下左; ? border-style: 上右下左; ? border-color: 上右下左; ?示例代码