1、什么是盒子模型
盒子模型是CSS中重要的指导思想,是网页布局的基石
它认为页面中所有元素都是一个盒子,可以通过设置它的属性进而改变该盒子的显示状态
它认为盒子间是相互影响的
2、盒子模型中常用的盒子属性
width:设置盒子的内容的宽度,属性值为像素值或百分比,如果是块元素默认宽度为父元素的100%,如果是行内元素默认宽度为内容的宽度
height:设置盒子内容的高度,属性值为像素值或百分比,元素的默认高度为自适应高度
border:设置元素的边框
1)border-style:设置边框类型,属性值有solid、dashed、dotted、none
solid:实线
dashed:虚线
dotted:点线
none:无
2)border-width:设置边框宽度,属性值是像素值,值越大,边框越宽
3)border-color:设置边框颜色,属性值为颜色名称、十六进制代码
4)border的复合形式:border:值1值2值3;注意边框的类型是不可以省略的
5)上边框:border-top
6)下边框:border-bottom
7)左边框:border-left
8)右边框:border-right
9)border-radius:设置边框圆角效果,属性值为像素值
10)border-top-left-radius:左上角
11)border-bottom-left-radius:左下角
12)border-top-right-radius:右上角
13)border-bottom-right-radius:右下角
14)border-radius:值,表示四个角的弧度相同
15)border-radius:值1(左上、右下)值2(右上、左下)
16)border-radius:值1(左上)值2(右上、左下)值3(右下)
17)border-radius:值1(左上)值2(右上)值3(右下)值4(左下)
margin:设置页面中元素间的距离,称为外边距,属性值为像素值,值越大,距离越大
1)margin-top:上外边距
2)margin-bottom:下外边距
3)margin-right:右外边距
4)margin-left:左外边距
5)也可以采用值的个数表示上下左右外边距,如
margin:值,表示,四个边距相同
margin:值1(上下)值2(左右)
margin:值1(上)值2(左右)值3(下)
margin:值1(上)值2(右)值3(下)值4(左)
6)注意事项:两个上下关系的元素间的距离采用较大的margin值,而不是和,但是如果是左右关系的元素,那么它们间的距离就是margin之和
padding:设置盒子内容和边框的距离,也称为内边距,属性值为像素值,值越大,间距越大
1)padding-top:上内边距
2)padding-bottom:下内边距
3)padding-left:左内边距
4)padding-right:右内边距
5)也可以通过值的个数来表示内边距
padding:值,表示上下左右相同
padding:值1(上下)值2(左右)
padding:值1(上)值2(左右)值3(下)
padding:值1(上)值2(右)值3(下)值4(左)
3、什么时候用margin,什么时候用padding
如果两个元素是平行关系(即兄弟关系)时,要调节它们的间距只能用margin
如果两个元素是包含和被包含的关系(即父子关系)时,那么要调节它们间的距离可以用margin(子元素),也可以用padding(父元素),注意:当给子元素加margin-top时会出现父元素同步下移的问题,解决方法如下:
1)不给子元素加margin-top,给父元素加padding-top
2)给子元素加margin-top,给父元素加边框
3)给子元素加margin-top,给父元素加pading-top:0.1px;(常用)
4、margin和padding使用技巧
利用*{margin:0;padding:0}清除页面中默认的内外边距
利用margin:0auto使元素在页面中达到居中效果,该方法只适用于块元素
5、盒子的实际高度和宽度(标准盒模型)
实际宽度=左边框+左内边距+width+右内边距+右边框
实际高度=上边框+上内边距+height+下内边距+下边框
6、CSS3中box-sizing:border-box可以将标准盒模型变为怪异盒模型,所谓怪异盒模型就是width包含了边框和内边距,就不用再减了
一般在页面布局中加这个*{
margin=0;padding=0;box-sizing:border-box;
}
二、浮动
1、属性:float,属性值left、right、none
left:元素向左浮动
right:元素向右浮动
none:元素不浮动,默认
2、什么是浮动:所谓浮动就是指设置了float属性的元素会从标准文档流中脱离出来,在浮动流中按照新的排列规则进行排列
标准文档流:所谓标准文档流就是页面默认的排列规则,如果是块元素垂直显示,如果是行内元素或行内块元素在一行显示
浮动流:所谓浮动流就是设置了float属性的元素会从标准流中脱离出来,在标准流的上方新建一个层,在这个成里所有元素都是在一行显示的,我们把这种排列规则称为浮动流
3、浮动所带来的影响
设置了浮动属性的元素会从标准流中脱离出来,它会失去在标准流中的原有位置,该位置会被标准流中的其它元素占据
在浮动流中所有元素都是在一行显示的,但是如果空间不够大,那么元素自动换行
浮动的元素自动变成块元素
浮动的元素宽度为最小宽度,所以为了方便控制,通常给浮动的元素加width
浮动的元素会丢失标准流中的原有位置,标准流中的其它元素会占据它的空间,但是文本会对它形成环绕
一个元素在浮动前会分析它前面的元素的类型,如果是块元素,那么这个元素会在块元素的下方显示
元素都向右浮动后,显示顺序为倒叙
4、父元素的塌陷:如果父元素没有高度,那么此时父元素的高度就是由子元素决定的,如果子元素设置了浮动,那么父元素的高度就会塌陷,父元素的背景色无法显示,另外也会对周边元素造成影响
给父元素设置高度
利用clear属性来清除浮动所带来的影响,clear属性的作用就是清除浮动,属性值为left/right/both/none
1)left:清除左侧的浮动
2)right:清除右侧浮动
3)both:清除两侧浮动
4)none:默认,不清除浮动
利用:after选择器清除浮动,格式:父元素:after{content:””;display:block;clear:both;}
5、浮动的利用
页面布局
制作页面中各个模块