第4章：CSS的盒子模型、浮动和定位分析
学习HTML和CSS中的盒模型和浮动布局
学习HTML和CSS中的盒模型和浮动布局HTML和CSS是现代网页设计不可或缺的两个重要技术，其中盒模型和浮动布局是学习HTML和CSS的基础，本文将逐一介绍盒模型和浮动布局的相关知识。
第一章：盒模型盒模型是指HTML中元素的布局和设计的基本单位。
一个HTML元素可以看作一个盒子，盒模型描述了这个盒子的内容、填充、边框和外边距。
在CSS中，盒模型是由四个部分组成的：内容（content）、填充（padding）、边框（border）和外边距（margin）。
1.1 内容（content）一个元素的内容指的是它所包含的文本、图片或其他媒体等信息。
内容的尺寸由元素的宽度和高度属性来决定。
1.2 填充（padding）填充是指元素内容与边框之间的空白区域。
填充可以通过padding属性来设置，可以为元素增加空白区域，使其内容看起来更加美观。
1.3 边框（border）边框是围绕元素内容和填充的线条。
边框可以通过border属性来设置，可以调整线条的宽度、样式和颜色。
1.4 外边距（margin）外边距是指元素与其他元素之间的空白区域。
外边距可以通过margin属性来设置，可以调整元素与其周围元素之间的间隔。
第二章：浮动布局浮动布局是指通过使用CSS中的float属性来控制元素在页面中的位置。
通过设置元素的float属性，可以将元素向左或向右浮动，使其脱离正常的文档流并在页面中移动。
2.1 浮动的基本原理浮动元素会尽可能地靠近页面的左边或右边，并且尽量与前一个元素或后一个元素保持距离。
当元素浮动之后，其他元素会围绕着浮动的元素排列。
2.2 浮动的应用场景浮动布局可以用于实现多栏布局、图文混排以及响应式布局等。
它常用于网页中的导航栏、侧边栏和图片等元素的布局。
第三章：盒模型和浮动布局的综合运用在实际的网页设计中，盒模型和浮动布局经常会同时被使用。
通过对盒模型的设置，我们可以控制元素的尺寸、外观和间距；而通过浮动布局，我们可以实现元素的位置自由调整和多列布局。
了解CSS中的盒模型和定位属性
了解CSS中的盒模型和定位属性CSS（层叠样式表）是我们在网页设计中经常用到的一种技术，其中的盒模型和定位属性也是我们必须掌握的内容。
一、盒模型在CSS中，元素的盒子可以看作是一个三维的盒子，其中包含了内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。
1.1内容(content)内容部分是元素盒子中的第一部分。
这部分用于展示元素的内容，它的大小由元素的宽度(width)和高度(height)属性所决定。
1.2内边距(padding)内边距是内容部分和边框之间的距离。
使用内边距可以在元素内容和边框之间留出空间，使元素看起来更美观。
1.3边框(border)边框是围绕元素内容和内边距的可视化边界。
它可以设置颜色、宽度和样式。
可以为元素设置多个边框，每个边框都具有独立的样式和属性。
1.4外边距(margin)外边距是元素盒子和邻近元素盒子之间的距离。
外边距可以被用来分隔元素。
它们可以在网页设计中被用于创建边距和空格。
二、定位属性定位属性是CSS中另一个重要的概念。
定位可以被用来控制元素的位置。
2.1 positionposition属性可以设置元素的定位类型。
它有以下四个值可用：static、relative、absolute和fixed。
其中static是默认值，元素将遵循正常的文档流，而其他三个值则可以使元素变得具有定位特性，可以通过top、bottom、left和right属性进一步控制它们的位置。
2.2 top该属性指定元素应该向上定位的距离。
它是相对于已定位的父元素而言的。
2.3 bottom该属性指定元素应该向下定位的距离。
它是相对于已定位的父元素而言的。
2.4 left该属性指定元素应该向左定位的距离。
它是相对于已定位的父元素而言的。
2.5 right该属性指定元素应该向右定位的距离。
它是相对于已定位的父元素而言的。
2.6 z-index此属性用于控制元素的堆叠顺序。
CSS属性(3)-浮动定位
现因为用overflow：hidden超出的部分会被隐藏，父元素高度也不用写死，我们
只要在页面写一次清浮动的代码，在需要清浮动的位置加个clearfix类名就可以了。
定位属性
• position: static; 默认值。 • 无定位，在HTML文档流中默认的位置。
• position: absolute;(表示绝对定位) • 这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、
定位的特性
1、行内元素添加了绝对定位可以直接给高和宽不用转换
2、块元素添加了绝对定位，如果没有指定宽度，会自动收缩到内容的宽度。
3、绝对定位的盒子不受父盒子padding的影响。
4、父元素有绝对定位，可以不需要清除浮动
堆叠属性
z-index:规定元素的堆叠顺序 • 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 • 元素可拥有负的 z-index 属性值 • z-index的默认属性值是0 • 仅能在定位元素上奏效（relative,fixed,absolute)
bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对
定位。如果不存在这样的元素，则相对于body元素。
定位属性
• position: relative;（表示相对定位）
• 相对于它在正常文档流的位置进行定位。
• 它通过left、right、top、bottom属性确定元素在正常文档流中的偏移 位置
• 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示
区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
定位使用的范围
层布局模型（定位）就像是图像软件PhotoShop中非常流行的图层编辑功 能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小 的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其
css三大模块：盒子模型、浮动、定位
css三⼤模块：盒⼦模型、浮动、定位⼀、盒⼦模型把HTML页⾯中的元素看作是⼀个矩形的盒⼦（装内容的容器），每个矩形都由元素的内容、内边距padding、边框border和外边距margin 组成。
看下⾯的代码：<style>.box{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}</style><div class="box"></div>代码效果如下：浏览器下的效果在Chrome的开发者⼯具中 box的⼆维分析图盒⼦模型⼀般分为两种：IE盒模型（⼜称怪异盒模型）和标准盒模型css3中可以通过box-sizing来指定盒模型，如下：标准盒模型：box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/IE盒模型：box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/代码如下：<style>div{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}.box1{box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/}.box2{box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/}</style><div class="box1">box1</div><div class="box2">box2</div>两种盒模型效果图如下（box1为标准盒模型、box2为IE盒模型）：浏览器下的效果在Chrome的开发者⼯具中两个盒⼦的⼆维分析图⽹页布局的本质：把⽹页元素（⽂字、图⽚等），放⼊到盒⼦⾥⾯，然后利⽤css摆放盒⼦的过程。
CSS之盒子的浮动与定位
实验六 全部向左浮动
• 实例：float_all_left.html（在BOX-1中增加一 行） • 观察结果
实验七 使用clear属性清除浮动的影响
准备代码
• 先制作一个基础的页面，来演示浮动的效 果。 • 实例：float01.html
实验一 设置第1个浮动的div
• 实例：float_son1.h源自ml • 观察结果 • 注意：box-2的左边框与box-1的左边框是重 合的，而box-2中的文字会围绕着box-1排列。
实验二 设置第2个浮动的div
• relative：元素框偏移某个距离。元素仍保 持其未定位前的形状，它原本所占的空间 仍保留。 • 说明：通过left或right属性指定其水平偏移 量，通过top或bottom属性指定其垂直偏移 量。通过设置垂直或水平位置，让这个元 素“相对于”它的起点进行移动。 • 实例：relative_position.html • 说明：当子块使用相对定位以后，即使移 动到了父盒子的外面，父盒子也不会变大。
– 使用绝对定位的盒子是以它的最近的一个已经 定位的祖先元素为基准进行偏移。 – 如果没有已经定位（只要该盒子的position属性 不是static，并且已经被设置）的祖先元素，则 以浏览器窗口为基准进行定位。
2.3 绝对定位absolute
• 实例：absolute_position_2.html • 观察结果：将父块的定位设置为relative;
• • • • • • • • • • • • • • • • • •
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>这是一个标题</h1> <img class="x" src="/i/eg_mouse.jpg" /> <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p> </body> </html>
《网页设计》课件——第四章 盒子模型
边框成脊形
dashed 虚线
inset
使整个方框凹陷，即在外框内嵌入一个立体边框
solid
实线
outset 使整个方框凸起，即在外框内嵌外一个立体边框
double 双实线
➢ border-style属性为综合属性设置四边样式，必须按上右下左的顺时针顺序，省略时同样采用值复制的 原则，即1个值为4边，2个值为上下/左右，3个值为上/左右/下。
在复合属性中，边框属性border能同时设置4种边框。若果只需要给出一组边框的宽度、样式与颜色，可以通 过border-top、border-right、border-bottom、border-left分别设置。
举例 演示
【实例6-2】border边框属性的设置。
2 边距属性
边距属性分为：内边距padding和外边距marign两种。
比，使用百分比时，内边距的宽度值随着父元素宽度width的变化而变化而变化，与height无关。 ➢ padding也遵循值复制的原则，与border属性类似。 ➢ 当只对某个方向的内边距进行设置时，可以通过padding-top（上内边距）、padding-right
（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）分别设置。
表示4个边框的宽度都为3像素。 表示上下边框的宽度都为3像素，左右边框的宽度都为6像素。 表示上边框的宽度都为3像素，左右边框的宽度都为6像素 下边框的宽度都为9像素。
也可以按照border-top-width:宽度值、border-right-width:宽度值、border-bottomwidth:宽度值、border-left-width:宽度值逐个定义。
盒子属性，浮动，定位
盒⼦属性，浮动，定位1.盒⼦常见属性1）容器盒⼦Box-size:设置盒⼦模型，CSS3标准，content-box:正常默认模式，起源于⾕歌，元素的整体⼤⼩会被内边距和边框撑开border-box：怪异模式，起源于IE，元素的整体⼤⼩不会被内边距和边框撑开Width:宽度Height:⾼度注意：width,height会根据box-size盒⼦模型的不同来决定是内容的宽度和⾼度，还是整个元素⼤⼩的宽度和⾼度。
2）Padding:内边距Padding-left,padding-right,padding-top,padding-bottomPadding:上右下左;Padding:上右下；左边距等于右边距Padding:上右；下跟上边⼀样，左跟右⼀样3）Margin:外边距外边距跟内边距⼀致。
但是两个元素的外边距会重叠。
4）Border:边框语法：border: 边框宽度边框样式颜⾊;可以分开设置，例如border-width: 30px;border-style: dashed;border-color: purple;分别设置上下左右边框，例如border-bottom:50px dotted green;5）Box-shadow:盒⼦阴影box-shadow: 阴影的⽔平偏移值阴影的垂直偏移值阴影的模糊度阴影的颜⾊;6）Display:设置盒⼦是块级元素还是⾏级元素还是弹性元素Block:块级元素，会占据⼀整⾏，有宽⾼，div,h1,p,li,ul...Line-block:⾏块元素，不会占据⼀整⾏，有宽⾼,img...Line:⾏元素，不会占据⼀整⾏，也没有宽⾼,a,span...7）Border-radius:边框的圆⾓8）Background:设置元素的背景，背景图⽚，背景颜⾊Background:是⼀个综合性的属性，可以分出背景颜⾊，背景图⽚，背景是否重复，背景图⽚的位置，背景图⽚的⼤⼩Background-position:设置背景图⽚的位置，left,right,top,bottom,center,百分⽐⼀般可以设置2值，第⼀个值是设置⽔平位置，第⼆个值设置垂直位置Background-size:设置背景图⽚的⼤⼩，注意：有时候不知道图⽚的确切⽐例的时候，只需要设置⼀个宽度或者⾼度，另外⼀个值设置为auto即可。
CSS盒子模型、浮动与定位
body <li> <li> ul ul <ul> <li> li li li li <li> <body> <ul>
标准文档流
块级元素（block level） li占据着一个矩形的区域，并且和相邻的li依次竖直排列， 不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且 和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level）， 即它们总是以一个块的形式表现出来，并且跟同级的 兄弟块依次竖直排列，左右撑满。 思考：哪些标记是块级元素？
静态定位(test05-11.html)
没有设置position属性时的状态
1．一个子块的情况
#block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:relative; /* relative相对定位 */ left:30px; top:30px; }
绝对定位
1．创建基础页面(test05-12.html) 2．使用绝对定位 #block2{ position:absolute; top:0px; right:0px; } 将父div增加一个定位样式： #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; position:relative; }
Margin-left
span2
行内元素之间的margin
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
极目商城首页布局实现
第一步：根据商城首页规划网站
极目商城首页布局实现
完成后基本布局如下图，我们将其分为六个部分
1. Header 网站头部 width: 760px height: 50px 2.search 搜索全站的功能，包含网站的logo 3. Main Navigation 导航条，具有按钮特效。 4.左侧分类 height: 根据类型变化 5.幻灯片放映效果的广告（暂以静态图片代替） 6.广告
特点是只占内容的宽度，默认不会换行，行内元素一般放文本或 者其它的行内元素。常见内联元素<span><a>
块元素(block element)
特点不管内容有多少，它要换行，同时沾满整行，块元素可以放 文本，行内元素，块元素。常见块元素：<div>，<p>。 <div> <p> <span class="s1">span1 hello,world</span> </p> <div class="s2">div1</div> </div>
行内元素和块元素转换
行内元素和块元素转换
如果我们希望一个元素按照块元素方式显示 则： display：block； 如果我们希望一个元素按照行内元素方式显示 则： display：inline；
盒子模型
盒子模型
所有的页面中的元素都可以看成是一个盒子，占据着一定的页面 空间。
盒子模型的主要属性
行内元素和块元素区别
行内元素只占内容的宽度，块元素内容不管内容多少要 占全行。 行内元素只能容纳文本和其它行内元素，块元素可以容 纳文本，行内元素和块元素。（与浏览器类版本和类型 有关） 一些CSS属性对行内元素不生效，比如margin, left, right, width, height。建议尽可能使用块元素定位。（ 与浏览器版本和类型有关）
Relative.css源代码
.s1{width:100px; height: 60px; background-color: yellow; margin-left: 10px; float: left;} #special{position: relative;/*这里我们使用了相对定位*/ left:40px;/*在原来的位置，向右移动大小（如果向左移动，则值 是负数）*/ top:70px;/*在原来的位置，向下移动大小（如果向上移动，则值是负 数）*/}
CSS的相对定位
相对定位（relative）
Relative.html源代码： <div class="s1">div1</div> <div id="special" class="s1">div2</div> <div class="s1">div3</div> <div class="s1">div4</div>
在网页设计中常用的属性名：内容（content）、填充（ padding）、边框（border）、边界（margin）
盒子模型几个属性值解释：
几个属性值解释：
border: 1px solid red; 这里我们给body指定了border的宽度，样式，颜色（顺序可以
随意）
margin: 0 auto; 0表示上下，auto表示左右居中
CSS的绝对定位
把上例中relative换成absolute即为绝对定位 特别说明
relative的参照点是它原来的位置.进行一定排列 absolute定位是对离自己最近的那个非标准流盒子而言的
流:网页设计中就是指元素(标签)的排列方式。 标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出 现,排在后面的元素(标签)内容后面出现。 非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排 列,我们统称为非标准排列。
极目商城首页布局实现
第二步：创建html模板及文件目录等
1、创建html模板，将其保存为index.html,并创建文件夹css， images 2、创建网站的大框：建立一个宽100%的盒子，它将包含网站的 所有元素。在html文件的<body>和</body>之间写入 <div id="page-container"> Hello world. </div> 在css中设置 background-color: yellow;width: 100%; margin: 0 auto;
CSS的定位
CSS定位（positioning）属性允许你对元素进行定位。 Position属性值：
static(默认值)：元素框正常生成。块级元素生成一个矩形框， 作为文档流/标准流的一部分，行内元素则会创建一个或者多个 行框，置于其父元素中。（对定位left，right不生效。） relative：元素框偏移某个距离。元素仍保持其未定位前的形状 ，他原来所占的空间仍保留，从这一角度看，好像改元素仍然在 文档流/标准流中一样。 absolute：元素框从文档流完全删除，并相对于其包含块定位 。包含块可能是文档中的另一个元素或者是初始包含块。元素原 先在正常文档流中所占的空间会关闭，就好像元素原来不存在一 样。元素定位后生成一个块级框，而不论原来它在正常流中生成 何种类型的框。 fixed：元素框的表现类似于将position设置为absolute，不过 其包含块是视窗本身。（以body本身来定位）
<Insert Picture Here>
第四章 CSS盒子模型、 浮动和定位
本章内容
块元素和行内元素 CSS的盒子模型
概念 主要属性
CSS的浮动
左浮动 右浮动
CSS的定位
绝对定位 相对定位
应用CSS相关知识做极目商城首页面
行内元素和块元素
行内元素（inline element）
CSS的浮动
左ቤተ መጻሕፍቲ ባይዱ动
是指让该元素，尽量向左边移动，让出自己右边空间，给下一个 元素显示。
右浮动
是指让该元素，尽量向右移动，直到碰到他的父元素的右边界。 （特别强调：浮动对块元素和行内元素都生效！）
CSS浮动注意事项
如果我们的div框很多，外面的框无法容纳水平排列的浮 动div元素，那么其它浮动块向下移动，直到有足够的空 间。 如果浮动元素的高度不同，那么当它们向下移动时可 能被其它浮动元素“卡住”，如下图：