水平布局，垂直布局，阴影和圆角

最新推荐文章于 2023-02-03 21:16:47 发布

Dummerd

最新推荐文章于 2023-02-03 21:16:47 发布

阅读量129

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/dummerd/article/details/125489673

版权

本文介绍了前端布局中的水平布局原理，详细讲解了浏览器如何处理过度约束的情况，包括如何调整margin和width。接着探讨了垂直布局，并通过实例展示了如何使用overflow属性处理内容溢出。最后，讨论了CSS中的阴影和圆角效果，解释了box-shadow属性的用法以及如何创建圆角效果。这些技巧对于前端开发者优化页面布局和提升用户体验至关重要。

摘要由CSDN通过智能技术生成

水平方向

margin-left border-left padding-left width padding-right border-right margin-right

浏览器规定水平方向的七个值相加必须要等于父元素内容区的宽度

0 5px 50px 100px 50px 5px 0 ==500 ?

像以上这种，如果不等于的话，浏览器它就会自己去调整这7个值，让我们的等式成立，这个过程叫过度约束

浏览器如何调整的？

1、如果7个值中没有设置auto，那浏览器就会调整margin-right

0 5px 50px 100px 50px 5px 290px ==500

2、7个值中有3个值可以设置auto margin-left width margin-right

1个auto,其他两个值为固定值

浏览器就会调整这个auto

2个auto，其他1个值为固定值

margin-left width 调整width

width margin-right 调整width

margin-left margin-right 同时margin-left margin-right，各占一半

3个auto

margin-left width margin-right 调整width

二.垂直布局

<!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>
      .box1 {
        width: 400px;
        height: 400px;
        border: 3px solid red;
      }
      /* 块元素 宽度默认是父元素的100%，高度是被内容撑开的 */
      .box2 {
        width: 200px;
        height: 200px;
        background-color: palegreen;
        overflow: auto;
      }
      /* overflow属性可以设置溢处的内容
          可选值
            visible  默认值  内容正常显示
            hidden  裁剪多余的内容
            scroll   出现双侧滚动条
      */
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        是以逝投到才三位，想恨学，答俭韩曰子失传谋他一连是三中国我，姑玉对天气了不人是，得李被死欲白死谓俭他以德艳都，娟名死是妄始天仑同如绛明笔后其亓兮牛，高归然秦土是介后之一葬历你，或没哥仄死，通嗣命畴而和洪心说尤禀回失本等，满后俭要冷了，见李大往仆光得则我己。
        也牙仆当都落禀，安水法圣二，怒锐自是瞠。 也牙仆当都落禀，安水法圣二，怒锐自是瞠。
      </div>
    </div>
  </body>
</html>

三.阴影和圆角

box-shadow

用来设置元素的阴影效果，不会影响到页面布局

第一个值：水平偏移量正->左负->右

第二个值：垂直偏移量正->下负->上

第三个值：模糊半径默认值0px

第四个值：颜色默认值是盒子的背景色

<!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>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #f60;
        margin: 50px auto;
        box-shadow:2px 2px 15px rgba(0, 0, 0, 0.5);
        /* 知识点1:
          box-shadow 
             用来设置元素的阴影效果，不会影响到页面布局 
                第一个值：水平偏移量  正->左  负->右
                第二个值：垂直偏移量  正->下  负->上
                第三个值：模糊半径  默认值0px
                第四个值：颜色     默认值是盒子的背景色
        */
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
        /*    border-radius: ;  设置圆角效果 
        border-radius:50%;设置圆形
        */
      }
    </style>
  </head>
  <body>
    <!-- 阴影例子 -->
    <div class="box1"></div>
    <!-- 圆角例子 -->
    <div class="box2"></div>
    
  </body>
</html>