Skip to content

CSS 网页布局基础

Jump to bottom
wanglinzhizhi edited this page Jul 28, 2016 · 2 revisions

title: "CSS：网页布局基础"

3种定位机制：

  • 标准文档流（Normal flow）
  • 浮动（Floats）
  • 绝对定位（Absolute positioning）

盒模型：

  • 边框
  • 外边距
  • 内边距
  • 盒子中的内容

盒子模型尺寸

  • 尺寸计算： 盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸

demo:

一个div的边框为3px，内边距为2px，右外边距为10px，往它的内部插入一张宽度为120px的图片，该div的宽度是多少？

div宽度=2xborder+2xpadding+margin+图片宽度=140px

自动居中一列布局

需要主要用到的技能：

  • 标准文档流
  • 块级元素
  • margin属性（设置自动居中）

Notes: 如果想让页面自动居中，当设置了margin属性为auto之后，不能再设置浮动或绝对定位属性。

### 浮动布局

• CSS中规定的第二种定位机制

• 能够实现横向多列布局（横向两列、横向三列…横向N列）

• 通过设置float属性实现

float属性

3个属性值

​ Ø left—左浮动

​ Ø right—右浮动

​ Ø none—不浮动

• 特点：元素会左移，或右移，直至触碰到容器为止

对紧邻其后元素的影响

Ø 相邻元素上移，占据其后位置

Ø 紧挨着它，并排显示

浮动导致的常见问题

Ø父元素高度无法自动扩展

Ø 元素上移，填满浮动元素右侧（或中间）的间隙

Notes:浮动元素对相邻元素的影响，会导致页面布局混乱

Notes:

  • 当div的内部无内容的时候，div设置为float的时候，它的宽度为0.然后当有内容时，随着内容的宽度的变化而变化
  • 当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。其他的元素不会受到任何影响。

清除浮动的方法：

  • 方法1：

    clear: both;/*一般用于紧邻其后的元素的清除*/

  • 方法2：

    p{
    width:100%;
    overflow:hidden;
}/*当父元素缩成一条时,对父元素的作用,这时候应该使用overflow:hidden*/

Note : 方法3 空标签 不推荐

Notes: 当父包含块缩成一条时,用 ·clear:both· 方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动,这时应该使用 ·overflow:hidden·;

Notes: div的高度一般不要设置,建议一定不要设置;

原因:

因为在清除浮动的时候使用了·overflow:hidden· 属性,一旦你设置了高度,那么内容就无法自动扩展 了...

特别是还设置了隐藏属性,当内容超过高度时,就没办法显示了

Demo:横向两列式布局

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <style type="text/css">
  * {
      margin:0;
      padding:0;
  }
  #wrap {
      background:#00C;
      margin:0 auto;
      width:960px;
  }
  #header {
      background:#FF3300;
      width:100%;
  }
  #mainbody {
          background:#FC0;
          overflow:hidden;
  }
  .left {
      width:800px;
      height:200px;
      background:#000;
      float:left;
  }
  .right {
  width:140px;
  height:500px;
  background:#690;
  float:right;
  }
  #footer {
      background:#639;
      width:100%;
  }
  </style>
  </head>

  <body>
  <div id="wrap">
    <div id="header">头部</div>
    <div id="mainbody">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div id="footer">版权部分</div>
  </div>
  </body>
  </html>
### 绝对定位布局

• CSS中规定的第三种定位机制

• 能够实现横向多列布局及较为复杂的定位

• 通过设置position属性实现

position属性:

• 拥有3种定位形式：1.静态定位(static属性 没有设置position定位,元素处于标准文档流中)、2**.相对定位**(relative属性)、3.绝对定位(absolute属性,fixed属性)

• 可设置4个属性值

​ Ø static（静态定位）

​ Ø relative（相对定位）

​ Ø absolute（绝对定位）

​ Ø fixed（固定定位）

相对定位

• 特点

​ Ø 相对定位的元素相对于自身原有位置进行偏移

​ Ø 相对定位的元素仍处于标准文档流中(比如说,如果left操作,可能最终显示效果会把整个浏览器窗口给撑开了.)

​ Ø 一旦元素设置相对属性,随即拥有偏移属性和z-index属性

demo

<!DOCTYPE html>
<html>
<head>
	<title>相对定位</title>
