day_css_作业_div+css

margin： 盒子与盒子之间的关系

div+css：拿到设计师拿到的页面，按照一定的位置把盒子摆放好，就可以还原出设计师要的页面图了。

margin

padding

float

position

需要学会如何去摆放盒子的位置

 

 

###########################

box 盒子 可以将网页中每一部分都看作一个盒子，一个网页就是右诸多盒子拼装而成的。

把盒子抽象出来的的属性

box 有几一下几个属性：

盒子宽度：width

盒子高度：heigh

盒子边框：border

盒子内物品和盒子之间的距离--盒子内边距：padding

盒子与盒子之间的距离--盒子外边距：margin

###############

margin 写法：

margin-button 盒子外边距下边多少像素

margin-top 盒子外边距上边多少像素

margin-left 盒子外边距左边多少像素

margin-rigth 盒子外边距右边多少像素

border margin padding 都可以按照上下左右边的写法来写

然后可以使用简写方式：

margin：10px 20px 30px 40px  上--右--下--左

margin：10px 20px  30px 上-- 左右 --下

margin：10px 20px 上下--左右

margin: 10px 上下左右

margin-buttom，top之间的距离大值覆盖小值，不相加，而是重叠。

####################

padding：内边距 是边与边的距离，而不是朝着那边移动。

一旦设置了padding，需要将盒子的高/宽减少相应的padding-left,right值，否者会挤压别的box，影响网页的整体布局。

#############