rocktanga的博客

引言：布局是页面中的一个很重要的东西，这篇文章主要讨论与浮动有关的左中右三栏布局。一、基础的左中右三栏布局这个布局呢，就是由三个部分组成：左右放在前面，而主内容放在后面。一个左浮动，一个右浮动，都设置固定宽度，主内容区宽度自适应，只需要设置margin和前面两个块隔开就好。如下：.wrap { width: 80%; margin: 0 auto;}.left { float: left; width: 200px; height: 200px; background

网格布局（Grid）一、网格布局（Grid）是什么网格布局（Grid）是最强大的 CSS 布局方案;它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。Grid 布局与 Flex 布局：可以把grid布局和flex布局配合起来用相似点：Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置不同点：Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid布局

模块化布局方法：1、先写出整体的框架（即页面的基本骨架）。在设计图上小块小块的看，写出大体的页面有哪些块。然后感觉样式相同的块，就给它们一个相同的class。如： <header></header> <nav></nav> <div class="search"></div> <div class="content"> // 内容区分为两个部分，左边一个主内容区，右边一个侧边栏

flex语法一、Flex布局是什么注：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。如：.box{ display: flex;}行内元素也可以使用 Flex 布局。如：.box{ display: inline-flex;}兼容性：ie9及以下版本不支持flexbox。自动.

一、浮动布局(1)两列布局：一个包含块包含两个部分。一个部分向左浮动，一个部分向右浮动，创建隔离带。或者两个都向左浮动，用外边距或者内边距创建隔离带。实现这个布局非常简单，只需要为每个列设置想要的宽度，然后将次要内容左浮动，主要内容右浮动。包含的两个块命名可以直接简单的命名，如： 命名为primary和secondary而不需要命名为primary-content和secondary-content实例： <div class="content"><.