常见问题-css&HTML-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61662856/article/details/124652272

高度坍塌

现象：浮动盒子跑到包含块外面

形成原因：常规流盒子无视浮动盒子

解决方法（1）

直接加一个标签解决浮动，比较麻烦，不常用

<style>
        .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>

解决方法（2）

使用伪元素选择器，方便常用

<style>
        .in::after{
            content:"";
            display:block;
            clear: both;

        }
    </style>
</head>
<body>
    <div class="in">
        <div class="haha">5</div>
    </div>   

</body>

权重的计算

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

爱恨法则：link>visited>hover>active

源次序越靠后权重越大

空白处理

控制单行文本：

{
white-space:nowrap;//空白位置不换行
overflow:hidden;//溢出隐藏
text-overflow:ellipsis;//溢出的变成...
}

三栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            overflow: hidden;
            
        }
        .container{
            position: relative;
            overflow: hidden;
            height: 100vh;
        }
        .container .top{
            width: 100%;
            height: 100px;
            background-color: blue;
            top:0;
            position: absolute;
        }
        .container .sub{
            width: 100%;
            height: 100px;
            bottom: 0;
            background-color: blue;
            position: absolute;

        }
        .container .middle{
            margin-top: 100px;
            height: 100%;
            background-color: burlywood;
            
        }
        
        

    </style>
</head>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="middle">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quam quae sed explicabo, vitae libero illo nulla dolores! Ullam, dolorum. Hic expedita earum quisquam? Doloribus quo deserunt pariatur hic ut?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et numquam nisi facilis, in asperiores sint quibusdam tempore obcaecati repellendus, doloremque, aperiam aspernatur velit. Tempora accusantium vitae quaerat illum quia labore aut perferendis ad ducimus obcaecati similique laboriosam, consectetur est modi sapiente vero officia repellat dolorem quos voluptas. Quaerat exercitationem, natus qui corporis, dicta explicabo odio commodi quidem id quasi doloremque sunt sed laborum aperiam ipsam esse dolores animi pariatur, ad expedita saepe iure libero assumenda. Nobis nulla a sit aliquid, voluptatum vero commodi repudiandae aut dolore doloremque laboriosam provident tenetur unde distinctio reprehenderit illum voluptatibus dolorem iste suscipit fugit eveniet reiciendis! Quidem eveniet voluptatem ex quaerat rerum, perferendis atque nihil nisi consequatur. Mollitia natus quo eum earum, iste dolorum perspiciatis ut excepturi recusandae soluta cumque nemo voluptatibus atque quis id pariatur eos similique. Optio inventore et officia. Amet, error blanditiis omnis officia sunt, laborum veniam tenetur mollitia temporibus placeat itaque possimus incidunt, voluptates enim nulla repudiandae laboriosam quas similique doloremque. Impedit unde, quidem, delectus neque dolore perspiciatis exercitationem veritatis reprehenderit, perferendis adipisci quasi sapiente qui. Magni, dignissimos ea ratione vero aut accusamus tempore ab odit doloribus illum perspiciatis reiciendis explicabo asperiores in illo sint dolore, similique sapiente modi cumque eligendi corrupti. Perferendis, sapiente eveniet iusto libero eaque ducimus saepe enim? Accusantium facere magni sapiente tempora, voluptates quas consequatur fugit! Laborum rem itaque error possimus libero obcaecati ad assumenda officia expedita accusantium eligendi fuga nisi temporibus atque, voluptatum eaque praesentium magnam omnis animi impedit deleniti! Alias ad fuga culpa itaque asperiores, odio fugit molestiae tempora, architecto id nesciunt minus natus magnam in vero nam necessitatibus rem. Obcaecati, incidunt! Ut possimus praesentium quas obcaecati repudiandae iusto tempora veritatis molestiae sunt recusandae dicta, voluptatum nemo earum fugiat magnam. Dolorum, hic eos! Voluptatum quis nesciunt omnis aliquid vel consequuntur, possimus perspiciatis reprehenderit magni iusto repellat unde beatae, pariatur nemo aut consequatur officia voluptatibus ducimus quasi. Tempora beatae molestiae sit nemo porro facere rem corporis alias sunt, quidem pariatur, nesciunt excepturi numquam, quas qui velit a sapiente voluptatibus saepe! Mollitia animi sunt consectetur asperiores vitae nesciunt dolor ipsum reprehenderit tenetur harum? Maiores vel voluptates odio et ad ipsam dolore eligendi nesciunt enim cum iure beatae, eius laboriosam quam! Sed numquam incidunt eos voluptas! Qui amet repellat nobis dolorem, saepe architecto sequi quas quia consequatur quo. Iure dolor, corporis officiis totam distinctio expedita asperiores voluptatibus magni error. Officia deleniti beatae inventore atque tempora fugit, earum aspernatur fuga molestias, minima vel debitis! Ullam possimus magni quis ratione, porro, perspiciatis magnam cupiditate quisquam aliquam minima explicabo dicta. Odit, et? Ex ipsa rerum commodi obcaecati facere vero et, maxime consequuntur voluptate suscipit expedita. Quidem doloremque corrupti deleniti veritatis blanditiis omnis quasi id dolorem odit asperiores, minima perferendis! Minus nam earum totam amet! Impedit cum enim magnam reprehenderit deleniti eveniet modi laborum doloribus, architecto provident? Ipsa dolore voluptatibus numquam quaerat eveniet quidem, inventore cumque ratione ullam architecto nobis eius minus rerum non hic ea aliquam error aspernatur blanditiis iusto doloremque cum temporibus porro! Cumque voluptatum nam est reiciendis fugit odit eaque ratione sed quasi debitis dolorem, velit, placeat necessitatibus suscipit exercitationem? Omnis sequi recusandae voluptas iusto, minima labore nostrum obcaecati suscipit quasi iste aliquam ipsum voluptatibus animi veniam sit facilis voluptatum amet, unde dolorum exercitationem ratione hic. Expedita, iusto. Porro eius nihil vero accusamus similique sunt quia eos ipsa provident. Recusandae odit odio fugiat consequatur. Quibusdam impedit consectetur dicta itaque veritatis perspiciatis, vitae, dolor aliquam quod, recusandae optio. Obcaecati tenetur sequi beatae consequatur doloremque dolorum aliquid vitae eos modi ad quo facilis, accusantium magni, nulla odit asperiores quibusdam totam odio fugit. Quidem officiis adipisci alias, nobis modi deserunt commodi praesentium?</div>
             <div class="sub"></div>
    </div>
</body>
</html>