盒子模型学习2

最新推荐文章于 2024-08-05 09:02:20 发布

法法，我的法法

最新推荐文章于 2024-08-05 09:02:20 发布

阅读量57

点赞数

文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/qq_47849733/article/details/128026771

版权

垂直布局

使用overflow属性设置父元素如何处理溢出的子元素

可选值：

visible 默认值文本正常显示

hidden 裁剪掉多余的内容

scroll 生成双向的滚动条，可以通过滚动条查看完整的内容

auto 根据实际的内容出现滚动条

overflow-x 对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成

overflow-y 对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成

 <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /* overflow:auto; */
        overflow-x: hidden;
      }
      p{
        width: 300px;
      }

块元素默认情况下，宽度是父元素内容区的100%，高度是被内容撑开

在垂直布局中，一般情况下，我们是不设置高度的，让元素被内容撑开

外边距的折叠

垂直外边距的重叠

-兄弟元素

如果两个值都是正值，谁大听谁的

如果两个值是负值，谁小听谁的（绝对值谁大听谁的）

如果是一正一负，那最终的值，两者相加

-父子元素

如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,

导致父元素的位置发生变化，会影响到父元素下面的布局，

所以这个问题必须要解决

style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 50px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: -30px;

      }
      .outer {
        width: 200px;
        height: 200px;
        background-color: yellow;
        /* margin-top: 50px; */
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin-top: 100px;
      }
    </style>

实例

<!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>
    <link rel="stylesheet" href="css/聚美优品.css">
</head>
<body>
    <div class="box1">
        大家都喜欢买的美容品
    </div>
    <div class="box2">
        <span class="box3"> 1</span><a href="#">雅诗兰黛即时修护眼部精华霜15ml</a> 

    </div>
    <div class="box2">
        <span class="box3">2</span> <a href="#">伊丽莎白雅顿显效复合活肤霜 75ml</a> 
    </div>
    <div class="box2"><span class="box3">3</span> <a href="#">OLAY玉兰油多效修护霜 50g</a> </div>
    <div class="box2">
        <span class="box3">4</span><a href="#">巨型一号丝瓜水320ML</a> 
        
    </div>
    <div class="box2">
        <span class="box3">5</span> <a href="#">倩碧保湿洁肤水2号 200ml</a> 
         
    </div>
    <div class="box2">
        <span class="box3">6</span>   <a href="#">比度克细肤淡印霜 30g</a> 
         
    </div>
    <div class="box2">
        <span class="box3">7</span>  <a href="#">兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a> 
         
    </div>
    <div class="box2">
        <span class="box3">8</span>   <a href="#">SK-II护肤精华露 215ml</a> 
         
    </div>
    <div class="box2"><span class="box3">9</span> <a href="#">欧莱雅青春密码活颜精华肌底液</a> 

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

.box1{
    width: 300px;
    background-color: rgb(233,24,90);
    padding: 10px;
}
.box2{
    width: 300px;
    padding: 10px;
     
    
    border-bottom-style: dashed;
}
a{
    text-decoration: none;
    color: rgb(102,102,102);
}
a:hover{
    color: red;
}
.box3{
    display:inline-block;
    width: 20px;
    height: 20px;
    
    background-color: black;
    border-radius: 100%;
    color: white;
    border: 1px solid transparent;  
}
.box3:hover{background-color: red;}

法法，我的法法

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型学习2

overflow-x 对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成。overflow-y 对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成。在垂直布局中，一般情况下，我们是不设置高度的，让元素被内容撑开。如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,块元素默认情况下，宽度是父元素内容区的100%，高度是被内容撑开。visible 默认值文本正常显示。导致父元素的位置发生变化，会影响到父元素下面的布局，如果两个值是负值，谁小听谁的（绝对值谁大听谁的）
复制链接

扫一扫