</head>
<style type="text/css">
	.box1{
		background: red;
		height: 400px;
		position: relative;/*下面的left值会将窗口撑开,可见是在文档流中*/
		top: 110px;
		left: 523px;
	}
	.box2{
		background: green;
		height: 200px;
	}
	.box3{
		background: blue;
		height: 300px;
	}
</style>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>


</body>
</html>

绝对定位

• 特点

​ Ø 建立了以包含块为基准的定位

​ Ø 完全脱离了标准文档流(不会对它的兄弟节点造成影响)

​ Ø 随即拥有偏移属性和z-index属性(空间的层次属性)

Notes：absolute及fixed都属于绝对定位

Note: 包含块 包含块 相对于包含块

A. 未设置偏移量的状态

特点:

  • 无论是否存在已定位祖先元素,都保持在元素初始位置
  • 元素脱离标准文档流

还有一个Notes: 当设置了绝对定位的元素,它的宽度随着内容的宽度的变化而变化.这个特点和浮动很相似

B. 当设置了偏移量的情况

偏移参照的基准分两类: 无已定位祖先元素, 有已定位祖先元素

  • 无已定位的祖先元素的时候:以(即根节点)为偏移参照基准
  • 有已定位祖先元素,以距其最近的已定位祖先元素为偏移参照基准.

demo 无已定位祖先元素

此时的偏移量是相对html根节点进行偏移的.

​```
<!DOCTYPE html>
  <html>
  <head>
      <title>相对定位</title>
  </head>
  <style type="text/css">
      .box1{
          background: red;
          height: 400px;

      }
      .box2{
          background: rgba(0, 128, 0, 0.26);
          height: 200px;
          position: absolute;
          top:50px;
          left: 100px;
      }
      .box3{
          background: blue;
          height: 300px;
      }
      .box{
          background: #FFC107;
          height: 400px;
          /*position: relative;*/
      }
  </style>
  <body>
  <div class="box1">box1</div>

  <div class="box">
      <div class="box2">box2</div>
  </div>

  <div class="box3">box3</div>
    </body>
  </html>

​```

demo2 有已定位祖先元素

此时的偏移量是相对最近的已定位的父节点进行偏移的,注意这里的包裹层box层

<!DOCTYPE html>
<html>
<head>
	<title>相对定位</title>
</head>
<style type="text/css">
	.box1{
		background: red;
		height: 400px;

	}
	.box2{
		background: rgba(0, 128, 0, 0.26);
		height: 200px;
		position: absolute;
		top:50px;
		left: 100px;
	}
	.box3{
		background: blue;
		height: 300px;
	}
	.box{
		background: #FFC107;
		height: 400px;
		position: relative;
	}
</style>
<body>
<div class="box1">box1</div>

<div class="box">
	<div class="box2">box2</div>
</div>

<div class="box3">box3</div>


</body>
</html>

demo3 依然是有已定位祖先元素,但是有多个的情况

此时的box2的偏移还是以box的位置为参考基点.即最近的包含块(祖先元素)

<!DOCTYPE html>
<html>
<head>
	<title>相对定位</title>
</head>
<style type="text/css">
	.box1{
		background: red;
		height: 400px;

	}
	.box2{
		background: rgba(0, 128, 0, 0.26);
		height: 200px;
		position: absolute;
		top:50px;
		left: 100px;
	}
	.box3{
		background: blue;
		height: 300px;
	}
	.box{
		background: #FFC107;
		height: 400px;
		position: relative;
	}

	.wrap{
		background: #607D8B;
		height: 1500px;
		width: 100%;/*当一个元素设置了绝对定位,没有设置宽度时,元素的宽度根据内容进行调节.*/
		position: absolute;
	}
</style>
<body>
<div class="wrap">
	<div class="box1">box1</div>

	<div class="box">
		<div class="box2">box2</div>
	</div>

	<div class="box3">box3</div>

</div>
</body>
</html>

Demo 使用绝对定位实现两列布局

适用场合: 常使用一列固定宽度, 另一列宽度自适应的情况

主要技能:

  • relative- 父元素相对定位

  • absolute-自适应宽度元素绝对定位

(即绝对定位的元素一定是在相对定位的元素的里面)

