CSS学习篇核心之——盒子模型

当前位置 : 首页 > 网页制作 > CSS > CSS学习篇核心之——盒子模型

CSS学习篇核心之——盒子模型

来源: 作者: 时间:2016-01-28 09:27
概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识。 盒子模型 元素框的最内部分是实际的内容(ele


概述


关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识。

盒子模型


\

元素框的最内部分是实际的内容(element),直接包围内容的是内边距(padding),内边距呈现了元素的背景,内边距的边缘是边框(bZ喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcmRlcqOpo6zN4rHfvuCjqG1hcmdpbinErMjPysfNuMP3tcSjrNLytMuyu7vh1dq1ssbkuvO1xMjOus7UqsvYo6y21NPa1eK49s28sd+/8s3itcSyv7fWvs3Kx21hcmdpbqOssd+/8sTaxNrI3c3itdiyv7fWvs3Kx3BhZGRpbmehozwvcD4KPHA+IDwvcD4KPHA+ICAgICAg1NpDU1PW0M7Sw8fSu7Djz7C539DUtcS9q83isd++4LrNxNqx377gyejWw86qMKOsvLQ8L3A+CjxwPjxicj4KPC9wPgo8cD48L3A+CjxwcmUgY2xhc3M9"brush:java;">* { margin: 0; padding: 0; }

element元素


在中,width和height是element区域的宽度和高度,对padding、border、margin增加尺寸不会影响element的宽度和高度,只会增加整个框的尺寸。

下面我们看个例子:假设框的每个边上有 10个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素


\


#box {
width: 70px;
margin: 10px;
padding: 5px;
}


这样的话对于element、padding、border、margin的尺寸就更加的一目了然了,这里需要注意下的是,padding、border、margin即可以应用于一个元素的所有边,也可以应用于单独的边,还有一点就是,margin可以是负值。

内边距(Padding)


元素的内边距是再边框和内容区之间,padding属性设置用长度值或者百分比值,但不允许用负值。关于用百分比的话,有一点需要注意是,即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。

对于padding的设置,可以设置它的上下左右这四个边距。

h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}




 h1 {padding: 10px0.25em 2ex 20%;} 

上述这两种方法实现的效果是一致地,如果我们的四个边距是一样的话可以用下面这句话。

h1 {padding: 10px;}


边框(border)


元素的边框(border)是围绕元素内容和内边距的一条或多条线,可以规定元素边框的样式、宽度和颜色,这样可以创建出效果更佳出色的边框。

样式


样式是边框的最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。


border可以先设置样式,设置样式的顺序为op-right-bottom-left,设置样式的属性为border-style;

如果想设置单边样式则为:


border-top-style

border-right-style

border-bottom-style

border-left-style


宽度


边框宽度属性设置用border-width设置;

如果想单独设置各边的宽度则用:


border-top-width

border-right-width

border-bottom-width

border-left-width

对于同一个边框宽度我们可是用三种方式来设置如下,效果是一样的。

p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}


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



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



颜色


设置边框颜色的原理与设置设置边框宽度的原理是相同的,设置颜色用border-color;

如果设置个边宽度则用:


border-top-color

border-right-color

border-bottom-color

border-left-color

外边距(margin)


margin围绕在元素边框外地空白区域就是margin,设置margin会在元素外创建额外的“空白”,margin属性接收任何长度单位、百分数值甚至负值。


在这里先讲解一个值复制的规则,就是如果缺少左外边距的值,则使用右外边距的值;如果缺少下外边距的值,则使用上外边距的值;如果缺少右外边距的值,则使用上外边距的值。


\


换句话说,如果为外边距指定了 3个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。

如果我们想设置单边外边距属性,可以用下面的属性


margin-top

margin-right

margin-bottom

margin-left

下面这两种方式效果是一致地


h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}


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


总之


在这里我也是简单将盒子模型的基础知识进行了基础的总结,这些知识只有我们经常用,慢慢的轻车熟路了,对于盒子模型的知识的讲解我可能有太不全面的地方,也请大家多多指正。

Tag:
网友评论

<