盒模型

盒模型

要在文档首部加了doctype声明，即使用了标准盒模型，而不加，则会由浏览器自己决定

内容区(width和height)

width和height属性用来设置内容区域的宽和高,也就是元素可渲染内容区的宽高.

height属性在默认情况下由内容撑开，也就是随内容多少的变化而变化。

内容默认左上角原点开始排列.

width:500px; 默认宽度是父级宽度100%

height:500px; 默认高度内容撑开

 		 .box{
   
            width: 400px;
            height: 400px;
            background-color: skyblue;
        }
   <div class="box">我要忘了你的样子</div> 

边框区(border)

块级元素的border的作用是在元素的内容区和padding区外加上一个边框线.

通常用来分隔内容,使其不至于散步到背景的边界,

broder:宽度 种类 颜色 复合写法

 .box{
   
       width: 400px;
       height: 400px;
       border-width: 5px 10px 20px 30px;/*上右下左*/
       border-style: solid;
       border-color: violet;
       background-color: skyblue;
   }
<div class="box"></div>

border的单例型写法

border-width 默认是3px, 可以不写

border-style solid实线 double双边框 dashed虚线 dotted圆点 默认是none 这个是必须的

border-color 默认是color文字颜色一致，可以不写 transparent;透明 继承父级的颜色

都有可以接受四个方向的值,分别代表上右下左,顺时针.

三边有边框而一边没有设置技巧

border:1px solid #000;
border-top