需要特别注意的是:固定宽度列的高度 > 自适应宽度的列

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位实现布局</title>
<style type="text/css">
* {
    margin:0;
	padding:0;
	font-size:12px;
	color:#333;
	font-family:Verdana, Geneva, sans-serif, "宋体";
	list-style:none;
}
a {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
	color:#ff0000;
}
p {
	line-height:24px;
}
#wrap {
	width:780px;
	margin:0 auto;
	padding:0 10px 10px;
	border-left:1px solid #e7e7e7;
	border-right:1px solid #e7e7e7;
}
#header {
	width:100%;
	overflow:hidden;
}
.logo {
	width:100%;
	height:80px;
	line-height:80px;
	font-size:30px;
	font-family:"微软雅黑";
	background:#3399cc;
	color:#fff;
	text-indent:30px;
}
.nav {
	width:100%;
	margin-top:10px;
}
.nav li {
	margin:0 32px;
	float:left;
}
.nav li a {
	color:#7f7f7f;
	font-size:16px;
	display:block;
	padding-bottom:2px;
}
.nav li a:hover {
	border-bottom:3px solid #cc0000;
	text-decoration:none;
}
.nav li.current {
	border-bottom:3px solid #cc0000;
}
.nav li.current a:hover {
	border-bottom:none;
}
#mainbody {
	     width:100%;
         position:relative; /*注意这里1 设置祖先元素的相对定位,但是不设置top,left位移.~~~~~~~~~~~~~~*/
	     margin-top:20px;
}
#sidebar {
	width:180px;
	padding-bottom:10px;
}
#sidebar dl {
	padding:0 0 5px;
}
#sidebar dt {
	font-weight:bold;
	line-height:22px;
	font-family:"微软雅黑";
	font-size:14px;
	color:#fff;
	background:#3399cc;
	padding:5px 0 5px 15px;
	font-weight:normal;
	margin-bottom:10px;
}
#sidebar dd {
	line-height:20px;
	padding-left:15px;
}
#sidebar dd.current a {
	color:#f00;
}

#content {
    position:absolute;top:0;/*注意这里 设置绝对定位元素~~~~~~~~~~~~~~*/
	margin-left:200px;/*注意这里 也可以直接设置为left:200px~~~~~~~~~~~~~~*/
}
#content h1 {
	color:#000;
	font-size:24px;
	font-family:"微软雅黑";
	font-weight:normal;
}
#content  h3 {
	margin-top:10px;
	line-height:26px;
}
#content  dl {
	margin-bottom:10px;
}
#content  dt {
	font-weight:bold;
	line-height:26px;
}
#content  dd {
	line-height:22px;
}
.learn a {
	color:#900b09;
	text-decoration:underline;
	padding-bottom:2px;
}
.learn a:hover {
	text-decoration:none;
}
.tips {
	color:#999;
	margin-top:20px;
}
.pageto {
	border-top:1px solid #aaa;
	border-bottom:3px solid #aaa;
	margin-top:5px;
	padding:15px 0;
}
.pageto a {
	margin:0 10px;
	background:#f3f3f3;
	padding:5px 20px;
	border:1px solid #dfdfdf;
	color:#555;
}
.pageto a:hover {
	color:#000;
	text-decoration:none;
}
.disline {
	border-bottom:1px dashed #ccc;
	margin-top:10px;
}
#footer {
	width:100%;
	margin-top:15px;
	padding:15px 0;
	text-align:center;
	color:#999;
	background:#ddd;
}
</style>
</head>

