CSS 布局方式

LancerComet 发布于2019-08-29 15:27 / 1711人阅读

摘要：中间左栏右栏清除浮动如下图缺点结构不正确多了一层标签布局左栏中间右栏如下图缺点兼容性问题参考文章

W3C标准

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

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

表现标准语言（CSS）

行为标准语言（DOM和ECMAScript）

CSS中的定位机制

在CSS中存在三种定位机制：

标准文档流（Normal flow）

浮动（Floats）

绝对定位（Absolute positioning）

标准文档流特点

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

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

块级元素特点

从左到右撑满页面，独占一行

触碰到页面边缘时，会自动换行

行级元素特点

能在同一行内显示

不会改变HTML文档结构

注意： 块级元素和行级元素都是盒子模型

盒子模型

盒子模型—网页布局的基石,由4部分组成

边框（border）

外边距（margin）

内边距（padding）

盒子中的内容（content）

前三者是盒子模型的特性，最后一点可以理解为盒子模型的功能，可用于盛放网页内容，包括文本、图片、音频、视频等

盒子模型的三维立体结构

第一层：border 第二层：内容+padding 第三层：背景图片第四层：背景颜色第五层：外边距

盒子模型尺寸

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

注意：

标准盒子模型：宽度= 内容的宽度（content）+ border+ padding+ margin

低版本IE盒子模型：宽度= 内容的宽度（content+ border+ padding）+ margin

区别在于内容的宽度是否包含border和padding，可通过设置box-sizing:border-box(内容宽度包含border和padding值)来实现统一

table 实现布局

最初网页出现时使用，DIV布局出现后废弃

两栏布局

两栏布局：一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。

实现方式

float+margin

  
    定宽
    自适应
  

  .left{
    width: 200px;
    height: 600px;
    background: red;
    float: left;
    display: table;
    text-align: center;
    line-height: 600px;
    color: #fff;
  }

  .right{
    margin-left: 210px;
    height: 600px;
    background: yellow;
    text-align: center;
    line-height: 600px;
  }

如下图：

其他的方法：还可以使用position的absolute，可以使用同样的效果

三栏布局

特点：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。

float 实现三栏布局

使用左右两栏使用float属性，中间栏使用margin属性进行撑开，注意的是html的结构

左栏
右栏
中间栏

.left{
  width: 200px;height: 300px; background: yellow; float: left;    
}
.right{
  width: 150px; height: 300px; background: green; float: right;
}
.middle{
  height: 300px; background: red; margin-left: 220px; margin-right: 160px;
}

如下图：

缺点：

当宽度小于左右两边宽度之和时，右侧栏会被挤下去

html的结构不正确

position 定位实现

左右两栏使用position进行定位，中间栏使用margin进行定位

左栏
中间栏
右栏

.left{
    background: yellow;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
.middle{
    height: 300px;
    margin: 0 220px;
    background: red;
}
.right{
    height: 300px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background: green;
}

如下图：

缺点：当父元素有内外边距时，会导致中间栏的位置出现偏差

float和BFC配合圣杯布局

将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。


    
        中间
    
    
        左栏
    
    
        右栏
    


.wrapper{
    overflow: hidden;  //清除浮动
}
.middle{
    width: 100%;
    float: left;
}
.middle .main{
    margin: 0 220px;
    background: red;
}
.left{
    width: 200px;
    height: 300px;
    float: left;
    background: green;
    margin-left: -100%;
}
.right{
    width: 200px;
    height: 300px;
    float: left;
    background: yellow;
    margin-left: -200px;
}

如下图：

缺点：

结构不正确

多了一层标签

flex 布局


    左栏
    中间
    右栏


.wrapper{
    display: flex;
}
.left{
    width: 200px;
    height: 300px;
    background: green;
}
.middle{
    width: 100%;
    background: red;
    marign: 0 20px;
}
.right{
    width: 200px;
    height: 3000px;
    background: yellow;
}

如下图：

缺点： 兼容性问题

参考文章： https://segmentfault.com/a/11...

混合云服务器托管 css布局 css布局教程学习css布局 android布局方式

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

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

CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
翻译 | CSS网格（CSS Grid）布局入门

摘要：浏览器兼容性网格布局从开始收到支持，微软在会更新对网格布局的支持。微软的浏览器和有一种比较旧的实现，所以有不少限制，我们会简单介绍新的实现方式和老的实现方式之间的区别，这样你能知道如何规避他们。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 译者：华翔校对者：珂珂、干干翻译 | CSS网格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0