javaee论坛

普通会员

225649

帖子

57

回复

71

积分

楼主
发表于 2019-11-18 08:54:06 | 查看: 14 | 回复: 0

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、浮动的利用

页面布局

制作页面中各个模块


您需要登录后才可以回帖 登录 | 立即注册

触屏版| 电脑版

技术支持 历史网 V2.0 © 2016-2017