一、盒模型、盒子模型、框模型 (box model)

网页中也有很多的元素，将各种元素摆放在合适的位置盒模型将页面所有元素的形状都统一了，你在布局时只需要考虑到元素的大小即可。

盒模型：

内容区 content

内边距 padding

边框 border

外边距 margin

盒子的大小: 内容区、内边距、边框有关系，跟外边距是没有关系

二、边框

边框 (border) 边框用来隔开盒子内部和盒子外部

设置边框，三个要素，缺一不可

边框的宽度 border-width

1、可以设置多个值，以空格隔开即可

4个值上右下左

3个值上左右下

2个值上下左右

2、单独设置某一边的宽度

border-top-width: ;

border-bottom-width: ;

border-left-width: ；

border-right-width: ;

3、border-width 是由默认值，默认大小在1-3px

边框的颜色 border-color

1、可以设置多个值

规则跟border-width是一样

2、单独设置某一边的颜色

border-XXX-color:;

XXX:top、right、bottom、left

3、小箭头的写法

border-color: transparent transparent orange transparent ;

4、border-color 有默认值，默认值是黑色

边框的样式 border-style

1、边框样式的种类

solid 实线

dotted 点状的虚线

dashed 虚线

double 双线

2、可以写多个样式

规则跟border-width一样

3、单独设置某一边样式

border-XXX-style:;

XXX:top、right、bottom、left

4、border-style 默认值是none

三、边距

padding 是边框和内容区之间的距离

1、内边距可以单独设置某一边的内边距

padding-top:;

padding-right: ;

padding-bottom:;

padding-left:;

2、内边距padding简写

可以写多个值，规则跟border-width是一样

3、外边距

外边距 margin

不影响盒子的大小，可以改变盒子的位置

margin-top 设置元素上外边距，如果正值,元素向下移动,如果负值，元素向上移动

margin-right 设置元素右外边距，元素是没有效果

margin-botoom 设置元素下外边距，正值，元素自己不懂，会挤下面的元素向下移动，负值，下面的元素向上移动

margin-left 设置元素左外边距，正值，元素向右移动，负值，元素向左移动

margin简写

margin 可以设置多个值，规则跟padding一样

四、水平布局

水平方向能影响到inner所占位置的因素有哪些

margin-left border-left padding-left width padding-right border-right margin-right

过度约束：

浏览器规定，元素水平方向7个值相加，必须要等与其父元素内容区的宽度，

如果不等于，浏览器就会进行调整，让等式成立

margin-left+border-left+padding-left + width + padding-right +

border-right+ margin-right=父元素内容区的宽度

1、如果水平方向7个值当中没有auto，浏览器会自动调整margin-right的值

40+20+0+100+0+20+ 420 =600

2、7个值当中，有3个值可以设置auto，margin-left width margin-right

（1）设置1个auto 谁是auto，浏览器就调整谁

margin-left

auto+20+0+100+0+20+0=600 auto=460

width

40+20+0+auto+0+20+0=600 auto=520

margin-right

（2）设置2个auto

margin-left width 调整width

width margin-right 调整width

margin-left margin-right 同时调整margin-left margin-right

设置3个auto

margin-left width margin-right 调整的就是width

总结：

1、如果7个值当中有auto，调整的顺序

width > margin-left margin-right

2、如果想让块元素水平方向居中，必须要width为固定值，左右外边距为auto

关于盒子模型的简单介绍相关推荐

Python 框架之 Django MVT 下的 M 的模型的简单介绍和使用
Python 框架之 Django MVT 下的 M 的模型的简单介绍和使用目录
VAE 模型基本原理简单介绍
VAE 模型基本原理简单介绍 1. 编写目的 2. 推荐资料 3. 相关背景 3.1 生成模型(Generative model): 3.2 隐变量模型(Latent Variable Models) ...
前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用
一.字体样式(font) font-style [用于打开和关闭斜体文本] • normal 正常字体,关闭斜体 • italic 斜体 • oblique 模拟斜体 font-weight [为字体 ...
几种服务器端IO模型的简单介绍及实现（转载）
作者:阿凡卢出处:http://www.cnblogs.com/luxiaoxun/ 服务器端几种模型: 1.阻塞式模型(blocking IO) 我们第一次接触到的网络编程都是从 listen() ...
微软BI 之SSAS 系列 - 在 SQL Server 2012 下查看 SSAS 分析服务的模型以及几个模型的简单介绍...
在SSDT中部署一个 SSAS 项目到本地服务器上出现错误. You cannot deploy the model because the localhost deployment server i ...
python模型的属性是什么_Python的自定义属性访问跟描述器以及ORM模型的简单介绍...
一 . 自定义属性访问 1.__getattr__ 作用:当我们访问属性的时候,如果属性不存在(出现AttrError),该方法会被触发. 2.__getattribute__ 作用:访问属性的时候, ...
退化过程及模型的简单介绍
1. 退化研究背景产品可靠性是指元件.产品.系统等在规定条件下和规定时间内完成规定功能的能力.在可靠性理论中,将产品丧失所规定功能的现象称为失效. 产品的失效主要分成两种类型.第一种是突发型失效,指 ...
Pytorch模型层简单介绍
模型层layers 深度学习模型一般由各种模型层组合而成. torch.nn中内置了非常丰富的各种模型层.它们都属于nn.Module的子类,具备参数管理功能. 例如: nn.Linear, nn.F ...
计算机操作系统生产者和消费者模型的简单介绍
同步互斥小口诀画图理解题目判断题目类型分析进程数目填写进程模板补充基本代码(伪代码) 补充PV代码检查调整代码注意事项代码是一步一步写出来的,代码是反复调整写出来的 60%是生产者和消 ...

关于盒子模型的简单介绍

一、盒模型、盒子模型、框模型 (box model)

二、边框

三、边距

四、水平布局

关于盒子模型的简单介绍相关推荐

最新文章

热门文章