CSS盒子模型(Box Model)

CSS盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

CSS将页面中所有的元素设置为了一个矩形的盒子

将元素设置为盒子后,对页面的布局就变成了对不同的盒子的摆放

每一个盒子由以下几部分组成:

• content(内容)          -盒子的内容，显示文本和图像。
• border(边框)           -围绕在内边距和内容外的边框。
• padding(内边距)     -清除内容周围的区域，内边距是透明的。
• margin(外边距)       -清除边框外的区域，外边距是透明的。

content(内容)

• 元素中所有的子元素和文本内容都在内容区排列
  内容区的大小由width和height设置

border(边框)

• 边框( border):边框属于盒子边缘,边框里边属于盒子的内部,出了边框都是盒子的外部

• 设置边框必须设置三个属性

• border-width
• border-color
• border-style

(不写会有默认值)

border-width:边框的大小

• 只有当边框样式不是 none 时才起作用。
• 如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值

最多可以设置四个值(空格隔开)

• 四个值:上 右 下 左
  border-width:20px 20px 20px 20px;
  

border-width:20px 30px 40px 50px;

• 三个值:上  左右  下
  border-width: 10px 30px 60px;
  

border-width: 30px 10px 60px;

• 两个值:上下   左右
  border-width: 20px 60px;
  

border-width: 60px 20px;

• 一个值:上下左右
  border-width:20px;
  

• border-xxx-width:

xxx:是top(上)  right右()  bottom下()  left(左) 其中一个
用来单独修改指定某一个边的边框
例如修改border-width:20px; 的上边框为50px
添加border-top-width:50px;,就变成了

border-color: 指定边框的颜色

• 规则和border-width基本一致(上右下左)
• 默认是color的颜色

border-style:边框的样式

默认是无边框

• none                定义无边框
• hidden              与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突
• dotted              定义点状边框。在大多数浏览器中呈现为实线
• dashed    定义虚线。在大多数浏览器中呈现为实线
• solid        定义实线
• double      定义双线。双线的宽度等于 border-width 的值
• groove       定义 3D 凹槽边框。其效果取决于 border-color 的值
• ridge        定义 3D 垄状边框。其效果取决于 border-color 的值
• inset        定义 3D inset 边框。其效果取决于 border-color 的值
• outset     定义 3D outset 边框。其效果取决于 border-color 的值
• inherit     规定应该从父元素继承边框样式

• border简写属性:
  border: 大小 颜色 样式;
  没有固定顺序,空格隔开

box{border:red 10px solid;}

padding(内边距)

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

一共有四个方向的内边距:

• padding-top 上内边距的宽度

• padding-left 左内边距的宽度

• padding-right 右内边距的宽度

• padding-bottom 下内边距的宽度

主要设置调整内容(content)的位置

padding的简写

• padding:top right bottom left(上右下左);
• 规则和border-width基本一样

margin(外边距)

• 外边距不会影响盒子可见框的大小
  • 但是外边距会影响盒子的位置

• 可以设置正负值来移动盒子
• 设置了margin后,盒子的内容宽高不会改变，但真实宽高却会发生改变

margin的简写

• margin:top right bottom left(上右下左);
• 规则和border-width基本一样

padding(内边距)和margin(外边距) 区别点

• margin是用来隔开元素与元素的间距
• padding是用来隔开元素与内容的间隔
• margin用于布局分开元素使元素与元素互不相干
• padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”