盒子模型,边框(border),内边距(padding)

在网页中 一切都是盒子(important)

盒子大小由内容区,内边距,边框决定

一:内容区(content)

 内容区指的是盒子中放置内容的区域,也就是元素 中的文本内容子元素都是存在于内容区中的。

用width height 来设置内容区的大小

width height只适用于块元素


二:边框用 border属性 (width,color,style)

border-width:10px  20px 30px 40px; 上右下左的边框距

border-width:10px  20px 30px;上 左右 下的边框距

border-width:10px  20px 30px;上下 左右的边框距

border-width:10px;所有边框的边框距

border-color:red green orange yellow;上右下左的边框距颜色

border-color:red green orange;上 左右 下的边框距颜色

border-color:red green;上下 左右的边框距颜色

border-color:red;所有的边框局颜色

border-style :solid 实线, dotted 点状, dashed 虚线, double 双线

border:green solid 20px(简写)

上下左右边框 的边框样式

border-top: orange solid 20px;

border-bottom: green solid 20px;

border-left:red solid 20px 

border-right: blue solid 20px;

设置除了右边的其他三个边框

border:color  style  width

1  border: green solid 20px;

border-right:none;

2  border-left: red solid 20px;

border-top: orange solid 20px;

border-bottom: green solid 20px;


三:内边距 用padding来

内边距指的就是元素内容区与边框以内 的空间。

设置上左下右 的内边距
padding-top: 100px;

padding-left: 200px;

padding-bottom: 100px;

padding-right: 200px;

padding:10px 20px 30px;

分别指定上、左右、下四个方向的内边距

padding:10px 20px;

分别指定上下、左右四个方向的内边距

padding:10px;

同时指定上左右下四个方向的内边距

你可能感兴趣的:(盒子模型,边框(border),内边距(padding))