《Web技术基础》第6课页面布局(一)ppt课件.ppt

《《Web技术基础》第6课页面布局(一)ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6课页面布局（一）知识回顾CSS语法CSS常用选择器CSS属性使用CSS*层叠（多重）样式前馈及作业总结较好：1、3、4、5、7、8组。外边距所能设置的最小值是多少？王丽业浮动需要在什么时候使用？傅爽问题组长没收齐，没说明原因。闫宏利、陈嘉兴、陈禄知。没有提出问题（2、6组）。没交（11组、刘普华）。张永恒、辛广悦。格式-第X小组《Web技术基础》课程前馈表前馈检查CSS盒模型4个组成部分有哪些？CSS内边距属性是什么？CSS边框属性是什么？CSS外边距属性是什么？Div标签显示类型是什么？CSS定位方式有几种？CSS相对定位是相对谁？CSS绝对定位元素的位置与文档流有关吗？讲授内容C

2、SS盒模型CSS定位11.1CSS盒模型——概述CSS盒模型（BoxModel）规定了元素处理内容、内边距、边框和外边距的方式。CSS盒模型主要由四部分组成：content：盒模型里的内容，即元素的内容。padding：内边距，也称填充，指内容与边框的间距。border：边框，指盒子本身。margin：外边距，指与其他盒模型的距离。外边距默认是透明的，因此不会遮挡其后面的任何元素。11.1CSS盒模型——概述内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，盒模型内边距、边框和外边距按照顺时针的顺序，可分别为top、right、bottom和left四个边，11.1C

3、SS盒模型——概述在CSS中，width和height属性指的是盒模型内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加盒的尺寸。盒模型的宽度和高度要在width和height属性值基础上加上内边距、边框和外边距的距离。盒宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距。盒高度=上外边距+上边框+上内边距+高度+下内边距+下边框+下外边距。11.1CSS盒模型——概述下面盒模型内容的宽度和高度分别为300px和200px。#box{width:300px;height:200px;padding:10px;border:1pxsolid#0

4、00;margin:15px;}盒宽度=15+1+10+300+10+1+15=352px盒高度=15+1+10+200+10+1+15=252px11.1CSS盒模型——CSS内边距元素的内边距在边框和内容区之间，padding属性定义元素边框与元素内容之间的空白区域。内边距属性。属性描述padding简写属性。在一个声明中设置元素的所有内边距padding-bottom设置元素的下内边距padding-left设置元素的左内边距padding-right设置元素的右内边距padding-top设置元素的上内边距11.1CSS盒模型——CSS内边距1.padding属性padding属

5、性定义元素的内边距，属性值可以使用长度值或百分比值，但不允许使用负值。如希望所有h1元素的各边都有10像素的内边距：h1{padding:10px;}还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值，如：h1{padding:10px0.25em2ex20%;}11.1CSS盒模型——CSS内边距2.单边内边距通过使用padding-top、padding-right、padding-bottom和padding-left四个单独的属性，分别设置上、右、下、左内边距。如：h1{padding-top:10px;padding-right:0.25em

6、;padding-bottom:2ex;padding-left:20%;}11.1CSS盒模型——CSS内边距3.内边距的百分比数值可以为元素的内边距设置百分数值，百分数值是相对于其父元素的width计算的。上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。如下面这条规则把段落的内边距设置为父元素width的10%：p{padding:10%;}11.1CSS盒模型——CSS内边距实例css(padding).html说明了如何设置CSS内边距。d

7、iv{border:1pxsolid#F00;margin-bottom:2px;}#div1{padding:1.5cm}#div2{padding:0.5cm2.5cm}每个边拥有相等的内边距