【慕课网】网页布局基础学习笔记

一、网页布局概念

1-1.网页布局模型分为标准文档流、浮动布局、绝对定位

1-2.对网页布局模型的练习题

二、自动居中一列布局

2-1.标准文档流概念、块级元素和行级元素

2-2.盒子模型概念

盒子模型遮挡顺序

border

content+padding

background-image

background-color

margin

2-3.外边距、内边距、边框使用，注意外边距和内边距四个参数、三个参数、两个参数、一个参数和边框参数顺序

2-4.自动居中一列布局是在定宽和不定宽都可的基础上使用了margin:0 auto

2-5.注意盒子模型的遮挡顺序

2-6.注意自动居中一列布局关键在于margin:0 auto

三、横向两列布局

3-1.添加浮动float属性后元素大小随着内容自适应增加

3-2.清除浮动有两种clear:both/left/right width:100% + overflow:hidden

3-3.clear:both用于浮动之后紧邻后面的元素使用，清除父级元素收到子级元素的浮动影响的时候使用overflow

3-4.注意对clear:both和overflow:hideen的分辨

四、绝对定位布局

4-1.static、relative、absolute、fixed概念说明

4-2.relative概念说明，仍处于标准文档流，有偏移属性和z-index，偏移后会遮盖元素

4-3.absolute脱离了标准文档流，若没有偏移属性留在原来的位置，有的话会根据最近父元素有位置属性的为标准没有则为html

4-4.绝对定位实现横向两列布局，一个固定宽度列relative，一个自适应宽度列absolute 前者高度一定要大于后者

4-5.注意绝对定位的定位基准

4-6.注意绝对定位实现横向两列布局

【慕课网】网页布局基础学习笔记

一、网页布局概念

1-1.网页布局模型分为标准文档流、浮动布局、绝对定位

1-2.对网页布局模型的练习题

二、自动居中一列布局

2-1.标准文档流概念、块级元素和行级元素

2-2.盒子模型概念

2-3.外边距、内边距、边框使用，注意外边距和内边距四个参数、三个参数、两个参数、一个参数和边框参数顺序

2-4.自动居中一列布局是在定宽和不定宽都可的基础上使用了margin:0 auto

2-5.注意盒子模型的遮挡顺序

2-6.注意自动居中一列布局关键在于margin:0 auto

三、横向两列布局

3-1.添加浮动float属性后元素大小随着内容自适应增加

3-2.清除浮动有两种clear:both/left/right width:100% + overflow:hidden

3-3.clear:both用于浮动之后紧邻后面的元素使用，清除父级元素收到子级元素的浮动影响的时候使用overflow

3-4.注意对clear:both和overflow:hideen的分辨

四、绝对定位布局

4-1.static、relative、absolute、fixed概念说明

4-2.relative概念说明，仍处于标准文档流，有偏移属性和z-index，偏移后会遮盖元素

4-3.absolute脱离了标准文档流，若没有偏移属性留在原来的位置，有的话会根据最近父元素有位置属性的为标准没有则为html

4-4.绝对定位实现横向两列布局，一个固定宽度列relative，一个自适应宽度列absolute 前者高度一定要大于后者

4-5.注意绝对定位的定位基准

4-6.注意绝对定位实现横向两列布局

五、三个布局运用

浏览过的版块