<body>
<div id="wrap">
  <div id="header">
    <div class="logo">前端开发教程</div>
    <div class="nav">
      <ul>
        <li class="current"><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Ajax</a></li>
      </ul>
    </div>
  </div>
  <div id="mainbody">
    <div id="sidebar">
      <dl>
        <dt>CSS 基础教程</dt>
        <dd class="current"><a href="#">CSS 简介</a></dd>
        <dd><a href="#">CSS 基础语法</a></dd>
        <dd><a href="#">CSS 高级语法</a></dd>
        <dd><a href="#">CSS 派生选择器</a></dd>
        <dd><a href="#">CSS id 选择器</a></dd>
        <dd><a href="#">CSS 类选择器</a></dd>
        <dd><a href="#">CSS 属性选择器</a></dd>
        <dd><a href="#">CSS 创建</a></dd>
      </dl>
      <dl>
        <dt>CSS 样式</dt>
        <dd><a href="#">CSS 背景</a></dd>
        <dd><a href="#">CSS 文本</a></dd>
        <dd><a href="#">CSS 字体</a></dd>
        <dd><a href="#">CSS 链接</a></dd>
        <dd><a href="#">CSS 列表</a></dd>
        <dd><a href="#">CSS 表格</a></dd>
        <dd><a href="#">CSS 轮廓</a></dd>
      </dl>
      <dl>
        <dt>CSS 盒子模型</dt>
        <dd><a href="#">CSS 盒子模型概述</a></dd>
        <dd><a href="#">CSS 内边距</a></dd>
        <dd><a href="#">CSS 边框</a></dd>
        <dd><a href="#">CSS 外边距</a></dd>
        <dd><a href="#">CSS 外边距合并</a></dd>
      </dl>
      <dl>
        <dt>CSS 定位</dt>
        <dd><a href="#">CSS 定位概述</a></dd>
        <dd><a href="#">CSS 相对定位</a></dd>
        <dd><a href="#">CSS 绝对定位</a></dd>
        <dd><a href="#">CSS 浮动</a></dd>
      </dl>
      <dl>
        <dt>CSS 选择器</dt>
        <dd><a href="#">CSS 元素选择器</a></dd>
        <dd><a href="#">CSS 选择器分组</a></dd>
        <dd><a href="#">CSS 类选择器详解</a></dd>
        <dd><a href="#">CSS ID 选择器详解</a></dd>
        <dd><a href="#">CSS 属性选择器详解</a></dd>
        <dd><a href="#">CSS 后代选择器</a></dd>
        <dd><a href="#">CSS 子元素选择器</a></dd>
        <dd><a href="#">CSS 相邻兄弟选择器</a></dd>
        <dd><a href="#">CSS 伪类</a></dd>
        <dd><a href="#">CSS 伪元素</a></dd>
      </dl>
      <dl>
        <dt>CSS 高级</dt>
        <dd><a href="#">CSS 对齐</a></dd>
        <dd><a href="#">CSS 尺寸</a></dd>
        <dd><a href="#">CSS 分类</a></dd>
        <dd><a href="#">CSS 导航栏</a></dd>
        <dd><a href="#">CSS 图片库</a></dd>
        <dd><a href="#">CSS 图片透明</a></dd>
        <dd><a href="#">CSS 媒介类型</a></dd>
        <dd><a href="#">CSS 注意事项</a></dd>
        <dd><a href="#">CSS 总结</a></dd>
      </dl>
    </div>
    <div id="content">
      <h1>CSS 简介</h1>
      <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
      <h3>你应该知道这些知识</h3>
      <p>在继续之前，你应该有一个以下基本认识：</p>
      <p>&middot; HTML / XHTML</p>
      <p class="learn">如果您希望首先学习这些项目，我们的<a href="#">主页</a>上可以找到教程。</p>
      <div class="disline"></div>
      <h3>什么是CSS？</h3>
      <p>CSS即级联样式表。
        它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
      <div class="disline"></div>
      <h3>基本信息</h3>
      <p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
      <div class="disline"></div>
      <h3>发展历史</h3>
      <dl>
        <dt>CSS1</dt>
        <dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd>
      </dl>
      <dl>
        <dt>CSS2</dt>
        <dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd>
      </dl>
      <h3>CSS3</h3>
      <dl>
        <dt>CSS3 计划将 CSS 划分为更小的模块。</dt>
        <dd class="learn"><a href="#">亲自体验一下</a>！</dd>
      </dl>
      <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
      <p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
    </div>
  </div>
  <div id="footer">慕课&copy;版权所有</div>
</div>
</body>
</html>

absolute与fixed的相同点

• 完全脱离了标准文档流—兄弟元素不再受其影响
• 以父包含块为基准定位—初始位置在父包含块的左上角

absolute与fixed的区别

偏移参照基准

		absolute
			- 无已定位祖先元素，以<html>为 偏移参照基准
			- 有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准

		fixed
			- 有、无已定位祖先元素，均以浏览器可视窗口为偏移参照基准

absolute与fixed的区别

表现形式（产生滚动条时）
    absolute  
        位置会随滚动条变化

    fixed
    	位置固定，不会随滚动条变化

    	被他遮盖的元素，可以从其下穿过

--end--

Clone this wiki locally