WEB入门.六 盒子模型
学习内容
- CSS盒子模型
- 盒子之间的关系
- 页面元素定位
能力目标
- 理解盒子模型
- 理解内容与表现分离的优点
- 理解并掌握盒子之间的关系
- 理解并掌握绝对定位与相对定位的用法
本章简介
上一章节中已经讲解了页面布局的基础知识,了解了设计一个标准的 XHTML页面需要遵循的规范,例如:标签需要关闭、使用 id 属性代替 name 属性、属性值需要使用双引号等。另外,上一章内容讲解了 XHTML 基本标签的用法。
页面是 Web 站点与用户交互的接口,它能够引起用户对 Web 的兴趣并且加入自己电脑的收藏夹。为达到这一目的,页面设计需要注意两点:页面布局设计和页面的内容设计。页面布局的效果将直接影响用户浏览的视觉体验。
本章内容将详细讲解布局设计的基本原理,包括布局设计模型、背景特效、元素定位、导航栏等。其次,本章内容涉及网页布局设计的基础模型——盒子模型。盒子模型的概念来源于生活中的物品装箱原理,可以通过盒子模型划分页面中的板块,重点在于讲解盒子模型中常用的定位方式:绝对定位、相对定位、静态定位、浮动定位。最后,本章将讲解页面中如果存在多个盒子,应该如何理解它们之间的关系。
2.1 盒子模型概述
2.1.1 内容与表现的分离
<p>忆江南 作者 唐.白居易 江南好,风景旧曾谙。日出江花红胜火,春来江水绿如蓝,能不忆江南。</p>
如果该段落另需修饰字体、字号、背景、行距等,只需要将对应 CSS样式属性加进p样式中。
<p><font color="FF0000" face="宋体">段落内容</font></p>
以上代码将内容和表现混合在一起。DIV + CSS设计布局的思路遵循内容与表现分离的原则。
(1) 使用DIV定义语义结构,其中只添加网页的内容,如文字、图片等。
(2) 使用 CSS美化网页,如加入背景、线条边框、对齐属性等。
(2) 数据显示多样化,不同的样式表适应不同的设备,其内容与设备无关。
(3) 整个站点的视觉效果一致,修改样式表即可轻松实现网站改版。
2.1.2 盒子的结构
盒子模型是CSS 中一个重要的概念,理解了盒子模型才能更好地排版。盒子模型分为 标准W3C盒子模型和IE 盒子模型两种。
标准W3C 盒子模型的范围包括 margin、border、padding、content,且 content部分不包含 border和 padding,如图 2.1.3所示。
一个盒子的 margin 为20px,border 为1px,padding 为 10px,content 的宽度为200px、高为 50px。
宽:20*2 + 1*2 +10*2 + 200 = 262px
高:20*2 + 1*2 +10*2 + 50=112px;
2.1.3 盒子之间的关系
在设计网页时,如果只针对一个盒子,可以很轻松地运用上述知识。但实际网页设计中会遇到大量的盒子,所以只有理解盒子之间的关系才能适应各种复杂的布局需求。
当两个盒子同行显示时,其距离为 BOXI 的 margin-right和 BOX2 的 margin-left之和,如图 2.1.5所示。
当两个盒子在垂直显示时,其距离为 BOXI 的margin-bottom和 BOX2 的 margin-top 中较大者,而不是两者之和。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{height:100px;width:200px;font-size:24px;color:#3C6;border:1pxsolid #006;
}
#box1{margin-bottom:50px;padding-bottom:30px;text-align:center;
}
#box2{margin-top:30px;padding-top:30px;text-align:center;
}
</style>
</head>
<body>
<div id="box1">上面盒子</div>
<div id="box2">下面盒子</div>
</body>
</html>
如图 2.1.6所示。
图 2.1.6 垂直盒子的距离-1 图2.1.6 垂直盒子的距离-2
3. 重叠盒子
盒子重叠时,可以将其中一个盒子的margin属性值设置为负值,下面代码演示负值的用法。
2.3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{position:absolute;left:100px;top:50px;width:300px;height:100px;border:1pxsolid red;font-size:30px;
}
#box1{background-color:#FF0000;z-index:2;
}
#box2{background-color:#00FF00;margin-left:-50px;margin-top:-30px;
}
</style>
</head>
<body>
<div id="box1">BOX1</div>
<div id="box2">BOX2</div>
</body>
</html>
2.2 盒子定位
position:static/absolute/relative;
2.4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{width:100px;height:100px;position:absolute;left:120px;/*与包含块左侧边框距离为120个像素*/top:50px;/*与包含块顶部边框距离为50个像素*/border:1pxsolid gray;
}
</style>
</head>
<body>
<div id="box1">BOX1</div>
</body>
</html>
图2.1.8 position 用法
2.2.1 静态定位(static)
静态定位是position属性的默认值,它表示块状元素保持在标准文档流中原有的位置,不做任何移动。
CSS样式代码:
<style type="text/css">
body{margin:20px;font :Arial 12px;
}
#father{background-color:#0C3;border:1pxdashed #000000;padding:15px;
}
#son{background-color:#FFFFFF;border:1pxdashed #FFFFFF;padding:10px;
}
</style>
XHTML代码片段:
<body><divid="father"><divid="son">BOX2</div></div>
</body>
2.2.2 绝对定位(absolute)
CSS样式代码:
<style type="text/css">
body{margin:0px;font-family:Arial;font-size:12px;
}
#father{background-color:#a0c8ff;border:1pxdashed #000000;width:300px;height:100px;position:absolute;/*绝对定位*/left:50px;top:50px;
}
</style>
XHTML代码片段:
<body><divid="father"></div>
</body>
另一种情况是包含元素的定位问题,它是以已经定位的父级元素为基准进行偏移。已经定位的元素是指将元素的 postion属性值设置为除静态定位之外的任意一值。
2.7
CSS样式代码:
<style type="text/css">
body{margin:20px;font-family:Arial;font-size:12px;
}
#father{background-color:#a0c8ff;border:1pxdashed #000000;padding:15px;position:relative;/*相对定位*/
}
#father div{background-color:#fff0ac;border:1pxdashed #000000;padding:10px;}
#father #son2{position:absolute;top:0px;right:0px;
}
</style>
XHTML代码片段:
<body><divid="father"><div>Box-son1</div><divid="son2">Box-son2</div><div>Box-son3</div></div>
</body>
如果去掉father 中的position:relative;
使用盒子绝对定位时需要注意以下几点:
(1) 盒子的绝对定位以最近的一个已定位的父级元素为基准;如果父级元素没有定位或没有父级元素,则以浏览器窗口为基准。
(2) 绝对定位的盒子会脱离标准文档流,不影响同一级的盒子元素位置。
2.2.3 相对定位(relative)
相对定位是相对于盒子元素的自身原有位置进行偏移,需要设定垂直方向和水平方向的偏移量,分别是left、top、right、bottom。
<style type="text/css">
body{margin:20px;font :Arial 12px;
}
#father{background-color:#a0c8ff;border:1pxdashed #000000;padding:15px;width:300px;
}
#son1{background-color:#fff0ac;border:1pxdashed #000000;padding:10px;position:relative;/*relative相对定位 */left:50px;top:30px;
}
#son2{background-color:#fff0ac;border:1pxdashed #000000;padding:10px;
}
</style>
XHTML代码片段:
<body><divid="father"><divid="son1">SonBox-1</div><divid="son2">SonBox-2</div></div>
</body>
在浏览器中浏览的效果如图 2.1.12所示。
图2.1.12 相对定位
修改Son1的样式,去除position:relative;/*relative相对定位 */
#son1{
background-color:#fff0ac;
border:1pxdashed #000000;
padding:10px;
left:50px;
top:30px;
}
由此可以看出,相对定位是相对于盒子元素的自身原有位置进行偏移。
2.2.4 CSS包含块(include)
CSS包含块是标准布局中的一个重要概念,是绝对定位的基础。包含块不同于父级元素,它们之间存在本质的区别。
那么怎么定义一个包含块?在 CSS 中可以用 position 属性定义包含块。使用包含块,设计师可以灵活设置绝对定位的坐标原点和参考值。
为了能够更直观地明白什么是包含块,以及以上阐述的内容,下面通过一个XHTML页面来说明。
margin-top:50px; /* 拉开与窗口顶部的距离 */
border:solid 1px red; /* 定义红色边框线,便于识别 */
position:relative;/* 定义包含元素b为相对定位,确定它为包含块 */
margin-left:50px; /* 拉开与b包含元素的距离 */
#c,#d {/* 定义被包含元素绝对定位,并进行偏移 */
left:50%; /* 与包含块左侧边框距离为50% */
2.3 综合应用
<style type="text/css">
div{padding:2px;}
h1{text-align:center;}
#card{border:2px solid yellow;width:60%;height:600px;position:relative;left:5%;top:5%;
}
#card1{border:2px dashed yellow;width:150px;height:200px;position:absolute;left:20px;top:20px;
}
#card2{border:2px dashed yellow;width:150px;height:200px;position:absolute;left:40px;top:40px;
}
#card3{border:2px dashed yellow;width:150px;height:200px;position:absolute;left:60px;top:60px;
}
#card4{border:2px dashed yellow;width:150px;height:200px;position:absolute;right:100px;top:120px;
}#card5{border:2px dashed yellow;width:150px;height:200px;position:absolute;right:80px;top:100px;
}
#card1{background-color:#0099FF;}
#card2{background-color:#CCFF66;}
#card3{background-color:#CCCC99;}
#card4{background-color:#FFCCCC;}
#card5{background-color:#6699CC;}
</style>
XHTML代码片段:
<div id="card">
<h1>祝福墙</h1><divid="card1"><h5>To:maomao</h5>在我心灵的百花园里,采集金色的鲜花,我把最鲜艳的一朵给你,作为我对你的问候。</div><divid="card2"><h5>To:xiaozhang</h5>一句问安 一声祝福 道不尽怀念的思绪 且祝福… 快乐健康 永远永远</div><divid="card3"><h5>To:anny</h5>愿一个问候带给你一个新的心情,愿一个祝福带给你一个新的起点。 </div><divid="card4"><h5>To:jack</h5>将心底最衷诚的祝福送给你,祝你心想事成,春风得意。</div><divid="card5"><h5>To:anny</h5>打开心灵,卸下你的包装;指尖飞舞,打破冬的沉默;融融的暖意带着深情的问候,那么快让我们拥抱、拥抱、拥抱彼此的梦想!</div></div>
</div>
在浏览器中浏览的效果如图 2.1.15所示。
图2.1.15 祝福墙
实训任务1:搭建博客网站的页面结构
<style>
body{margin:0px;padding:0px;font-family:arial;background-color:#f8e5a9; /*设置成跟#right块一样 */
}
#container{margin:0px;padding:0px;background:url(bg2.jpg)repeat-y;/* 用背景图片填补#left的空白,又不影响#right */
}
#left{position:absolute;top:0px;left:0px;margin:0px;background:#afdcff;width:190px;height:600px;
}
#middle{position:relative;padding:1px15px 10px 15px;margin:-10px 190px 0px 190px;font-size:13px;background:#e9fbff url(bg1.jpg) no-repeatbottom right;height:600px;
}
#right{position:absolute;top:0px;right:0px;margin:0px;background:#f8e5a9;width:190px;padding:20px0px 20px 0px;font-size:12px;height:600px;
}
#footer
{text-align:center;
}
</style>
XHTML代码片段:
<body>
<div id="container"><divid="mainbox"><divid="left"></div><divid="middle"></div><divid="right"></div></div><divid="footer">版权所有2011.2.7 </div>
</div>
</body>
实训任务2:制作博客网站页面的左栏内容
Ø 使用position:absolute;设置左侧盒子为绝对定位,并通过top、left属性指定坐标
将盒子定位布局容器的最左侧,并添加内容,效果如图2.2.2所示。
(1) 在上一阶段的基础上添加左侧盒子的内容,包括标题、链接、列表:
<div id="left"><ul><li><ahref="#">首页</a></li><li><ahref="#">精华区</a></li><li><ahref="#">收藏夹</a></li><li><ahref="#">讨论区</a></li><li><ahref="#">心情日志</a></li></ul><h2>经典推荐</h2><ul><li><ahref="#">拉萨旅行记</a></li><li><ahref="#">回到昨天</a></li><li><ahref="#">情为何物</a></li><li><ahref="#">读书笔记</a></li></ul>
</div>
(2) 编写样式规则控制盒子的位置及其内容的外观:
#left ul{list-style:none;/*去除列表样式*/margin:1em20px 0px 0px;padding:0px0px 15px 22px;
}
#left li{font-size:80%;border-bottom:1pxdotted #B2BCC6;/*li底部带边框*/margin-bottom:0.3em;
}
#left a:link, #nav a:visited{text-decoration:none;/*无下划线的超链接*/color:#2A4F6F;background-color:transparent;
}
#left a:hover{color:#778899;
}
#left h2{font:110%Georgia,"Times New Roman", Times, serif;font-weight:bold;color:#2A4F6F;padding:0px5px 0px 12px;text-decoration:underline;
}
实训任务3:制作博客网站网页的中间内容
参考上一阶段,完成博客网站页面中间内容的设计,效果如图2.2.3所示。
(1) 使用position:relative 将盒子设置成相对定位
#middle{position:relative;padding:1px15px 10px 15px;margin:-10px 190px 0px 190px;font-size:13px;background:#e9fbff url(bg1.jpg) no-repeatbottom right;
}
#middle h4{text-decoration:underline;color:#0078aa;padding-top:15px;font-size:16px;
}
(3) 盒子中的每一段内容可以继续采用盒子进行组织,并设置盒子的下边框为虚线
border-bottom:1px dashed #5b97b1;
(4) 添加内容包括标题、段落、链接等
(5) 设置内容的样式规则,标题大小为16px,带下划线,段落文本补丁:左右15px,上下0px。
代码
<div id="middle"><h4>团购</h4><p>团购就是团体购物,指的是认识的或者不认识的消费者联合起来,来加大与商家的谈判能力,以求得最优价格的一种购物方式。根据薄利多销、量大价优的原理,商家可以给出低于零售价格的团购折扣和单独购买得不到的优质服务。团购作为一种新兴的电子商务模式,通过消费者自行组团、专业团购网站、商家组织团购等形式,提升用户与商家的议价能力,并极大程度地获得商品让利,引起消费者及业内厂商、甚至是资本市场关注。……</p><h4>旅程</h4><p>夕阳 染红蓝天<br>带走 美好的一天<br>风 吹过大地<br>炫美的世界<br><br>霞光 点亮星辰<br>燃起 辽远的梦幻<br>流星 划过夜空<br>忆起 逝夜的歌声<br><br>是谁昨夜背上行囊<br>唱一首满载风尘的歌<br>今夜才又想起拥抱的时刻<br><br>独自走的一段旅程<br>是否还装满苦涩<br>一路风雨飘摇 那坎坷对谁说<br><br>来吧看这远处亮起的点点星火<br>伸手触摸那写在匆匆旅程的歌<br>谁在转过的街口从容挥手<br>谁用欢笑和拥抱<br>记住这一刻</p>
</div>
实训任务4:制作博客网站网页的右栏内容
参考上一阶段,完成博客网站页面右栏内容的设计,效果如图2.2.4所示。
Ø 使用position:absolute;设置左侧盒子为绝对定位,并通过top、right属性指定坐标
Ø 设置内容的样式规则,标题大小为16px,带下划线,段落字体大小为12px
(1)本章主要讲解盒子模型padding和margin属性,盒子之间关系,(1)水平盒子(2)垂直盒子(3)重叠盒子
(2)盒子定位position,绝对定位,静态定位,相对定位。
(3)盒子模型的CSS控制页面的基础。学习本章之后,读者应该能够清楚在这里“盒子”的含义是什么,以及盒子的组成。
(4)本章的重点和难点是深刻地理解“浮动”和“定位”这两个重要属性,它们对于复杂页面的排版至关重要。巩固练习
A. #content {width: 200px; height: 150px ;}
B. #content {width: 200px; height: 150px;position: absolute ;}
C. #content {width: 200px; height: 150px;position: static ;}
D. #content {width: 200px; height: 150px;position: relative ;}
完善理论课祝福墙制作,在其基础上实现如图 2.3.1所示的效果。
当鼠标移至某一张卡片上时,卡片显示在最顶层,鼠标移走后卡片复位。
WEB入门.六 盒子模型相关推荐
- html盒子代码div6,WEB入门.六 盒子模型
学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...
- JAVA web中的盒子模型
JAVA web中的盒子模型 1.认识盒子模型:所谓盒子模型,就是把HTML页面中的元素,看作是一个个矩形的盒子,也就是一个个盛装内容的容器.每个矩形都由元素的内容.内边距.边框.外边距组成. 例: ...
- Web网页设计-盒子模型
盒子模型就是把页面中的HTML元素看作一个方形的盒子,也可以理解为一个盛装内容的容器. 每个盒子都由元素的内容.内边距(padding).边框(border)和外边框(margin)组成. 边框属性 ...
- Web基础05 盒子模型01边框属性
首先要知道盒子模型用的标签是 必备的是实体化三属性 width height background(背景属性) 边框属性 ①边框样式(border-style) border-style:上边[左边 ...
- 创建一个水平盒子java_盒子模型理解
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- CSS设计中盒子模型的应用
Web篇-css盒子模型 文章目录 Web篇-css盒子模型 前言 一.概述 二.盒子模型的使用 1.边框(border) 2.内边距(padding) 3.外边距(margin) 4.盒子的方向 5 ...
- web前端入门学习 css(4)(盒子模型)
文章目录 盒子模型(box model) 盒子模型的组成 边框 border 边框的简写,边框的分开写法(分别写上下左右边框) 利用边框的层叠性简化书写代码(小技巧) 给表格table和单元格td和表 ...
- web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- Jmeter Web 性能测试入门 (六):Jmeter 解析 response 并传递 value
解析response中的内容,并把获取到的value传递到后续的request中,常用的方法就是在想要解析response的request上添加后置处理器 本章介绍两种常用的组件 BeanShell ...
最新文章
- 登录不上_《盗贼之海》登录不上?还在傻傻等待,快来让我教教你
- 消消乐实现下坠_JavaScript有多强大,实现消消乐小游戏
- 真机iOS SDK升级后xcode不能进行真机调试 怎么办
- 掌握JS压缩图片,这一篇就够了
- html css表格样式模板_HTML amp; CSS 基础入门【4】列表及其样式
- ES6的介绍和let的使用|-ES6连载1
- python二元函数拟合_Python拟合二元一次函数
- AppStore 上架方法(将包提交到构建文件)
- 大数据安装之hadoop-3.3.4
- 去掉Xcelsius报表在EP展示空白边界
- Hustoj 添加管理员 删除用户
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(8)之文章管理
- 【机器学习】线性回归实战案例一:多元素情况下广告投放效果分析步骤详解
- 使用python对指定手机号获取各网站登录的验证码。
- 如何最大程度的提高效率?ie分析软件为效率提高带来无限可能
- 10 款牛哄哄的 Chrome 插件
- oracle 01405 提取的值为null,OCI : ORA-01405: 提取的列值为 NULL
- js简单判断页面是否为手机端访问
- Spark视频教程免费下载
- visualvm 字体太小解决方案