CSS 控制边框样式

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;
}

上面的例子只用到了两种边框，下面来看看其它几种样式的边框。

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定位的朋友更是要花一定的时间在实践练习上。

CSS 控制边框样式相关推荐

html表格与CSS控制表格样式
表格是HTML网页中的重要标签,利用表格可以对网页进行排版,使网页信息有条理地显示出来. 这就是一个表格 ,清清楚楚的列出了英雄们的排名. 思维导图 <table>标签用<tabl ...
php怎么自定义设置打印区域,JavaScript_jQuery实现区域打印功能代码详解，使用CSS控制打印样式，需要设 - phpStudy...
jQuery实现区域打印功能代码详解使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO ...
net中 css 控制 GridView 样式
net中 css 控制 GridView 样式 .GridViewStyle { border-right: 2px solid #A7A6AA; border-bottom: ...
CSS控制列表样式属性list-style有哪些？怎么用？
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
html pdf支持css%写法吗,flying-saucer-pdf终于完美解决了（中文问题，换行问题，分页，页眉页脚，水印）,html+css控制pdf样式...
集成freemarker+flying-saucer-pdf+itext,通过html模板生成PDF 折腾了很久,flying-saucer-pdf终于完美解决了(中文问题,换行问题,页眉页脚,水印) ...
php表格所有边框实线,css表格怎么添加边框样式？css表格边框样式总结（附完整实例）...
本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧首先我们先看看如何利用css来给表格添加边框: ...
css控制滚动条透明,CSS控制滚动条样式的解析
我们在之前的两篇文章中,我们给大家介绍了关于CSS设置div滚动条样式.以及CSS3自定义滚动条样式的实例, 都知道当内容超出容器时,容器会出现滚动条,那我们如何使用CSS控制滚动条样式的呢?今天就给 ...
php外边框样式,CSS的边框样式
摘要:CSS中的边框样式,课程中主要是讲了border属性的使用,第一是有边框线的一个使用方式:第二个是边框圆角的实现:第三个是边框阴影的实现. 第一:边框线的使用方式是border中的三个属性,b ...
css打印适应纸张_CSS print 样式 css控制打印样式分页页面大小
显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距.screen一般使用逻辑单位比如px,而打印机则应该使用物理单位 ...

CSS 控制边框样式

CSS 控制边框样式相关推荐

最新文章

热门文章