当前位置：网站首页>水平布局，垂直布局，阴影和圆角

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

2022-07-21 14:26:00 【Dummerd】

目录

一.水平布局

二.垂直布局

三.阴影和圆角

一.水平布局

  水平方向

  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>

原网站

版权声明
本文为[Dummerd]所创，转载请带上原文链接，感谢
https://blog.csdn.net/dummerd/article/details/125489673

边栏推荐

猜你喜欢

随机推荐