1.网页布局基础

作者: 单纯的土豆 | 来源:发表于2016-04-18 02:40 被阅读255次

1.网页布局基础
17:2.26-3.1 HTML&css基础知识
用CSS进行网页布局学习笔记
网页布局基础
网页布局基础
网页布局基础
网页布局基础
网页布局基础
浮动
web前端入门到实战：汇总css布局模型和常见代码缩写与长度单位

网页布局基础

什么是网页布局？
网页布局是网页制作的基础（DIV+CSS网页布局）

分类:流式布局，浮动布局，绝对定位布局

知识点：标准文档流，盒子模型，float属性，position属性。

三个案例：

自动居中一列布局案例（盒子模型的使用方法）
浮动布局案例（float属性解决浮动影响的方法）
绝对定位布局案例（绝对定位实现横向两列或者多列布局）

CSS规定的定位机制是以下三种（不包括fixed定位）：

绝对定位（Absolute positioning)

浮动定位(Floats)

标准文档流(Normal flow)：

特点：

从上到下，从左到右，输出文档内容。

由块级元素和行级元素组成

块级元素：特点：从左到右撑满页面，独占一行触碰到页面边缘时，会自动换行

div就是一个典型的块级元素

常见的块级元素（即块级标签），如：div,ul,li,dl,dt,p...

行级元素：特点：能在同一行内显示不会改变HTML文档结构

常见的行级元素（即行级标签），如：span,strong,img,input...大部分表单元素（即表单标签）都属于行级元素（行级标签）。

总结：块级元素和行级元素都是盒子模型

W3C标准：由万维网联盟制定的一系列标准，包括：

结构化标准语言（HTML和XML)

表现标准语言（CSS）

行为标准语言（DOM和ECMAScript)

W3C标准倡导结构，样式，行为分离。

盒子模型

盒子模型=网页布局的基石，由4个部分组成：

边框（border）
外边距（margin)
内边距（padding）
盒子中的内容（content)

盒子模型的立体图片,从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。

盒子模型例子代码如下：

