CSS系列:CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念。所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小。
1. 盒子的内部结构
在CSS中,一个独立的盒子模型由content(内容)、border(边框)、padding(内边接)和margin(外边距)4个部分组成。
一个盒子实际所占的宽度(或高度)是由“内容 + 内边距 + 边框 + 外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小,并且对于任何一个盒子,都可以分别设定4条边各自的border、padding和margin。
2. 边框(border)
border一般用于分隔不同元素,border的外围即为元素的最外围,在计算元素实际的宽和高时,需要将border纳入,即border会占据空间。
border的属性主要有3个,分别是color、width和style。在使用CSS设置边框的时候,可以分别使用border-color、border-width和border-style来设置。
对不同的边框设置不同的属性值方法:按照规定的顺序,给出2个、3个或者4个属性值。
◊ 如果给出1个属性值,表示上下左右4条边框的属性值,同为一个值。
◊ 如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性。
◊ 如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性。
◊ 如果给出4个属性值,依次是上右下左边框的属性,即顺时针排序。
示例:
border-style: solid;
border-style: solid dashed;
border-style: solid dashed dotted;
border-style: solid dashed dotted double;
对于border-width,border-color的属性值设置与border-style类似,支持相同的缩写形式。
border: 1px solid #ff0000;
3. 内边距(padding)
padding内边距用于控制内容与边框直接的距离。
padding: 5px;
padding: 5px 10px;
padding: 5px 10px 2px;
padding: 5px 10px 2px 3px;
4. 外边距(margin)
margin是元素与元素之间的距离。
margin: 5px;
margin: 5px 10px;
margin: 5px 10px 2px;
margin: 5px 10px 2px 3px;
CSS系列:CSS中盒子模型的更多相关文章
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- CSS Box Model(盒子模型)
CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- css的两种盒子模型
css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...
- 认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
- css中盒子模型与box-sizing属性
盒子模型 w3c标准:定义的width为 内容,有padding,border 都会使得 最终呈现的宽度为 定义的width+padding+border的总和,有margin另加 ie标准:定义的w ...
- CSS中盒子模型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】CSS(10)盒子模型
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...
- css笔记17:盒子模型加强版的案例
1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...
随机推荐
- JavaScript中严格模式"use strict";需注意的几个雷区:
1.with语句会抛错误 2.未声明的变量被赋值会报错 3.arguments在严格模式下变为静态,传入的参数与arguments无关系 4.delete会报错 5.对象的重复属性名会报错 6.禁止八 ...
- [软件推荐、资料分享]MATLAB
MATLAB是美国MathWorks公司出品的商业数学软件,用于算法开发.数据可视化.数据分析以及数值计算的高级技术计算语言和交互式环境,主要包括MATLAB和Simulink两大部分. Matlab ...
- python 时间转换
def getDateTime(time_str): ''' 转换时间 :param time_str: :return: ''' if not isinstance(time_str,unicode ...
- [转]Android Studio 里搭建自动化测试框架Robotium
Android的自动化测试框架可选择的不多,后来选了Robotium(https://code.google.com/p/robotium/),它的语法及易用性挺像我们用在iOS里的KIF. 官方文档 ...
- 数字对象NSNumber
//将int类型转化成对象 ; NSNumber *numberString = [NSNumber numberWithInt:number]; //对象是可以放入数组的 NSArray *arra ...
- input在标签内设置禁止输入空格
1.通过正则匹配解决问题 此处涉及\s:匹配任意空白符 \S:匹配任意非空白字符 <input type="text" onkeyup="this.value=t ...
- Django models知识小点
django 为使用一种新的方式,即关系对象映射(ORM) 一,创建表 1,基本结构 注意: 1,创建标的时候,如果我们不给表加自增列,生成表的时候会默认给我们生成一列为ID的自增列,当然我们也可以自 ...
- Android进程间通讯
最近研究了一下Android进程间通讯,原来只是会用,但是只是会用是不行滴,就来研究一下. 刚开始看的时候,我的头是这么大,看了一夜的时候,头就变成这样了,,吓得宝宝赶紧上床休息了,. 先喝喝茶讲个故 ...
- POJ2369 Permutations(置换的周期)
链接:http://poj.org/problem?id=2369 Permutations Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- CentOS 6.5系统安装配置LAMP(Apache+PHP5+MySQL)服务器环境
安装篇: 一.安装Apache yum install httpd #根据提示,输入Y安装即可成功安装 /etc/init.d/httpd start#启动Apache 备注:Apache启动之后会提 ...