<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
.child {
width: 150px;
height: 40px;
background-color: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="child"></div>
</body>
</html>
image.png
border 简写属性在一个声明设置所有的边框属性。
border :1px solid #000; 可拆分为
border-width:1px; 宽度
border-style:solid; 样式(实线)
border-color:#000; 颜色
可以看到，宽度、颜色、样式这个三个属性的属性值互相不会冲突，浏览器在解析的时候可以区分他们
可以颠倒三个属性值的顺序
例如
border :solid #0001px;
border :#000solid 1px;
在开发中，尤其是团队配合时，需要有个统一的写法，便于理解，有良好的可读性，默认按照 border :1px solid red;的顺序
可以不写其中的一个或多个
不写颜色时，默认使用前景色，即color属性
border :1px solid; 等同于 border :1px solid #000; 因为color属性默认值时#000
image.png
不指定border-style 是看不到效果的，常用的solid(实线)、dotted(点线)、dashed(虚线) 可以借助开发者工具自行体验下
image.png
border :1px solid #000; 还可拆分为
border-top:1px solid #00; 上
border-right:1px solid #000; 右
border-bottom:1px solid #000; 下
border-left:1px solid #000; 左
border-top:1px solid #000; 又可拆分为
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;
结合前面的文章，我们已经认知了css盒模型的 width、height、padding、margin、border这五个属性，也初步阐述了HTML、CSS的基本常识，以及开发者工具的简单使用。
有的章节中会有一些额外的链接，建议点进去看看，阅读文档是必备的能力，如果能直接阅读英文的文档就更好了。
很多地方直接放截图，是希望能够自己动手敲代码，而不是黏贴复制，更好的方式是阅读完一小段在去自己尝试，而不是边看边敲！
一些跟章节主旨脱离较远的知识点并没有被详细说明，比如1px 、red、rgb(0,0,0)、color 这些，是刻意为之，按部就班的去讲属性是很无聊的一件事，后面一定会提及，有余力的小伙伴可以自行百度下，提前感受下痛楚!或是阅读 http://www.w3school.com.cn/index.html
保持好奇是很重要的，每天多学一点，相信未来是不可限量的！知识首先在于积累，不要有太多的功利性。
上一章 - 4 display属性对其他css属性的影响
网友评论