html css重点

最新推荐文章于 2022-08-13 10:55:35 发布

来了老弟

最新推荐文章于 2022-08-13 10:55:35 发布

阅读量132

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_43737071/article/details/89532990

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

两栏布局
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>

效果如下：
在这里插入图片描述

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");
}

来了老弟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html css重点

文章目录两栏布局margin塌陷margin合并float理解清除浮动的方法两栏布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>两栏布局</title></head><style> ...
复制链接

扫一扫