网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。

三种关系:相邻,嵌套,重叠

下面介绍网页布局的常用几种方式

1.一列布局:

一般都是固定的宽高,设置margin : 0 auto来水平居中,用于界面显著标题的展示等;

        .main{
width: 200px;
height: 100px;
background-color: grey;
margin: 0 auto;
}
<div class="main"></div>

2.两列布局:

  说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动

  设置左左浮动,或设置左右浮动(这是需要确定父级元素的宽度)

  如何父级元素没有设置高度,则需要设置overflow:hidden来清除浮动产生的影响

  对于自己相邻元素清除浮动产生的影响用:clear:both;

    <div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
        .main{
width: 400px;
background: red;
overflow: hidden;
} .left{
background: yellow;
float: left;
} .right{
background: green;
float: left;
}

3.三列布局:

两侧定宽中间自适应

首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响!

    <div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
        .main{
width: 100%;
background: red;
overflow: hidden;
}
.left{
background: yellow;
float: left;
width: 100px;
}
.middle{
background: rosybrown;
float: left;
width: cacl(100%-200px);
}
.right{
background: green;
float: right;
width: 100px%;
}

或着为父级元素设置relative属性,再为子元素设置absolute属性,再分别定位,调间距。

<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>
<style>
p{margin:;}
.parent{position: relative;height:40px;}
.left,.right,.center{position: absolute;}
.left{left:;width:100px;}
.right{right:;width: 100px;}
.center{left: 120px; right: 120px;}
</style>

4.混合布局:

在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分。

    <div class="top"></div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer"></div>
        .top{
height: 100px;
background: teal;
}
.footer{
height: 100px;
background: wheat;
}
.main{
width: 100%;
background: red;
overflow: hidden;
}
.left{
background: yellow;
float: left;
width: 50%;
}
.right{
background: green;
float: right;
width: 50%;
}

5.扩展(如等分布局等)

    <div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
        body{margin:;}
.parent{
border: 1px solid red;
overflow: hidden;
margin-right: -10px;
}
.child {
width: calc(25% - 10px);
height: 100px;
background: green;
float: left;
margin-right: 10px;
}

CSS布局(五) 网页布局方式的更多相关文章

  1. css 实现的网页布局

      css 实现网页布局,上中下三部分,中间为固定宽度且分为左右两部分 <!DOCTYPE html> <html> <head> <meta charset ...

  2. CSS简单的网页布局

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. css基础-定位+网页布局案例

    position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...

  4. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  5. CSS的五种定位方式

    CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...

  6. DIV+CSS 网页布局之:混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  7. HTML&CSS精选笔记_布局与兼容性

    布局与兼容性 CSS布局 版心和布局流程 为什么要应用布局? 阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对 ...

  8. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  9. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

随机推荐

  1. SpringMvc4.x--Spring MVC的常用注解

    //下列代码显示用到的对象public class DemoObj { private Long id; private String name; public DemoObj() { //① sup ...

  2. python_协程方式操作数据库

    # !/usr/bin/python3 # -*- coding: utf-8 -*- import requests import gevent import pymysql from gevent ...

  3. python 爬取B站视频弹幕信息

    获取B站视频弹幕,相对来说很简单,需要用到的知识点有requests.re两个库.requests用来获得网页信息,re正则匹配获取你需要的信息,当然还有其他的方法,例如Xpath.进入你所观看的视频 ...

  4. 转-How to install an SSH Server in Windows Server 2008

    window也可以通过ssh客户端连接,具体方式参考下面 1 How to install an SSH Server in Windows Server 2008 2 freeSSHd and fr ...

  5. Linux指令--touch

    原文出处:http://www.cnblogs.com/peida/archive/2012/10/30/2745714.html linux的touch命令不常用,一般在使用make的时候可能会用到 ...

  6. 错误:You can't specify target table 'xxx' for update in FROM clause的解决

    问题: 今天在MySQL数据库删除重复数据的时候遇到了一个问题.如下脚本: DELETE FROM tempA WHERE tid IN ( SELECT MAX(tid) AS tid FROM t ...

  7. Ubuntu16.04下的2009q3交叉编译工具链的搭建

    环境搭建:    1.下载arm-2009q3.tar.bz2源码.  百度云链接  密码: rbui    2.将arm-2009q3.tar.bz2拷贝到/usr/local/arm(没有该目录就 ...

  8. Func常用模块及API

    Func常用模块及API Func提供了非常丰富的功能模块,包括: CommandModule(执行命令) CopyFileModule(拷贝文件) CpuModule(CPU信息) DiskModu ...

  9. linux中的&&和||(linux中=和==效果是一样的)

    1. 命令1 && 命令2 命令1执行成功在执行命令2 2. 命令1 || 命令2 命令1执行失败后在执行命令2 我觉得这完全就是判断呀.

  10. C++的string类

    关于头文件cstring,提供了strlen及很多与字符串相关的函数的声明. 头文件string,要使用string类,必须在程序中包含头文件string,string类位于std中,必须提供一条us ...