现在的位置: 首页 > 综合 > 正文

css_盒子模型

2017年12月27日 ⁄ 综合 ⁄ 共 1618字 ⁄ 字号 评论关闭

w3c链接: http://www.w3school.com.cn/css/css_boxmodel.asp

盒子模型:
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。

外边距可以是负值,而且在很多情况下都要使用负值的外边距。

背景应用于由内容和内边距、边框组成的区域。

 

内边距padding:

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。

百分数值是相对于其父元素的 width 计算的,左右内边距和上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度,

示例:

h1 {padding:10px;}         

h1 {padding:10px 0.25em 2ex 20%;}

h1 {

  padding-top: 10px;

  padding-right: 0.25em;

  padding-bottom: 2ex;

  padding-left: 20%;

  }

p {padding:10%;}//把段落的内边距设置为父元素 width 的 10%

 

边框border:

边框属性有3个方面:宽度width、样式style,以及颜色color。

样式:p{border-style: solid solid solid none;}

宽度:p { border-style:solid; border-width: 15px 5px 15px 5px;}

颜色:p { border-style: solid;border-color: blue red; }

样式默认值:由于 border-style的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式。根据以下规则,所有 h1 元素都不会有任何边框,更不用说 20 像素宽了:h1{border-width: 20px;}

border-style:solid; :solid (直线式边框)

颜色默认值:默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色,它将与元素的文本颜色相同。

.bd_cont {
	padding: 10px;
	background: #fff;
	border: 1px dotted #ccc;
	border-top: 1px solid #379ad5;
	border-radius: 0 0 3px 3px;//圆角边距
	overflow: hidden;
	zoom: 1; //IE清除浮动
	clear: both;
	margin-bottom: 15px;
}

 

外边距margin:

margin 属性,这个属性接受任何长度单位、百分数值甚至负值。百分数是相对于父元素的 width 计算的

p {margin: 20px 30px 30px 20px;}

h2 {

  margin-top: 20px;

  margin-right: 30px;

  margin-bottom:30px;

  margin-left: 20px;

  }

外边距合并:当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

链接:http://www.w3school.com.cn/css/css_margin_collapsing.asp

margimargin0px
auto
; :上下边界为0,左右根据宽度水平居中。(必需设置宽度,文档的DOCTYPE)

链接:http://www.jb51.net/css/37662.html

 

参数个数所代表的区域:如margin: 20px 30px 30px 20px;

如果提供全部四个参数值,将按上-右-下-左的顺时针顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上-下,第二个用于左-右。

如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。




抱歉!评论已关闭.