盒子模型

一、认识盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、边框和外边距组成。
1.网页就是多个盒子嵌套排列的结果。
2.内边距出现在内容区域的周围，当给元素添加背景或背景图像的时，该元素的背景色或背景图也将出现在内边剧中
3.外边距是该元素与相邻元素之间的距离
4.如果给元素定义边框属性，边框将出现在内边距和外边距之间
虽然盒子拥有内边距、边框、外边距、宽和高这些基本属性，但并不要求每个元素都必须定义这些属性。

二、盒子模型相关属性

设置内容样式属性常用属性值
上边框 border-top-style:样式；
border -top-width:宽度；
border-top-color:颜色；
bordet-top:宽度样式颜色；
下边框 border-bottom-style:样式；
border-bottom-width:宽度；
border-bottom-color:颜色；
border-bottom:宽度样式颜色；
左边框 border-left-style:样式；
border-left-width:宽度；
border-left-color:颜色；
border-left:宽度样式颜色；
右边框 border-right-style:样式；
border-right-width:宽度；
border-right-color:颜色；
border-right:宽度样式颜色；
样式综合设置 border-style:上边 [右边下边左边] ； none(无）、solid 单实线、dashed 虚线、dotted 点线、double 双实线
宽度综合设置 border-width:上边 [右边下边左边] ；像素值
颜色综合设置 border-color:上边 [右边下边左边] ；颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置 border:四边宽度四边样式四边颜色；
1.使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
2. 使用border-width属性综合设置四边宽度时，必须按上右下左的顺时针顺序采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
3. 使用border-color属性综合设置四边颜色时，必须按顺时针顺序采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none,则其他的边框属性无效。
4.当每一侧的边框都不同，或者只需要单独定义某一侧的边框时，可以使用单侧边框的综合设置属性border-top、border-bottom、border-left、或border-right。

内边距属性
（1）padding-top:上内边距。
（2）padding-right:右内边距。
（3）padding-bottom:下内边距。
（4）padding-left:左内边距。
（5）padding:上内边距[右内边距下内边距左内边距]
1.在上面的设置中，padding相关属性的取值可为auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比%，实际工作中最常用的是像素值px，不允许使用负值。
2.同边框相关属性一样，使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
3.如果设置内外边距为百分比，不论上下或左右的内外边距，都是相对于父元素宽度width的百分比，随父元素width的变化而变化，和高度height无关。

外边距属性
（1）margin-top:上内边距。
（2）margin-right:右内边距。
（3）margin-bottom:下内边距。
（4）margin-left:左内边距。
（5）margin:上内边距[右内边距下内边距左内边距]
margin相关属性的值，使复合属性margin取1~4个值的情况与padding相同。但是外边距可以使用负值，使相邻元素重叠。
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto时，可使块级元素水平居中。
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

背景属性
1.设置背景颜色
使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或 RGB代码rgb(r,g,b)。background-color的默认值为transparant,即背景透明，这是子元素会显示其父元素的背景。
2.设置背景图像
将图像作为网页元素的背景，通过background-image属性实现。
3.设置背景图像平铺
默认情况下，背景图像会自动向水平和竖直两个方向平铺，可以通过background-repeat属性来控制，
（1）repeat:沿水平和竖直两个方向平铺（默认值）。
（2）no-repeat:不平铺（图像位于元素的左上角，只显示一次）。
（3）repeat-x：只沿水平方向平铺。
（4）repeat-y:只沿竖直方向平铺。
4.设置背景图像的位置
background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，background-position属性的默值为“00”或“top left”即背景图像位于元素的左上角。
（1）使用不同单位（最常用的是像素px）的数值，直接设置图像左上角在元素中的坐标。
（2）使用预定义的关键字，指定背景图像在元素中的对齐方式，
水平方向值: left、center、right。
垂直方向值: top、center、bottom。
两个关键字的顺序任意，若只有一个值则另一个默认为center。例如：
center:相当于center center (居中显示）。
top:相当于top center或center top (水平居中、上对齐）。
(3)使用百分比：按背景图像和元素的指定点对齐
0% 0%:表示图像左上角与元素的左上角对齐。
50% 50%:表示图像50% 50%中心点与元素50%50%的中心点对齐
20% 30% :表示图像20% 30%的点与元素20% 30%的点对齐。
100% 100% :表示图像右下角与元素的右下角对齐，而不是图像充满元素
如果只有一个百分数，将作为水平值，垂直值则默认为50%。
5.设置背景图像固定
可以使用background-attachment属性来设置。
（1）scroll:图像随页面元素一起滚动（默认值）。
（2）fixed:图像固定在屏幕上，不随页面元素滚动。
6.综合设置元素的背景
语法格式：

background:背景色 url("图像）平铺定位固定；
1
盒子的宽与高
1.盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和。
2.盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和。
3.宽度属性width和高度属性height 仅适用于块级元素，对行内元素无效（< img/>标记和< input/>除外）。
4.计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

网页设计与制作（五）相关推荐

dw网页设计与制作html,终于发现网页设计与制作问题
网页设计与制作问题当从Dreamweaver中复制文字到另一个应用程序中时,HTML代码和文字一起被复制过去了.此时一般都用快捷键[Ctrl+C]来复制.下面介绍网页设计与制作问题,希望对您有所帮助 ...
HTML静态页面总体设计思路,网页设计与制作(HTML+CSS+JavaScript)（张洪斌刘万辉）课程整体设计...
内容简介: 网页设计与制作(HTML+CSS+JavaScript)(张洪斌刘万辉)课程整体设计一.课程设计思路本课程依据课程标准,以软件技术专业学生的就业岗位群能力目标为导向,以Web客户端静 ...
计算机一级网页制作教程视频教程,0626 网页设计与制作31讲,教学视频,湖南铁道职业技术学院陈承欢...
主教材 Dreamweaver CS3 ISBN:978-7-04-027314-4 主编:陈承欢高等教育出版社主教材网页设计与制作任务驱动式教程 ISBN:978-7-04-037271-7 ...
html网页特效微课,让微课走进中职网页设计与制作教学
原标题:让微课走进中职网页设计与制作教学让微课走进中职网页设计与制作教学［摘要］网页设计与制作是中职计算机课程的重要组成部分,对帮助学生认识一些重要的编程语言.掌握网页设计的技能具有重要意义.但 ...
html语言与网页设计期末试卷,网页设计与制作期末考试试题及答案
<网页设计与制作>期末考试试题一.单项选择题(本大题共30小题,每小题2分,共60分) 1.目前在Internet上应用最为广泛的服务是 ( ). A.FTP服务 B.WWW服务 C.T ...
HTML5期末大作业：210套 Dreamweaver网页设计与制作 HTML+CSS+JavaScript【建议收藏】
HTML5期末大作业:Dreamweaver网页设计与制作210例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板 ...
web期末期中网页设计与制作项目展示
web网页设计与制作期末作品期末考试项目适合大学期末期中考试及初学web网页设计者本人大学web网页设计与制作课程总成绩94.5.本项目制作占期末65%,预估获得满分,最差情况最多扣了三五分. 最 ...
商品审核网页界面_网页设计与制作竞赛通知
广东水利电力职业技术学院网页设计与制作竞赛通知一.竞赛目的网页设计与制作赛项旨在通过学院技能大赛提升我校学生网页制作的基本能力与创新能力,增强学生对主流制作工具的应用能力,提高网页设计相应岗位职 ...
html语言试卷a答案,《网页设计与制作试卷A答案.doc
PAGE PAGE 1 装订区浙江**学院<网页设计与制作>期终(考试) 装订区 200 -200 学年第学期任课教师学院班姓名学号总分题号一二三四五六 ...
html 课件DW,DW《网页设计与制作》教学课件.ppt
DW<网页设计与制作>教学课件.ppt 教学环节. 教学环节. . 教学环节. 教学环节. 教学环节. . <网页设计与制作>教学课件主讲人:信息工程学校熊明教学单元8: ...

网页设计与制作（五）

盒子模型

一、认识盒子模型

二、盒子模型相关属性

网页设计与制作（五）相关推荐

最新文章

热门文章