前端学习第十六天

最新推荐文章于 2024-09-30 15:42:36 发布

Supdna

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量49

点赞数

文章标签：前端学习 html

本文链接：https://blog.csdn.net/qq_41550419/article/details/130198655

版权

第三课：

响应式布局的解决方案：
宽度百分比
flex
rem
@media screen: 针对不通的屏幕尺寸，写多套样式

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>这是我的titile</title>
    <style>
        *{margin: 0;padding: 0;}
        @media screen and (max-width:1000px) {
            html{font-size: 10px;}
        }
        @media screen and (min-width:1200px) {
            html{font-size: 20px;}
        }
        @media screen and (min-width:1200px) {
            html{font-size: 30px;}
        }
        .box{width: 10rem;height: 10rem;margin-left: 5rem;background-color: red;}



    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

BFC:块级格式上下文：
1.内部的块会在垂直方向上一个接一个排列
2.块在垂直方向上的距离由margin决定，并且同一个BFC会产生margin合并
3.每个块做边缘紧贴父级块的左边缘
4.开启了BFC的块不会与float的块重叠，会贴着浮动元素显示
5.BFC是一个独立的容器
6.计算BFC高度的时候，浮动的子集也算在内
如何开启BFC
1.根元素 html
2.浮动
3.定位
4.display:inline-block/flex
5.overflow:hidden/auto

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>这是我的titile</title>
    <style>
        *{margin: 0;padding: 0;}
        .red{width: 200px;height: 100px;background-color: red;float: left;;}
        .blue{width: 200px;height: 200px;background-color: blue;overflow: hidden;}
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>