当前位置 : 主页 > 网页制作 > css >

8 盒子模型

来源:互联网 收集:自由互联 发布时间:2021-06-13
盒子模型 首先,我们来看一张图,来体会下什么是盒子模型。 所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(element box),它描述了一个文档元素再网页布局汇总所占

盒子模型

首先,我们来看一张图,来体会下什么是盒子模型。

所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(element box),它描述了一个文档元素再网页布局汇总所占的位置大小。因此,每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。

盒子边框(border)

语法:

border : border-width || border-style || border-color

边框属性—设置边框样式(border-style)

none:没有边框即忽略所有边框的宽度(默认值)

solid:边框为单实线(最为常用的)

dashed:边框为虚线  

dotted:边框为点线

double:边框为双实线

盒子边框写法总结

上边框

border-top-style:样式;

border-top-width:宽度;

border-top-color:颜色;

border-top:宽度 样式 颜色;

下边框

border-bottom-style:样式;

border- bottom-width:宽度;

border- bottom-color:颜色;

border-bottom:宽度 样式 颜色;

左边框

border-left-style:样式;

border-left-width:宽度;

border-left-color:颜色;

border-left:宽度 样式 颜色;

右边框

border-right-style:样式;

border-right-width:宽度;

border-right-color:颜色;

border-right:宽度 样式 颜色;

样式综合设置

border-style:上边 [右边 下边 左边];

(none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线)

border-width:上边 [右边 下边 左边]; 像素值

border-color:上边 [右边 下边 左边]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)

border:四边宽度 四边样式 四边颜色;

例子

border-top: 1px solid red; /*上边框*/
border-bottom: 2px solid green; /*下边框*/
border-left: 1px solid blue;
border-right: 5px solid pink;
border: 1px solid red;

内边距(padding)

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

写综合属性,用空格隔开

/*
上 右 下 左
*/

padding: 20px 30px 40px 50px ;

/*
上 左右  下
*/

padding: 20px 30px 40px;

/*
 上下 左右
*/

padding: 20px 30px;

/*
上下左右
*/
padding: 20px;

一些标签默认有padding

我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{
  padding:0;
  margin:0;    
}

But,这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签(不同背,因为有人已经给咱们写好了这些清除默认的样式表,reset.css)

https://meyerweb.com/eric/tools/css/reset/

外边距(margin)

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
margin-bottom: 100px;
网友评论