【前端】把握这些css原则制作HTML页面超快!提速10倍!

  1. 行原则:根据设计稿,一行一个div,每个div用class=".row .row-1"来控制,
  2. 第一行<div class="row row-1">第二行<div class="row row-2">
  3. 列原则:用span分割列,用class="col-1"来控制
  4. 行里加行,<div class="row row-1-1">
  5. 最小class原则,不要用太多父级class
  6. 无需复用的dom则用css的节点去控制,再不济就用ID
  7. 让最里面的元素去撑大父容器的宽高,而不是反过来

talk is cheap show me the code
单行:

<div class="row row-1"></div>

单行多列:

<div class="row row-1">
    <span class="col-1-1"></span>
    <span class="col-1-2"></span>
    <span class="col-1-3"></span>
</div>

多行:

<div class="row row-1">
    <div class="row-1-1"></div>
    <div class="row-1-2"></div>
    <div class="row-1-3"></div>
</div>

多行多列:

<div class="row row-1">
    <div class="row-1-1">
        <span class="col-1-1-1"></span>
        <span class="col-1-1-2"></span>
        <span class="col-1-1-3"></span>
    </div>
    <div class="row-1-2">
        <span class="col-1-2-1"></span>
        <span class="col-1-2-2"></span>
        <span class="col-1-2-3"></span>
    </div>
    <div class="row-1-3">
        <span class="col-1-3-1"></span>
        <span class="col-1-3-2"></span>
        <span class="col-1-3-3"></span>
    </div>
</div>

单行多列 + 单列多行

<div class="row row-1">
    <span class="col-1-1">
        <div class="row-1-1-1"></div>
        <div class="row-1-1-2"></div>
        <div class="row-1-1-3"></div>
    </span>
    <span class="col-1-2">  <div class="row-1-2-1"></div>
        <div class="row-1-2-2"></div>
        <div class="row-1-2-3"></div>
    </span>
    <span class="col-1-3">
        <div class="row-1-3-1"></div>
        <div class="row-1-3-2"></div>
        <div class="row-1-3-3"></div>
    </span>
</div>

单行多列 + 单列多行 + 单行多列

<div class="row row-1">
    <span class="col-1-1">
        <div class="row-1-1-1">
            <span class="col-1-1-1-1"></span>
            <span class="col-1-1-1-2"></span>
            <span class="col-1-1-1-3"></span>
        </div>
        <div class="row-1-1-2"></div>
        <div class="row-1-1-3"></div>
    </span>
    <span class="col-1-2">
        <div class="row-1-2-1"></div>
        <div class="row-1-2-2"></div>
        <div class="row-1-2-3"></div>
    </span>
    <span class="col-1-3">
        <div class="row-1-3-1"></div>
        <div class="row-1-3-2"></div>
        <div class="row-1-3-3"></div>
    </span>
</div>

如果是用Flex布局的话,上面的行要用别的class来控制,改成:

/*水平排列 默认*/
.row {
    display:flex;
    display: -webkit-flex;
    flex-wrap: nowrap;
    flex-direction:row;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
}

/*垂直排列*/
.row_col {
    display:flex;
    display: -webkit-flex;
    flex-wrap: nowrap;
    flex-direction:column;*/
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
}

/*子元素*/
.row>span,
.row_col>span{
    order:0;
    flex-grow:1;
    flex-shrink:1;
    flex-basis:auto;
    align-self:auto;
}

/*通栏*/
.row_full{
    position: absolute;
    width: 100%;
    left: 0;
}

flex单行多列:

<div class="row_col row-1">
    <div class="row-1-1"></div>
    <div class="row-1-2"></div>
    <div class="row-1-3"></div>
</div>

最后奉上两大杀招!!

如何在chrome浏览器边看边改css并且ctrl+s 一键保存!
首先把dom结构都写好,然后打开chrome,找到对应的css文件,然后另存一下(这一步是为了跟本地文件关联在一起,目的是为了同步修改本地文件),然后你就可以随便改了,改完了记得ctrl+s保存一下就好,再f5刷新一下看看,刚才写的样式全都在哦!!

一张Html+CSS学习神图

我来吐槽

*

*

仅有 1 条评论