美文网首页Web 前端开发
几个常用的CSS布局小技巧

几个常用的CSS布局小技巧

作者: Mr_LvHeng | 来源:发表于2019-04-28 21:12 被阅读0次
  1. 左右布局

    以div为例,左右布局就是给左边的子元素一个float: left,给右边的子元素一个float: right,然后给他们的父盒子一个清除浮动的class,class样式模板可以参考:

    .clearfix::after {
        content: '';
        display: block;
        clear: both;
    }
    
  2. 左中右布局

    还是以div为例,给三个子元素一个float: left,然后给所有元素一个margin-left: 自定义空隙,最后把第一个子元素的margin-left: 0;即可。假如所有字元素都是一种类型,可以用伪类选择器选中第一个:nth-child(1)

  3. 水平居中

    • 如果要居中的内容是块级元素,可以给元素的margin-left: automargin-right: auto

      注:两个属性要同时写

    • 如果要居中的内容是内联元素,可以给元素的父元素一个text-align: center即可。

  4. 垂直居中

    给当前元素上下一个相同的margin或padding即可,如:margin: 10px;padding: 10px 0

  5. 拓展小技巧:

    在使用左右布局时,如果有多行内容(如多行两列的div)。可以先给每个div一个左浮动(float: left),注意不要忘了给父元素添加清除浮动。然后再用伪类选择器选择偶数的子元素(:nth-child(even)even即选择偶数的意思)。

相关文章

网友评论

    本文标题:几个常用的CSS布局小技巧

    本文链接:https://www.haomeiwen.com/subject/zocsnqtx.html