版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目9走近盒子模型9.1基础任务：根据布局图创建简单的盒子模型页面WEB29.2前端修炼手册：盒子模型的理解与应用9.3能力提升：创建三列布局的盒子模型9.4能力挑战：制作“专业宣传”网页目录9.1基础任务：根据布局图创建简单的盒子模型页面WEB3掌握盒子模型的基本概念。能够根据结构图或效果图建立盒子模型。能够计算每个元素所占的宽度和高度。知识技能目标49.1基础任务：根据布局图创建简单的盒子模型页面内边距padding内容content边框border标准W3C盒子模型9.2前端修炼手册：盒子模型的理解与应用外边距marginWEB5盒子模型盒子模型（box
model）是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS盒模型本质上是一个盒子，封装周围的HTML元素。HTML中的大部分元素（特别是块元素）都可以看做是一个盒子，网页元素的定位实际就是这些大大小小的盒子在页面中的定位。[!]WEB6盒子模型WEB7盒子模型一个标准的W3C盒子模型由content、padding、border和margin这4个属性组成。各属性含义如下：content（内容）-盒子的内容，显示文本和图像。padding（内边距）-内容也边框之间的距离。会受到框中填充的背景颜色影响。
margin（外边距）-盒子与其它盒子间的距离。margin是完全透明的，没有背景色。
border（边框）-盒子的边框，它具有border-style、border-width、border-color属性。边框是受到盒子的背景颜色影响的。899.2.2
盒子模型的计算在CSS的标准盒子模型中，width和height指的是内容区域（content）的宽度和高度，不是盒子的实际大小。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。在标准的W3C盒子模型中：元素框的总宽度=元素的width+padding的左右边距的值+margin的左右边距的值+border的左右宽度；元素框的总高度=元素的height+padding的上下边距的值+margin的上下边距的值＋border的上下高度。9.2.2
盒子模型的计算注意：IE的盒子模型与标准的W3C盒子模型有区别，IE的盒子模型中，width和height指的是内容区域+border+padding的宽度和高度。在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。9.2.2
盒子模型的计算请按照W3C标准计算一下这个元素实际占用的空间width:250px;height:300px;padding:10px;margin:10px;border:5px
solid
gray;9.2.2
盒子模型的计算算一下，以下两个盒子实际占用的宽度是多少（默认外边距为0）？.box1{width:100px;height:100px;padding:100px;border:
1px
solid
red;}.box2{width:250px;height:250px;padding:25px;border:
1px
solid
red;}9.2.2
盒子模型的计算由于IE的盒子模型width/height计算方法和标准的W3C盒子模型width/height计算方法不同，这在实际开发中会造成不小的麻烦。那么，在实际开发中怎么解决这个麻烦，从而进行统一布局呢？1516box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。例如，假如需要并排放置两个带边框的框，可通过将
box-sizing设置为"border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。9.2.3
box-sizing属性介绍语法格式：box-sizing:content-box|border-box|inherit;属性值描述content-box默认值。这是由CSS2.1规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit规定应从父元素继承box-sizing属性的值。9.2.3
box-sizing属性介绍比较下面两段代码box-sizing属性值及其带来的不同结果（margin:0）.test1{box-sizing:content-box;width:200px;padding:10px;border:15px
solid#eee;}元素实际宽度为：200px+10px*2+15px*2内容宽度为:200px.test2{box-sizing:border-box;width:200px;padding:10px;border:15px
solid#eee;}元素实际宽度为：200px内容宽度为:200px-10px*2-15px*29.2.4
伪元素用于向某些选择器设置特殊效果语法格式：selector:pseudo-element
{property:value;}:first-line伪元素用于向文本的首行设置特殊样式:first-letter伪元素用于向文本的首字母设置特殊样式:before伪元素可以在元素的内容前面插入新内容:after伪元素可以在元素的内容之后插入新内容伪元素9.2.4
伪元素1．:first-line伪元素用于向文本的首行设置特殊样式（只能用于块级元素）<html><head><style
type="text/css">p:first-line{color:
#ff0000;font-variant:
small-caps;}</style></head><body><p>You
can
use
the
:first-line
pseudo-element
to
add
a
special
effect
to
thefirst
line
of
a
text!</p></body></html>代码网页效果9.2.4
伪元素2．:first-letter伪元素用于向文本的首字母设置特殊样式（只能用于块级元素）<html><head><style
type="text/css">p:first-letter{color:
#ff0000;font-size:xx-large;}</style></head><body><p>You
can
use
the
:first-letter
pseudo-element
to
add
a
special
effect
tothe
first
letter
of
a
text!</p></body></html>代码网页效果9.2.4
伪元素3．:before伪元素可以在元素的内容前面插入新内容<html><head><style
type="text/css">h1:before
{content:url(images/before.gif)}</style></head><body><h1>This
is
a
heading</h1><p>The
:before
pseudo-element
inserts
content
before
an
element.</p></body></html>代码网页效果9.2.4
伪元素4．:after伪元素可以在元素的内容之后插入新内容<html><head><style
type="text/css">h1:after
{content:url(images/after.gif)}</style></head><body><h1>This
is
a
heading</h1><p>The
:after
pseudo-element
inserts
content
after
an
element.</p></body></html>代码网页效果9.2.4
伪元素5．伪元素和类伪元素可以与CSS类配合使用selector.class:pseudo-element
{property:value;}<html><head><style
type="text/css">p.article:first-letter{color:
#FF0000;}</style></head><body><p
class="article">This
is
a
paragraph
inan
article。</p><p
class="article">This
is
a
paragraph
inan
article。</p></body></html>代码网页效果9.2.4
伪元素6．多重伪元素可以结合多个伪元素来使用<html><head><style
type="text/css">p:first-letter{color:#ff0000;font-size:xx-large;}p:first-line{color:#0000ff;font-variant:small-caps;}</style></head><body><p>You
can
combine
the
:first-letter
and
:first-line
pseudo-elements
to
add
aspecial
effect
to
the
first
letter
and
the
first
line
of
a
text!</p></body></html>代码9.2.4
伪元素6．多重伪元素当文字在浏览器窗口显示在一行内时当文字在浏览器窗口中超过一行显示时网页效果27margin越界<html><head><meta
charset="utf-8"><title>越界问题</title><style
type="text/css">.parent{width:
300px;height:
300px;background-color:
red;}.child
{width:
100px;height:
100px;background-color:
green;margin-top:
50px;}</style></head><body><div
class="parent"><div
class="child"></div></div></body></html>越界问题第一个子元素的
margin-top和最后一个子元素的
margin-bottom的越界问题当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象。9.2.5
实际开发中遇到的和盒子模型相关的应用及小问题9.2.5
实际开发中遇到的和盒子模型相关的应用及小问题解决方法解决方法有四个：给父元素加边框border（副作用）给父元素设置padding值（副作用）父元素添加overflow：hidden（副作用）父元素加前置内容生成。（推荐）推荐使用第四种方法，参考样式代码：.parent:before{content:
"";display:
table;}margin越界9.2.5
实际开发中遇到的和盒子模型相关
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 组织工程相关行业投资方案
- PET胶水行业相关投资计划提议范本
- 2024年全新版‘房产买卖合同’
- 2024年国际品牌授权代理合同
- 河道淤积清理施工方案
- 生物医药技术成果转化合同
- 2024年池州道路运输从业资格证b2
- 2024年男科医院项目规划申请报告模范
- 2024年资阳道路客运驾驶员从业资格证考试题库
- 2024年轴流风扇项目规划申请报告模范
- 2023年事业单位联考A类《综合应用能力》试题及答案
- 营养不良护理查房
- 桂林国际旅游胜地发展规划纲要解读样本
- 高考选科指导
- 广州金证研公司的笔试题
- 工程项目建设程序
- 新苏教版科学三年级上册学生活动手册答案
- 压疮用具的使用护理课件
- 临床医学概论课程研究报告
- 长春工业大学开题报告模板
- 中学信息技术教学中如何渗透德育教育
评论
0/150
提交评论