CSS布局

最新推荐文章于 2025-06-09 22:31:27 发布

转载最新推荐文章于 2025-06-09 22:31:27 发布 · 74 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b420f84f265da0f5d4cb449

一：垂直居中布局

/**
    <div class="parent">
        <div class="container"></div>
    </div>
*/

/*
第一种：已知宽高的居中
*/
.parent{
    position: relative;
    height: 300px;
}
.container{
    position: absolute;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

/**二*/
.parent{
    position: relative;
    height: 300px;
}
.container{
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}


/**
第二种：未知宽高
**/
.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 300px;
    width: 500px;
}
.container{

}

/**二*/
.parent{
    position: relative;
    height: 300px;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/**三*/
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{

}复制代码

二：纯CSS创建一个三角形

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;复制代码

三：被点击访问过的超链接样式不再具有hover和active

解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

四：清除浮动

1.在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}

给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动

3.使用CSS的:after伪元素

.clearFix:after{
    content:'.';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}复制代码

五：让Chrome支持小于12px 的文字

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例复制代码

六：两列等高布局

    <div class="container">
        <div class="content">
            <div class="left">dsds</div>
            <div class="right">dsds</div>
        </div>
    </div>

       .container{
        position: relative;
        overflow: hidden;
        width: 100%;
        background: orange;
        float: left;
       }
       .content{
        position: relative;
        width: 100%;
        float: left;
        right: 40%;
        background: red;
       }
       .left{
        position: relative;
        float: left;
        width: 60%;
        left:40%;
        height:400px;
       }
       .right{
        position: relative;
        float: left;
        width: 40%;
        left: 40%;
        height: 200px;
       }复制代码

七、两列布局

<div class="container">
            <div class="left">dsds</div>
            <div class="right">dsds</div>
    </div>

       .container{
        height: 200px;
       }

       .left{
            float: left;
            width: 200px;
            background: red;
            position: relative;
       }
       .right{
            margin-left: -200px;
            width: 100%;
            float: right;
            background: orange;
       }

       //或者
       .left{
            float: left;
            width: 200px;
            background: red;
       }
       .right{
            margin-left: 200px;
            background: orange;
       }
//三列布局
<div class="container">
            <div class="left">dsds</div>
            <div class="right">dsds</div>
            <div class="center">ds</div>
    </div>
       .left{
            float: left;
            width: 200px;
            background: red;
       }
       .right{
            float: right;
            width: 200px;
            background: orange;
       }
       .center{
            margin-left: 200px;
            margin-right: 200px;
            background: green;
       }复制代码

两列自适应布局整理

BFC背后的神奇原理

float + BFC

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

.left{
    float: left;
    width: 100px;
    margin-right: 20px;    //形成20px的间隔
}
.right{
    overflow: hidden; //通过设置overflow: hidden来触发BFC特性
}复制代码

这个方法主要是应用到BFC的一个特性：

浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样该兄弟元素就会被浮动元素覆盖。
若浮动元素的块状兄弟元素为BFC，则不会占满一整行，而是根据浮动元素的宽度，占据该行剩下的宽度，避免与浮动元素重叠。
浮动元素与其块状BFC兄弟元素之间的margin可以生效，这将继续减少兄弟元素的宽度。

八：offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

九：页面不足以铺满屏幕时，footer在页面底部

方法一：

主要内容放在page内部，page最小高度为100%（注意这里html，body高度也要设为100%）。page有个padding-bottom大小为footer的高度（按需要调整），最重要的一点page的box-sizing:border-box，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，也就是说page的padding-bottom也会设定在min-height：100%内。而footer的margin-top为负的自身高度，把自己拉到page的padding-bottom空白块上，从而达到需求效果。

<div class="page">
    主要页面
</div>
<footer>底部</footer>

html,body{
  height:100%;
  margin:0;
  padding:0;
}
.page{
  min-height:100%;
  box-sizing:border-box;
  padding-bottom:100px;
}
footer{
  margin-top:-100px;
  height:100px;
}复制代码

方法二：

<div class="page-container">
    <div class="page-main">
        主要页面 
    </div>
    <footer>底部</footer>
</div>

body,html{
  height:100%;
  margin:0;
  padding:0;
}
.page-container{
  position:relative;
  min-height:100%;
}
.page-main{
  padding-bottom:100px;
}
footer{
  position:absolute;
  left:0;
  bottom:0;
  height:100px;
}复制代码

方法三：

我们需要调整各个区域占用的页面空间，我们将通过flex 属性来达到这一目的，该属性实际包含了三个属性，分别是：
（1）flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率；
（2）flex-shrink：如果空间不足，元素的收缩比率；
（3）flex-basis：元素的伸缩基准值；

<div id="container">
    <header>HEADER</header>
    <section class="main">MAIN</section>
    <footer>FOOTER</footer>
</div>

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
#container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
header{
    background: #999;
    flex: 0 0 auto;
}
.main{
    background: orange;
    flex: 1 0 auto;
}
footer{
    background: #333;
    flex: 0 0 auto;
    height: 100px;
}

复制代码

转载于:https://juejin.im/post/5b420f84f265da0f5d4cb449