资讯专栏INFORMATION COLUMN

css常用布局

Cristalven / 3153人阅读

摘要:二双列布局一列固定宽度,另外一列自适应宽度。如果先执行,由于有左,就正好可以放的下注意使用后清除浮动三三列布局两侧两列固定宽度,中间列自适应宽度。

一、单列布局

单列布局长这个样子,主要有两种:普通单栏,通栏的单栏布局

1、普通单栏

比较简单,设置 定宽 + 水平居中即可



内容

执行结果链接描述
浏览器宽度超过960px时,外margin出现。

当收缩浏览器宽度,小于960px时,margin为0,出现滚动条。

2、通栏

header
content

执行结果链接描述
在header 和footer上再包裹一层div,在外层的div上添加背景颜色,设置内层layout上设置左右margin:auto,就出现了通栏的效果。实际上layout占据的位置是固定的,如下图border框出的位置。

当浏览器宽度收缩的时候,也会出现滚动条。

二、双列布局

一列固定宽度,另外一列自适应宽度。通过float+margin实现

  #content:after{
      content: "";
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;
    }
    .main{
      margin-left: 210px;
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }

  
  
aside
content

执行结果链接描述
1、最重要布局的时候浮动元素要放在前面,要先放aside,再写content。因为content是普通的块级元素,如果先执行content,就会占据一整行,aside就只能向下浮动。
如果先执行aside,由于有左margin,就正好可以放的下
2、注意使用后清除浮动

三、三列布局

两侧两列固定宽度,中间列自适应宽度。通过设置aside 左右float+左右margin实现


   
aside
aside2
main

执行结果:链接描述

四、水平等距排列

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

执行结果链接描述
左右没有margin

五、flex布局

关于flex这三篇文章,写得比较好
Flex 布局教程:实例篇
Flex 布局教程:语法篇
深入理解 flex-grow & flex-shrink & flex-basis

六、圣杯布局 1、起因

三列布局中,一般两边是广告,中间是实际内容。要求中间内容元素在 dom 元素次序中处于优先位置。所以普通的三栏布局就用不了,必须要用更复杂的方式来实现。

2、原理(浮动+负margin+绝对定位)

1、给main,aside,extra都设置为浮动,main设置宽度为100%

2、设置aside负margin-left为100%(相当于向左移动一个父元素的宽度),将aside移动到main的左边

3、设置extra负margin-left为150px(extra的宽度),将extra移动到main的右边

4、为了避免main的内容被extra和aside遮挡。给content设置左padding为100px,右padding为150px,给extra和aside腾出位置

5、最后使用position:relative,将extra和aside分别移动到两边

3、遇到的坑

设置负margin和width为百分比,计算的基数都是父元素的宽度
负margin使用较难掌握,使用前可以看一下这篇负margin的原理的文章

  

  
main
aside
extra

执行结果链接描述

七、双飞翼布局(浮动+左右margin+负margin)

demo
原理:双飞翼的布局和圣杯是很相似的,不同的是双飞翼在main内部再嵌套了一层wrap。用wrap设置左右margin,代替content设置padding和绝对定位。



  
main
aside
extra

执行结果

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114213.html

相关文章

  • CSS常用布局

    摘要:头部主要内容左边栏右边栏尾部显示为头部主要内容左边栏右边栏尾部圣杯布局和双飞翼布局的原理这篇文章讲解得比较清楚,我就不再赘述。 ====== 样例代码不能显示,请看原文https://magicly.me/css-layout/ ====== 布局是CSS中一个很重要的部分,甚至我觉得是最重要也是最难的部分,其他诸如字体大小、颜色等等都是很容易的。最近总结一下使用过的CSS常...

    aaron 评论0 收藏0
  • 深入学习CSS布局系列(一)布局常用属性

    摘要:布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后,父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列(一)布局常用属性 一直感觉自己对CSS的各个属性很了解,可是在前几天一次面试后发现自己真的很多地方感觉自己知道,可是实际上自己并不是真的理解了...

    Noodles 评论0 收藏0
  • CSS 常用布局在小程序中的应用

    摘要:常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式,都是基于正常的文档流来进行的。具体实现,可以使用微信小程序的单位,以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念:定位、浮动、外边距操纵 我们其他的布局实现方式,都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...

    garfileo 评论0 收藏0
  • CSS 常用布局在小程序中的应用

    摘要:常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式,都是基于正常的文档流来进行的。具体实现,可以使用微信小程序的单位,以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念:定位、浮动、外边距操纵 我们其他的布局实现方式,都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...

    CoderDock 评论0 收藏0
  • CSS常用布局简洁解决方案

    摘要:与常人的直觉不符的是,实际上表示视口宽度的,而不是。与类似,表示视口高度的。存在问题它只适用于在视口中居中的场景基于的解决方案伸缩盒是专门针对这类需求所设计的。 相关基础知识 1.内部与外部尺寸模型:(w3c草案)亲测google可支持。(http://w3.org/TR/css3-sizing ) 基于原有CSS尺寸特性,可以使CSS更容易描述内容自适应以及适应固定上下文的盒模型: ...

    2450184176 评论0 收藏0
  • JS / CSS 常用实战代码片段

    摘要:常用模式片段之摘要第一次看到这个字眼是在中,即。之后也见到一些别人的代码里有,它和页面的有什么关系,以及和有何渊源。以前都见过这些词,但都似懂非懂,今天查了些资料收集了些代码,做个完整的理解。 CSS篇 常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要:position 拉伸性质...

    sutaking 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<