CSS盒模型
#盒模型学习
##1、概念
###1、网页上的每一个模块都可以看作是一个盒子,一个网页是由很多个盒子组成的。网页装盒子,盒子装元素(内容)。
内边距:元素(内容)与盒子的边距(padding),相当于给改元素的外面填充一层海绵。
padding有四个参数的时候表示上右下左,顺时针。
有两个参数的时候,padding(50px 30px)表示上下是50像素,左右是30像素
有3个参数的时候,padding(30px 20px 10px)表示上为30像素,左右为20,下为10
边框:border
边框的像素设置为1px最好看,用实线solid。虚线是dashed。(boder: 1px solid red)
边框颜色:boder-color整体颜色 boder-left-color左边框颜色
外边距:盒子与盒子之间,或者盒子与整个网页的边距,margin。
相当于给改元素的四周划分一块领地,其他的盒子不能占领这块区域。
外边距的传递性:只有margin-top才有传递性。
要想子div相对于父div下降,给父div加一个边框border
同一方向的外边距的合并:div1外边距设置20px,div2外边距设置20px,他们之间只会相隔20px
如果一个是30,一个是20,则取最大值。
##2、块级元素和行级元素
###1、块级元素:
独占一行空间,前后换行显示。
块级元素常用来作为容器,可以容纳其他的行级元素和块级元素
块级元素具有一定的宽度和高度,width、height。
块级元素:div、p、ul、ol、table、form、h1-h6
display:inline 设置块级元素为行级元素,设置之后它就没有高宽属性了,并且横着排列。
###2、行级元素(行内标签):
共享一行,自动换行,多用于组织内容(文本、超链接、img)
行级元素:span、lable、a、img、input、textarea、br
行级元素不支持width、height,它的高和宽由内容决定
display:block 设置行级元素为块级元素,设置之后就可以设置它的width和height了