Web前端开发技术与实践 第12章布局 阮晓龙 13938213680/rxl@hactcmeducn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 015.9
Web前端开发技术与实践 第12章 布局 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9 1
2 本章主要内容 口定位与布局的基本属性 口多列布局 口盒布局 口案例:网页布局 米 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容 定位与布局的基本属性 多列布局 盒布局 案例：网页布局 2
3 1定位与布局的基本属性 1.1基本属性 口布局是指对网页中各个构成要素的合理编排,是呈现页面内容 的基础。合理的布局将有效的提高页面的可读性,提升用户体 验 口通过定位与布局的基本属性,可以确定元素的位置,并实现页 面多种多样的布局。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 布局是指对网页中各个构成要素的合理编排，是呈现页面内容 的基础。合理的布局将有效的提高页面的可读性，提升用户体 验。 通过定位与布局的基本属性，可以确定元素的位置，并实现页 面多种多样的布局。 3 1.1基本属性
4 1定位与布局的基本属性 1.1基本属性 表1201定位与布同的本属性 margin 在一个声明中设置所有的外边距属性 margin-bottom设置元素的下外边距 margin-left 设置元素的左外边距 margin-night 设置元素的右外边距 margin-top 设置元素的上外边距 padding 在一个声明中设置所有内边距属性 padding-bottom设置元素的下内边距 padding-left 设置元素的左内边距 padding-right设置元素的右内边距 bottom 设置定位元素下外边距边界与其包含块下边畀之间的偏移 c规定元素的翔一侧不允许其他劫元素 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 4 1.1基本属性
1定位与布局的基本属性 1.1基本属性 表1201定位与布同的本蛋性 述 clip 剪裁绝对定位元素 cursor 规定要显示的光标的类型(形状) display 规定元素应该生成的框的类型 规定框是否应该浮动 设置定位元素左外边距边界与其包含块左边界之间的偏移 overflow 规定当内容溢出元素框时发生的事情 position 规定元素的定位类型 设置定位元素右外边距边界与其包含块右边界之间的偏移 设罟定位元素的上外边距边界与其包含块上边界之闻的偏移 vertical-align设置元素的垂直对方式 visibilit 规定元素是否可见 zmax设置元素的堆吾顺序 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 5 1.1基本属性
1定位与布局的基本属性 12外边距与内边 口外边距属性 margin属性可以设定元素的所有外边距。 口该属性可以通过1-4个正负值进行设置,其值可以为像素、百分比等单 位,也可从父元素继承外边距。 可以通过 margin-top、 margin- right、 margin- bottom、 margin left属性分别设置。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 外边距属性 margin属性可以设定元素的所有外边距。 该属性可以通过1-4个正负值进行设置，其值可以为像素、百分比等单 位，也可从父元素继承外边距。 可以通过margin-top、margin-right、margin-bottom、marginleft属性分别设置。 6 1.2外边距与内边距
1定位与布局的基本属性 12外边距与内边 口具体语法: 快速定义盒子的外边距都为10像素 margin:10px 定义上下外边距为5像素,左右外边距为10像素材 margin. 5px 10px 定义上外边距为5像素,左右外边距为10像素,下外边距为15像素” argin 5px 10px 15px 定义上外边距为5像素,右外边距为10像素,下外边距为15像素,左边外距为20像素 margin: 5px 10px 15px 20px 厂单独定义上外边距为5像素 nargin-top 5px 厂单独定义左外边距为10像素 单独定义右外边距为15像素 margin-night: 15px 严单独定义下外边距为20像素” 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 具体语法： 7 1.2外边距与内边距
8 1定位与布局的基本属性 12外边距与内边 口行内元素的外边距 当行内元素定义外边距时,只能看到左右外边距对布局的影响,但 是上下外边距犹如不存在一般,不会对周围元素产生影响。 口块级元素的外边距 对于块级元素来说,外边距都能够很好的被解析。可以用 “ display”属性来改变元素的表现形式来保证元素对外边距的支 持。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 行内元素的外边距 当行内元素定义外边距时，只能看到左右外边距对布局的影响，但 是上下外边距犹如不存在一般，不会对周围元素产生影响。 块级元素的外边距 对于块级元素来说，外边距都能够很好的被解析。可以用 “display”属性来改变元素的表现形式来保证元素对外边距的支 持。 8 1.2外边距与内边距
9 1定位与布局的基本属性 12外边距与内边距 口内边距属性 padding属性可以设定元素的所有内边距。该属性可以通过1-4个正 负值进行设置,其值可以为像素、百分比等单位,也可从父元素继 承外边距。 可以通过 padding-top、 padding-right、 padding-bottom、 padding-left属性分别设置。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 内边距属性 padding属性可以设定元素的所有内边距。该属性可以通过1-4个正 负值进行设置，其值可以为像素、百分比等单位，也可从父元素继 承外边距。 可以通过padding-top、padding-right、padding-bottom、 padding-left属性分别设置。 9 1.2外边距与内边距
10 1定位与布局的基本属性 12外边距与内边 口具体语法: 快速定义盒子的内边距都为10像素 padding: 10px; 定义上下内边距为5像素,左右内边距为10像素 adding: 5px 10px 定义上内边距为5像素,左右内边距为10像素,下内边距为15像素 padding: 5px 10px 15px 定义上内边距为5像素,右内边距为10像素,下内边距为15像素,左内边距为20像素 padding: 5px 10px 15px 20px 厂单独定义上内边距为5像素 adding-top 5px 厂单独定义左内边距为10像素 padding-left: 10px 厂单独定义右内边距为15像素” padding-nght: 15px 单独定义下内边距为20像素 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 具体语法： 10 1.2外边距与内边距