您当时的方位:主页 > 言语编程 > CSS

CSS入门教程——盒子(box)

2014-10-22  

CSS盒子(CSS box)

    首要要清楚,CSS中没有box这个特点。CSS的盒子(box)是由以下几个部分组成的:

    内容(content)、填充(padding)、边框(border)和鸿沟(margin)。盒子的内容当然是有必要有的,而填充、边框和鸿沟都是可选的。如果把CSS的盒子看做现实生活中的盒子,那么内容便是盒子里装的货品;而填充便是怕货品损坏而增加的泡沫或许其它抗震的东西;边框便是盒子自身了;至于鸿沟则阐明盒子摆放的时分的不能与其他物体紧挨在一同,而有必要有一段空地。当然了,在CSS中的盒子是平面的。

下面咱们来一个一个地介绍组成盒子的几个特点。

CSS边框(border)

    本节的实例均在上一节的比方基础上修正。首要咱们来为上一节的box div增加边框。 代码修正如下:

.box {
background-color: #EEFAFF;
width: 30%;
float: left;
border: 1px solid #000000;
}

    检查修正后的页面,能够看到box的外边多了一条1像素宽的黑色实线边框。在border: 1px solid #000000;一句中,咱们一同为border指定了三个特点值,其实它等效与下面的CSS句子:

border-style:solid;
border-color:#000000;
border-width:1px;

    其实CSS中还有一些特点支撑这样的写法,比方之前学过的font。可是咱们在这个入门教程中将不做过多的评论,而在CSS使用教程中介绍。下面让咱们来看看怎么操控某一侧的边框特点。咱们为boxhead div增加一个1像素的虚线下侧边框,检查效果。修正的代码如下:

.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
border-bottom:1px dashed #000000;
text-align: center;
width: 100%;
color: #FFFFFF;
}

上面的比方只用到了两种边框,下面来看看其它几种款式的边框。

<p style="border:dotted">&nbsp;</p>

<p style="border:double"></p>

<p style="border:groove"></p>

<p style="border:inset"></p>

<p style="border:outset"></p>

<p style="border:ridge"></p>

CSS填充特点(padding)

     填充特点界说的是内容(content)与边框(border)的距离,下面咱们来为boxhead div增加一个5像素的填充。

.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
border-bottom:1px dashed #000000;
text-align: center;
width: 100%;
color: #FFFFFF;
padding:5px;
}

    看看修正之后的页面,是不是boxhead div中的内容距离边框有了一段距离?与边框特点(border)相同,填充特点(padding)也能够只设定某一边。例如:padding-left、padding-bottom。

CSS鸿沟特点(marging)

    为了更好的了解鸿沟(marging)特点,咱们现在试着为网页多增加几个box,然后再看看网页的外观。你会发现box都连在了一同,或许你不喜欢这样的布局,事实上我也不喜欢。那么咱们就为他们设置鸿沟特点吧,需求修正的代码如下:

.box {
background-color: #EEFAFF;
width: 30%;
float: left;
border: 1px solid #000000;
margin:5px;
}

    修正之后的页面一切的box之间都有了5个像素的距离,这便是鸿沟特点的效果。当然了,鸿沟特点与其他两个构成盒子的特点相同都能够独自界说某一个方向。

    至此,咱们现已了解了构成盒子的几个元素。不过想要彻底的把握盒子的还需求不断的实践,尤其是想要彻底用盒子来替代table定位的朋友更是要花必定的时刻在实践操练上。