<!DOCTYPE>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
    *{margin:0;padding:0;}
    .content{border:4px solid #badbdb;padding:44px 15px 15px;width:700px;}
    .book{background: url(images/t_book.gif) no-repeat #eff9f9;}
    img{margin:10px 18px;border:1px solid #b1adad;}

 </style>
 </head>
<body>
<div class="content book">
  [站外图片上传中……(77)]
  [站外图片上传中……(78)]
  [站外图片上传中……(79)]
  [站外图片上传中……(80)]
  [站外图片上传中……(81)]
</div>  
</body>
</html>

效果如下：

自动居中一列布局

三个技能点：

标准文档流
块级元素
margin属性

自动居中一列布局代码如下：

<!DOCTYPE>
<html>
  <head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
            *{margin:0;padding:0;}
            #wrap{width:770px;margin:0 auto;}
            #header{width:100%;height:200px;padding:1px solid red;}
            #mainbody{width:100%;height:200px;padding:1px solid blue;}
            #footer{width:100%;height:200px;padding:1px solid green;}

            .content{border:4px solid #badbdb;padding:44px 15px 15px;width:700px;}
            .book{background: url(images/t_book.gif) no-repeat #eff9f9;}
            img{margin:10px 18px;border:1px solid #b1adad;}
      </style>
   </head>
 <body>
        <div id="wrap">
              <div id="header"></div>
                <div id="mainbody">
                    <div class="content book">
                        [站外图片上传中……(82)]
                        [站外图片上传中……(83)]
                        [站外图片上传中……(84)]
                        [站外图片上传中……(85)]
                        [站外图片上传中……(86)]
                    </div>
                 </div>
                <div id="footer"></div>
         </div> 
  </body>
 </html>

实际效果如下：实现了自动居中的效果

QQ20160413211937.png

总结：auto会根据浏览器的宽度自动的设置两边的外边距。

实现网页自动居中一列布局的关键代码是margin:10px auto; width:80%;,自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。

原理：（浏览器的宽度-外包含层的宽度）/2=外边距

如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动（如float:left;)或者绝对定位（position:absolute;或者position:fixed;)

横向两列布局

1.浮动布局简介以及float属性

CSS中规定的第二种定位机制（即浮动布局）能够实现横向多列布局（横向两列布局和横向三列布局），通过设置float属性实现。

float属性（3个属性值）：

left-左浮动
right-右浮动
none-不浮动

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

设置了浮动的元素，仍旧处于标准文档流中。（会对周围元素产生影响）

示例如下：

   <!DOCTYPE>
   <html>
     <head>
       <meta charset="UTF-8">
       <title></title>
         <style type="text/css">
             .box1{height:50px;background: red;float:left;}
             .box2{height:50px;background: blue;}
         </style>
     </head>
   <body>
     <div class="box1"></div>
     <div class="box2"></div>
   </body>
   </html>

效果如下：

若为box1设置了左浮动（float：left;)

效果如下：

box1没有内容的时候（也没有设置宽度的时候），再设置了浮动以后，尺寸得不到扩展，就会缩成一个小圆点出现在浏览器的左上角。box1没有内容，看不出来。

若为box1加上内容：

效果如下：

总结：

如下图示例：

效果如下：

总结：

添加代码如下：

效果如下：

设置右浮动（float:right;)同上原理

另外两种情况：

1）.

2）.

2.清除浮动的常用方法

（1）clear属性---常用clear:both;
(clear:left;或者clear:right;)

（2）同时设置width:100%(或固定宽度）+overflow:hidden;

示例如下：

     <!DOCTYPE>
     <html>
     <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
               .box1{height:50px;background: red;float:left;}
               .box2{height:50px;background: blue;float:left;}
          </style>
     </head>
     <body>
           <p>bbbbbbbbbbbb</p>
           <div class="box1">盒子1盒子1盒子1盒子1</div>
           <div class="box2">盒子2</div>
           <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>

     </body>
     </html>

效果如下：

可以看见P标签里面的内容受到浮动的影响，加入clear:both；后清除浮动

效果如下：

加入 p{width:100%;overflow: hidden;}

效果如下：

另外空标签br标签对块级元素清除浮动比较明显（不建议使用）：

效果如下：

3.横向两列布局

代码如下：

<!DOCTYPE>
<html>
<head>
     <meta 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;width:100%;}
         .left{width:800px;height:200px;background: #fff;}
         .right{width:140px;height:500px;background: #690;}
         #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>

效果如下：

修改代码如下：

效果如下：

QQ20160418004220.png

浮动效果没有显示，因为宽度加在一起后已经放不下两个元素了

修改代码如下：

效果如下：

QQ20160418004353.png

这两个元素设置浮动以后，对它们的包裹层，也就是mainbody层受到影响，mainbody层高度没办法扩展了，还有就是紧邻right层也就是版权部分所在的层缩上来了。

这时对受到影响的mainbody层清除浮动，即添加clear:both;

QQ20160417234854.png

效果如下（没有任何改变）：

QQ20160418003828.png

why?

QQ20160417235508.png

这个时候，使用overflow:hidden;来清除浮动。

效果如下：

如果想要它们有间距，修改代码如下：

效果如下：

通常制作网页过程中，div块的高度一般不需要设置。

还有一种方法就是在right中设置右浮动float:right;,修改代码：

QQ20160418005740.png

效果如下：

QQ20160418005754.png

这种适合横向两列布局的情况，若是横向三列布局，还是需要设置一个外边距。

绝对定位布局

例如：

1.相对定位

举例如下：

<!DOCTYPE>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
           .box1{background: red;height: 300px;position:relative;}
           .box2{background: green;height:100px;}
           .box3{background: blue;height: 200px;}
   </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</body>
</html>

设置了相对定位（没有设置偏移量）后的效果如下：

QQ20160418011822.png

没有任何变化（与没有设置相对定位的时候相比）

设置偏移量的时候，修改代码：

QQ20160418012235.png

效果如下：

QQ20160418012347.png

一旦设置了相对定位就会（1）随机拥有偏移属性，（2）产生空间的层堆叠（有元素重合的时候会对元素进行遮盖），（3）仍处在标准文档流中（把浏览器撑开了）

2.绝对定位

绝对定位分为两种情况：

举例如下：

效果如下：

宽度会跟着内容扩展而扩展：

效果如下：

修改代码如下：

效果如下：

修改代码如下：

效果如下：

box2是依据浏览器为偏移基准

再次修改代码:

效果如下：

另外一种情况：

效果如下：

为什么会出现条状呢？

修改代码：

效果如下：

修改代码：

效果如下：

横向两列布局

举例：

完成下面横向两列排版：

QQ20160418021330.png

即：

代码如下：

主体部分HTML代码：

 <!DOCTYPE>
 <html >
 <head>
 <meta charset="utf-8" >
 <title>绝对定位实现布局</title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 </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>· 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>
 <dl>
    <dt>CSS3</dt>
    <dd>CSS3 计划将 CSS 划分为更小的模块。</dd>
  <p class="learn"><a href="#">亲自体验一下</a>！</p>
  <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
  <p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
 </div>
</div>
  <div id="footer">慕课©版权所有</div>
</div>
</body>
</html>

CSS代码：

 /* CSS Document */
 *{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; 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{margin-left:200px; position:absolute; top:0;}
 #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;}

1.网页布局基础
网页布局基础什么是网页布局？网页布局是网页制作的基础（DIV+CSS网页布局）分类:流式布局，浮动布局，绝对定...
17:2.26-3.1 HTML&css基础知识
一、网页布局基础
用CSS进行网页布局学习笔记
网页布局基础知识一列布局 margin: 0 auto 使内容居中二列布局 1.自适应宽度：给左右两列设置左...
网页布局基础
W3C标准结构化标准语言HTML/XML 表现标准语言CSS 行为标准语言DOM/JavaScript 盒子模型...
网页布局基础
1、CSS的三种定位机制 CSS 规定的定位机制有三种，分别是：标准文档流（Normal flow）：特点：从...
网页布局基础
W3C标准由万维网联盟制定的一系列标准，包括：结构化标准语言（HTML和XML）表现标准语言（CSS）行为...
网页布局基础
基本网页布局一般分为三种：1）流式布局2）浮动布局3）绝对定位布局 css中的定位机制：1）标准文档流特点：a.从...
网页布局基础
第一章自动居中——列布局 1-1 相关知识点讲解 1. W3C标准 2. CSS中的定位机制（1）标准文档流 ...
浮动
网页的布局方式 1.什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 1.标准流...
web前端入门到实战：汇总css布局模型和常见代码缩写与长度单位
知识点一：css布局模型：布局模型是建立在盒模型基础之上，在网页中，元素有三种布局模型：1.流动模型（Flow）2...