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

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

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

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. mysql修改表和列

    mysql修改列 mysql增加列,修改列名.列属性,删除列语句   mysql修改表名,列名,列类型,添加表列,删除表列     alter table test rename test1; --修 ...

  2. ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用(四)—用户注册

    修改用户注册 1.修改用户名注册规则. 打开Controllers目录下的AccountController.cs. 在控制器中找到 public async Task<IActionResul ...

  3. jQuery的Nicescroll滚动条插件使用方法

    Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触 ...

  4. shell第三篇

    第三篇本文摘自鸟哥的私房菜:http://cn.linux.vbird.org/linux_basic/0105computers.php#program(当年看的时候浮光掠影,现在回头发现,经典就是 ...

  5. adb命令介绍与使用

    DB的概念 adb的全称为Android Debug Bridge,是起到调试桥的作用.通过adb,我们可以在ecplise中方便的通过DDMS来调试Android程序,其实他就是一个debug工具. ...

  6. [JavaScript]自执行函数

    最近在接触mui的时候,遇到了一段代码: (function($, doc) { $.init({ statusBarBackground: '#f7f7f7' }); $.plusReady(fun ...

  7. [Android] Toast问题深度剖析(一)

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 题记 Toast 作为 Android 系统中最常用的类之一,由于其方便的api设计和简洁的交互体验,被我们所广泛采用.但是,伴随着我们开发的深 ...

  8. c#代码启动任务管理器的几种方法

    1.直接启动 ProcessStartInfo info = new ProcessStartInfo(); info.FileName = Path.Combine(Environment.GetE ...

  9. 删除一个目录及其子目录下的所有.svn文件

    今天建立svn,加入代码,发现这些个文件夹中竟然已经有.svn文件夹,也就是它以前使用过svn, 这下就有点麻烦,在全新的svn里,这些.svn需要删除,又不可能一个一个手工去删除 网上翻了一下,发现 ...

  10. 不使用Math.random实现随机数

    不使用Math.random实现随机数 var rand = (function(){ var today = new Date(); var seed = today.getTime(); func ...