css3布局的若干笔记总结

深藏阁楼爱情的钟 2022-06-16 10:49 158阅读 0赞

自己在写一些样式的时候，遇到的一些问题，顺手就记下了，多总结。

### 1. css 图片间隙问题： ###

解决方案：

法宝一：定义图片img标签`vertical-align:bottom，vertical-align:middle，vertical-align:top。 img{vertical-align:bottom;}`

法宝二：定义容器里的字体大小为0。

div { font-size:0 }

据说原因：  
图片文字等`inline`元素默认是和父级元素的`baseline`对齐的，而`baseline`又和父级底边有一定距离（这个距离和 font-size，font-family 相关），所以设置 `vertical-align:top/bottom/text-top/text-bottom` 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。

### 2.元素垂直居中的若干种方法： ###

（1）父元素的`dispaly:table`, 然后自身的`display`为`table-cell`，这样的话，自己可以利用垂直属性：`vertical-align:middle`.

(2)采用绝对定位的方式`position：absolute`，当然是对于其父节点。设置自身高度，top为50%，此时的水平线在顶部，通过设置margin-top为一半的高度就行了。

（3）对于固定宽和高的块级元素就比较简单，直接绝对定位，然后设置top,right,bottom,left为0，同时设置margin：auto就行了。

（4）对于容器内的单行文本垂直居中，只需设置其height = line-height就可以了。

（5）还有一种不要轻易尝试，增加个div父元素，float：left,margin-bottom:-一半height，height：50%。自身position：relative,clear:both.

### 3.flex布局 ###

**容器有的属性**：  
可以参考：[https://github.com/xingbofeng/css-grid-flex][https_github.com_xingbofeng_css-grid-flex]

.box{
        display:flex,//行内元素 display:inline-flex
        flex-direction: row （default）| row-reverse | column | column-reverse;//定义排列方向
        flex-wrap: nowrap(default) | wrap | wrap-reverse;//定义是否可以换行
        flex-flow：flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
        justify-content: flex-start | flex-end | center | space-between | space-around;//主轴的对其方式
        // 左对齐，右对齐，居中对齐，两侧对其中间填充，两边对其，四周填充
         align-items: flex-start | flex-end | center | baseline | stretch;//竖轴对其方式，基线对其，拉伸对其
         align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    //一行放不下是，多行轴线的对其方式
    }

**项目有的属性**：

.item {
        order: <integer>;//排列顺序，越小排在越前面，默认为零
        flex-grow: <number>; /* default 0 */ 缩放比例，设置百分比可以显示多行，也很好用
        flex-shrink:<number>; /* default 1 */  缩放比例，如果为零，表示不缩放。
        flex-basis: <length> | auto; /* default auto */ 占据的空间大小，可以是固定大小
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] align-self: auto | flex-start | flex-end | center | baseline | stretch;//纵轴上单个项目的对其方式，默认继承align-items
    
    }

**常用的应用场景**：

（1）水平垂直居中

设置父元素的align-items:center（垂直居中）,justify-content:center（水平居中）就行了。

<div class="box">
        <div class="content">我是子元素，我要垂直居中</div>
    </div>
    
    .box {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 500px;
                width: 500px;
                background-color: green;
            }
            .content {
                height: 200px;
                width: 200px;
                background-color: yellow;
                line-height: 200px;
                text-align: center;
            }

（2）圣杯布局

<div class="box">
        <header>header</header>
        <div class="content">
            <main>main</main>
            <nav>nav</nav>
            <aside>aside</aside>
        </div>
        <footer>footer</footer>
    </div>
    
    .box {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 500px;
        background-color: yellow;
        text-align: center;
        font-size: 30px;
    }
    header, footer {
        flex: 0 0 80px;
        line-height: 80px;
    }
    header {
        background-color: pink;
    }
    footer {
        background-color: gray;
    }
    .content {
        display: flex;
        flex: 1;
    }
    nav {
        order: -1;
        background-color: blue;
        flex: 0 0 80px;
    }
    aside {
        background-color: green;
        flex: 0 0 80px;
    }
    main {
        flex: 1;
    }

（3）响应式布局

这是一道来自百度前端技术学院-task10：Flexbox 布局练习的习题

<div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
    .box div{
        width: 150px;
        padding: 20px;
    }
    .box1 {
        height: 120px;
        background-color: red;
    }
    .box2 {
        height: 100px;
        background-color: blue;
    }
    .box3 {
        height: 40px;
        background-color: pink;
    }
    .box4 {
        height: 200px;
        background-color: yellow;
    }
    @media (min-width: 640px) {
        .box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }
    @media (max-width: 640px) {
        .box {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .box4 {
            order: -1;
        }
    }

其他的一些应用（固定在底部）：[http://azq.space/blog/flex/][http_azq.space_blog_flex]

### 一些常用的清除浮动 ###

如果有一个DIV作为外部容器，内部的元素如果设置了float样式，则外部的容器DIV因为内部元素float脱离文档流，导致不能被撑开。这个时候我们可以用clearfix清除浮动

*  骨灰级的：

.clear{ clear:both;height:0;overflow:hidden;}

上诉办法是在需要清除浮动的后面加个div.clear，最大缺陷就是改变了html结构，虽然只是加个div。

*  推荐的 伪元素

.clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden }

*  很拉轰的浮动闭合办法：

.clearfix{ overflow:auto;_height:1%}

或者

.clearfix{ overflow:auto;_zoom:1}