大一上考核.2总结

最新推荐文章于 2024-07-20 15:40:46 发布

小芒QVQ

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量471

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_61662856/article/details/121799900

版权

高度坍塌

在制作页面过程中经常可以见到高度坍塌这个现象，形成原因是常规流盒子在计算高度时会忽略脱离了常规流的元素，比如说是浮动。
解决方式：
方法一：

<style>
        .in{
            width: 300px;
            background-color: yellow;
        }
        .in .haha{
            height: 70px;
            float: left;
            background-color: royalblue;
            border-style: 100px dashed #000;
            color: white;
            margin: 20px;

        }
        .after{
            clear: both;

        }
    </style>
</head>
<body>
    <div class="in">
        <div class="haha">5</div>
        <div class="haha">4</div>
        <div class="haha">2</div>
        <div class="haha">5</div>
        <div class="haha">8</div>
        <div class="haha">9</div>  
        <div class="after"></div>  
    </div>   

</body>

方法二（常用）：

<style>
        .in{
            width: 300px;
            background-color: yellow;
        }
        .in .haha{
            height: 70px;
            float: left;
            background-color: royalblue;
            border-style: 100px dashed #000;
            color: white;
            margin: 20px;

        }
        .in::after{
            content:"";
            display:block;
            clear: both;

        }
    </style>
</head>
<body>
    <div class="in">
        <div class="haha">5</div>
        <div class="haha">4</div>
        <div class="haha">2</div>
        <div class="haha">5</div>
        <div class="haha">8</div>
        <div class="haha">9</div>  
        <div class="after"></div>  
    </div>   

</body>

关于颜色

-color

设置的是字体颜色

-background-color

设置的是填充盒的颜色

关于大小

-内容盒宽高可以设置为0

常用于写三角形和梯形

-img元素的白边问题

–可以使用margin设置

–img默认是按基线(baseline)对齐的，要去掉空格可以使用vertical-align: bottom或将img标签变为块级元素。

权重

-权重的计算：

1.千位：如果是内联样式记作1，否则记作0
2.百位：选择器中所有id选择器的个数
3.十位：等于选择器中所有类选择器、属性选择器、伪类选择器的个数
4.个位：元素选择器个数

-爱恨法则：

link>visited>hover>active

-源次序越靠后权重越大

小芒QVQ

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大一上考核.2总结

高度坍塌在制作页面过程中经常可以见到高度坍塌这个现象，形成原因是常规流盒子在计算高度时会忽略脱离了常规流的元素，比如说是浮动。解决方式：方法一：<style> .in{ width: 300px; background-color: yellow; } .in .haha{ height: 70px; float: left;
复制链接

扫一扫