您的位置：360文档中心› 第4章：CSS的盒子模型、浮动和定位分析

第4章：CSS的盒子模型、浮动和定位分析

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS的绝对定位



把上例中relative换成absolute即为绝对定位 特别说明
relative的参照点是它原来的位置.进行一定排列 absolute定位是对离自己最近的那个非标准流盒子而言的
流:网页设计中就是指元素(标签)的排列方式。 标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出 现,排在后面的元素(标签)内容后面出现。 非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排 列,我们统称为非标准排列。

Relative.css源代码
.s1{width:100px; height: 60px; background-color: yellow; margin-left: 10px; float: left;} #special{position: relative;/*这里我们使用了相对定位*/ left:40px;/*在原来的位置，向右移动大小（如果向左移动，则值 是负数）*/ top:70px;/*在原来的位置，向下移动大小（如果向上移动，则值是负 数）*/}
特点是只占内容的宽度，默认不会换行，行内元素一般放文本或 者其它的行内元素。常见内联元素<span><a>


块元素(block element)
特点不管内容有多少，它要换行，同时沾满整行，块元素可以放 文本，行内元素，块元素。常见块元素：<div>，<p>。 <div> <p> <span class="s1">span1 hello,world</span> </p> <div class="s2">div1</div> </div>



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>
行内元素和块元素转换


行内元素和块元素转换
如果我们希望一个元素按照块元素方式显示 则： display：block； 如果我们希望一个元素按照行内元素方式显示 则： display：inline；

盒子模型


盒子模型
所有的页面中的元素都可以看成是一个盒子，占据着一定的页面 空间。
盒子模型的主要属性
极目商城首页布局实现

第一步：根据商城首页规划网站
极目商城首页布局实现


完成后基本布局如下图，我们将其分为六个部分
1. Header 网站头部 width: 760px height: 50px 2.search 搜索全站的功能，包含网站的logo 3. Main Navigation 导航条，具有按钮特效。 4.左侧分类 height: 根据类型变化 5.幻灯片放映效果的广告（暂以静态图片代替） 6.广告

极目商城首页布局实现



第二步：创建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的浮动
左浮动 右浮动

Leabharlann Baidu
CSS的定位
绝对定位 相对定位

应用CSS相关知识做极目商城首页面
行内元素和块元素


行内元素（inline element）

在网页设计中常用的属性名：内容（content）、填充（ padding）、边框（border）、边界（margin）
盒子模型几个属性值解释：


几个属性值解释：
border: 1px solid red; 这里我们给body指定了border的宽度，样式，颜色（顺序可以
随意）

margin: 0 auto; 0表示上下，auto表示左右居中
CSS的浮动


左浮动
是指让该元素，尽量向左边移动，让出自己右边空间，给下一个 元素显示。


右浮动
是指让该元素，尽量向右移动，直到碰到他的父元素的右边界。 （特别强调：浮动对块元素和行内元素都生效！）
CSS浮动注意事项


如果我们的div框很多，外面的框无法容纳水平排列的浮 动div元素，那么其它浮动块向下移动，直到有足够的空 间。 如果浮动元素的高度不同，那么当它们向下移动时可 能被其它浮动元素“卡住”，如下图：
行内元素和块元素区别


行内元素只占内容的宽度，块元素内容不管内容多少要 占全行。 行内元素只能容纳文本和其它行内元素，块元素可以容 纳文本，行内元素和块元素。（与浏览器类版本和类型 有关） 一些CSS属性对行内元素不生效，比如margin, left, right, width, height。建议尽可能使用块元素定位。（ 与浏览器版本和类型有关）
相关文档
最新文档