深入学习CSS布局系列（一）布局常用属性

头像
zhangwang
    阅读 5 分钟
    4

    @(CSS技巧)[CSS, 布局]

    深入学习CSS布局系列（一）布局常用属性

    一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了，不论学什么，基础太重要了，因此决定花几天时间深入的学习下布局涉及到的方方面面，本系列文章预计从布局常用属性的解析，布局所涉及到的重要概念的解析以及常见布局样式的实现及解析三部分来完成，以期在自己完成三部分的学习之后能在大脑里有一个完整的布局体系。

    布局涉及到的属性

    display

    常用属性值：

    • none:此元素不会被显示,它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden; 还会保留。

    • block:此元素将显示为块级元素，此元素前后会带有换行符。

    • inline:默认。此元素会被显示为内联元素，元素前后没有换行符。

    • inline-block: 行内块元素。

    • list-item: 此元素会作为列表显示。

    • inherit:规定应该从父元素继承 display 属性的值。

    常见元素默认属性值

    block:<div>, <p>, <h1> ~ <h6>, <ul>, <form>
    inline:<span>, <a>, <label>, <cite>, <em>
    inline-block:<input>, <textarea>, <select>, <button>

    block，inline，以及inline-block的对比
    display 默认宽度 可设置宽度 起始位置
    block 父元素宽度 是 换行
    inline 内容宽度 否 换行
    inline-block 内容宽度 是 换行

    margin

    常用属性值：

    • auto:浏览器计算外边距。

    • length:规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。

    • %:规定基于父元素的宽度的百分比的外边距。

    • inherit: 规定应该从父元素继承外边距。

    常见用法（持续更新）

    1. 元素居中

    #main {
//使用max-width防止当浏览器宽度小于600px时出现水平滚动条
  max-width: 600px;
  margin: 0 auto; 
}

    position

    position 属性规定元素的定位类型。

    取值

    position: static | relative | absolute | fixed

    • position:relative:

      • 相对定位的元素仍在文档流之中，并按照文档流中的顺序进行排列；

      • 参照物为元素本身的位置；

      • "left:20" 会向元素的 LEFT 位置添加 20 像素;

      • 最常用的用途为改变元素层级和设置为绝对定位的参照物；

    • position:absolute

      • 建立以包含块为基准的定位，其随即拥有偏移属性和 z-index 属性;

      • 默认宽度为内容宽度;

      • 脱离文档流;

      • 参照物为第一个定位祖先或根元素（<html> 元素）;

      • 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    • position:fixed

      • 默认宽度为内容宽度

      • 脱离文档流

      • 参照物为视窗

      • 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定.

    注意：

    1. 任何元素都可以定位，绝对或固定定位的元素会生成一个块级框，而不论该元素本身是什么类型（相当于自动设置display:block）；

    z-index（配合定位使用）

    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

    取值

    • auto 默认。堆叠顺序与父元素相等；

    • number 设置元素的堆叠顺序；

    • inherit 规定应该从父元素继承 z-index 属性的值（ie不支持此属性）。

    注意：

    1. z-index 仅能在定位元素上奏效（例如 position:absolute;）！

    2. 父类容器的 z-index 优于子类 z-index 如下图；
      z-index 栈

    float

    float 属性定义元素在哪个方向浮动。浮动仅仅影响文档流中下一个紧邻的元素。

    常见取值

    • left 元素向左浮动。

    • right 元素向右浮动。

    • none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

    • inherit 规定应该从父元素继承 float 属性的值。

    详细解读

    • 默认宽度为内容宽度

    • 脱离文档流（会被父元素边界阻挡与position脱离文档流的方式不同）

    • 元素对象设置了float属性之后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。

    注意：

    1. 任何元素都可以设置为浮动，且设置浮动后自动转化为块级框；

    2. float 元素是半脱离文档流的，对元素是脱离文档流，但对于内容则是在文档流之中的（既元素重叠但内容不重叠）。示例

    3. float 元素在同一文档流中，当同时进行 float 时它们会按照文档流中的顺序排列。(当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度（浮动“塌陷”）)
      float

    clear（配合float使用）

    clear 属性规定元素的哪一侧不允许其他浮动元素。
    说明：
    clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

    常见取值(个人觉得用以下术语更准确，如果有误请指出)

    • left 不允许出现左浮动元素

    • right 不允许出现右浮动元素

    • both 左右浮动都不允许出现。

    • none 默认值。允许浮动元素出现在两侧。

    • inherit 规定应该从父元素继承 clear 属性的值。

    使用方法：

    优先级自上而下

    1. clearfix 于父元素；

    2. 浮动后续空白元素 .emptyDiv {clear: both}；

    3. 为受到影响的元素设置 width: 100% overflow: hidden 也可；

    4. 块级元素可以使用 <br>但是 不建议使用，影响 HTML 结构；

    /* clearfix */
.clearfix:after{
    content: ".";
    visibility: hidden;
    display: block;/*设置display：block是为了之后能设置高度*/
    height: 0;
    clear: both;
}
.clearfix{zoom:1;}/*兼容ie*/

    注意!：
    以上取值都是后面的元素对前面的元素有效；

    flex

    弹性布局可用于多行自适应，多列自适应，间距自适应和任意对齐。

    flex相关基本概念

    Flex容器（flex container）：采用flex布局的元素；
    Flex项目（flex item）：flex容器的所有子元素；
    其它一些概念见下图：
    flex相关概念

    容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

    常用相关属性
    容器的属性（6个）

    flex-direction: row | row-reverse | column | column-reverse
    默认为row,属性决定主轴的方向（即项目的排列方向）:
    flex-direction

    flex-wrap:nowrap | wrap | wrap-reverse;
    flex-wrap属性定义，如果一条轴线排不下，如何换行。
    flex-wrap

    flex-flow:<flex-direction> || <flex-wrap>;
    是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

    justify-content: flex-start | flex-end | center | space-between | space-around;
    定义了项目在主轴上的对齐方式。
    justify-content
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

    align-items:flex-start | flex-end | center | baseline | stretch;
    定义项目在交叉轴上如何对齐
    align-items
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

    align-content：flex-start | flex-end | center | space-between | space-around | stretch;
    align-content

    项目的属性（6个）

    order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

    .item {
  order: <integer>;
}

    order

    flex-grow:属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
    flex-grow

    flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    flex-shrink

    flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

    flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
    该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
    align-self:属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
    flex-align-self

    参考文献

    CSS display 属性
    CSS margin 属性
    学习CSS布局
    前端开发笔记本
    CSS positon属性
    CSS z-index属性
    CSS float 属性
    CSS浮动属性Float详解
    Flex 布局教程：语法篇

    css布局
    zhangwang
    7.9k 声望1.8k 粉丝

    前端，摄影，阅读，好奇

    « 上一篇
    最实用的Git命令
    下一篇 »
    关于网页渲染，前端们应该知道的一些事情

    引用和评论

    推荐阅读
    头像
    typescript - 一种思维方式

    zhangwang赞 34阅读 9.5k评论 5

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新