html css重点 - 爱码网

文章目录

两栏布局
margin塌陷
margin合并
float理解
清除浮动的方法
文字溢出
加载不出css时兼容写法

两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局</title>
</head>
<style>
    /* 版心 */
    .layoutCenter {
        width: 1200px;

    }

nav {
    height: 400px;
    background-color: skyblue;
    position: relative;
    margin: 0 auto;
}
nav .left {
    width: 200px;
    height: 100px;
    background-color: green;
    position: absolute;
    left: 0;
    opacity: 0.5;
}
nav .right {
    width: 100%;
    height: 100px;
    padding-left: 200px;
    box-sizing: border-box;
    background-color: pink;
}
</style>
<body>
    <nav class="layoutCenter">
        <div class="left">

        </div>
        <div class="right">

        </div>
    </nav>
    
</body>
</html>

效果如下：
html css重点

margin塌陷

使用border
产生bfc:
overflow:hidden display:inline-block position:absolute float:left/right

margin合并

产生bfc
利用数学计算

float理解

设置float的盒子产生浮动流，普通div盒子看不见，文本及文本类（inline)和bfc盒子看得见

清除浮动的方法

.clearfix::after {
    content: '';
    
    display: block;
    clear: both; //作用与块级元素
}
.clearfix {
    *zoom: 1;
}

文字溢出

 white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

加载不出css时兼容写法

a {
    float: left;
    display: block;
    width: 80px;
    height: 0px;
    padding-top: 80px;
    text-indent: -999px;
    overflow: hidden;
    background-image: url("../JQuery/image/1c7.jpg");
}