css学习总结（4）

上一章介绍了css的权重，也就是优先级

本篇主要介绍一下css盒子模型

 

所有的html元素都可以看成一个css盒子

它具有

1.margin（外边距）

2.border（边框）

3.padding（内边距）

4.content（内容）

 

margin决定了这个盒子在页面的什么位置显示，

比如margin: 40px 30px 20px 50px就意味着这个盒子在距离上一个元素40px，且距离文档右侧30px 底部20px 左侧50px的地方显示，这个位置是相对于文档流的位置而言的，一般布局就是上下文布局，就是从上写到下

 

border决定了这个盒子的边框的样子，

比如border:1px solid #000;就意味着这个盒子具有一个1px的直线黑色边框

border:1px dashed #000;就意味着这个盒子具有一个1px的虚线黑色边框

 

padding决定了这个盒子的内部的边距，

比如padding: 40px;就意味着这个盒子它的内部除了内容content外，还要空出上下左右都为40px一个内边距

 

理解css盒子模型

 

当我们拿到设计稿时，会看到xx地方，要画一个div，它的宽X高为400px X 200px，它的内边距为上右下左都为50px，

同时它的内容为一个宽X高为300px X 100px的图片

这个时候我们要怎么画这个div盒子和里面的图片？

css部分：

div {

　　width:400px;

　　height:200px;

　　padding:50px;

}

 

img {

　　width:300px;

　　height:100px;

}

 

html部分：

<div><img src=""></div>

 

这个时候会发现盒子的实际大小不是400px X 200px，而是比我们画的要大，这是因为padding会把盒子给撑大

使用css中的box-sizing:border-box,就能解决

border-box决定了盒子的大小就为设定的宽高 而不会被padding撑开