Home >Web Front-end >HTML Tutorial >web开发（3） 传说的盒模型之border_html/css_WEB-ITnose
web开发（3） 传说的盒模型之border_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:23:101076browse
大道至简
上一章节我们学会了padding的用法，padding是为我们的文本区域添加内边距，类似于礼品盒的泡沫区域（即保护区域），那么盒子都是有外边的硬纸壳的，这在我们的web开发中会有对应的属性吗？
答案很明显是有的，就是我们今天的主角border。请看下列代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Border</title><style> div { width: 200px; height: 200px; background-color: red; border: 5px solid orange; }</style></head><body><div></div></body></html>
border.png
效果如图所示，橘黄色区域就是我们的border了。再来回想下代码border: 5px solid orange,里边到底是什么意思呢？这行代码等同于下列代码:
/*定义边框宽度*/border-width: 5px;/*定义边框样式*//*solid为实线、dashed为虚线、dotted为点线*/border-style: solid;/*定义边框颜色*/border-color: orange;
如果是分写的话，以上三条语句缺一不可，ok我们可以来分析下我们原来的那条语句了。
- 第一个参数是border-width
- 第二个参数是border-style
- 第三个参数是border-color
我们再来看看下边的代码：
border-top: 1px solid red;border-bottom: 1px solid red;border-left: 1px solid red;border-right: 1px solid red;
没错啊，我们还可以单独为某一个方向设置border，是不是很方便。
注意：我们在使用border的时候会发现盒子的面积变大了，没错的border是外嵌的，它的存在会影响宽高。
创造即永恒，喝茶去……
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：优化网页速度的7种方法_html/css_WEB-ITnoseNext article：sass,compass让开发效率飞起_html/css_WEB-ITnose