css盒子模型（二）

最新推荐文章于 2023-12-12 18:23:00 发布

〆启

最新推荐文章于 2023-12-12 18:23:00 发布

阅读量134

点赞数 2

本文链接：https://blog.csdn.net/m0_70516782/article/details/125482339

版权

css HTML 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

水平布局

水平方向：（共七个值）

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

<style>
      #box{
        width: 500px;
        height: 300px;
        border: 10px solid red;
      }
      .box1{
        width: auto;
        height: 100px;
        background-color: green;
        border: 5px solid orange;
        padding: 50px;
        margin-left:auto;
        margin-right:auto;
        /* margin: 0px auto; */
      }
    </style>

垂直布局

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

.box2 {

width: 200px

height: 200px;

background-color: palegreen;

overflow: auto;

}

overflow属性可以设置溢处的内容

可选值

visible 默认值内容正常显示

hidden 裁剪多余的内容

scroll 出现双侧滚动条

<!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;
      }

 .box2 {
        width: 200px;
        height: 200px;
        background-color: palegreen;
        overflow: auto;
      }
 </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        赐仍动，投惜护妙极更仄者洪丹竟王遗六一永文，失找要以婵之厅不死却同，韩友畴让甲家起明主了才，书的二分皇尚于反日向今光普，与太杨的对了活我也入欲变山劝等要，或人王不有极支上的不不洪宋娇藏未，救月书大由读感宋骂颜书那见小秦，哥令屯创者拆一当张要同五的意国磊次。
      </div>
    </div>
  </body>
</html>

阴影和圆角

box-shadow：

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

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

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

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

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

border-radius: ; 设置圆角效果

border-radius:50%;设置圆形

<!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);
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
      }

    </style>
  </head>
  <body>
    <!-- 阴影例子 -->
    <div class="box1"></div>
    <!-- 圆角例子 -->
    <div class="box2"></div>
    
  </body>
</html>

〆启

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型（二）

盒子模型的垂直和水平布局：margin-left border-left padding-left width padding-right border-right margin-right 浏览器规定水平方向的七个值相加必须要等于父元素内容区的宽度 0 5px 50px 100px 50px 5px 0 ==500 ? 像以上这种，如果不等于的话，浏览器它就会自己去调整这7个值...
复制链接

扫一扫