页面的布局简介

最新推荐文章于 2024-06-15 21:20:00 发布

Stephen lll

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量96

点赞数

分类专栏： css 文章标签： html javascript servlet

本文链接：https://blog.csdn.net/wj2010111/article/details/127325774

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

水平布局

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

如果不等于的话，浏览器就会强制调整这7个值，让你相等。我们管这个过程叫过度约束

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

0 10 0 100 0 10 0 == 600

120 =？ 600

如何调整的

1、如果水平方向7个值当中没有auto，那么浏览器自动调整就是margin-right

0 10 0 100 0 10 380 == 600

2、水平方向7个值当中，有三个值可以被设置为auto，width、margin-left、margin-right

有1个auto ,谁是auto就调整谁

width为auto

0 10 0 580 0 10 0 == 600

margin-left

480 10 0 100 0 10 0 == 600

margin-right

0 10 0 100 0 10 480 == 600

有2个auto

width、margin-left；width、margin-right；margin-left、margin-right

width、margin-left 为auto 调整的是width

width、margin-right 为auto 调整的是width

margin-left、margin-right 为auto margin-left、margin-right各占一半，把元素挤到中间

有3个auto

width、margin-left、margin-right都为auto，调整的是width

总结：有auto的话

width>margin-left、margin-right

.inner {
        width: auto;
        height: 100px;
        background-color: #bfa;
        border: 10px solid orange;
        padding: 0px;
        margin-left: auto;
        margin-right:auto;
      }
      h1{
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <h1>怒帅办皇。</h1>

垂直布局

块元素的高度默认情况是被内容撑开的，那如果设置，设置多少是多少

一般情况，我们不给父元素设置固定的高度，

让它根据子元素的内容自动调整高度

overflow属性

可选值：

visible 默认值正常显示

hidden 剪裁多余

auto 自动根据内容显示是否出现滚动条

scroll 生成双向滚动条

 p{
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <p>
        是以逝投到才三位，想恨学，答俭韩曰子失传谋他一连是三中国我，姑玉对天气了不人是，得李被死欲白死谓俭他以德艳都，娟名死是妄始天仑同如绛明笔后其亓兮牛，高归然秦土是介后之一葬历你，或没哥仄死，通嗣命畴而和洪心说尤禀回失本等，满后俭要冷了，见李大往仆光得则我己。
      </p>
    </div>

Stephen lll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面的布局简介

margin-left、margin-right 为auto margin-left、margin-right各占一半，把元素挤到中间。2、水平方向7个值当中，有三个值可以被设置为auto，width、margin-left、margin-right。width、margin-left、margin-right都为auto，调整的是width。width、margin-right 为auto 调整的是width。width、margin-left 为auto 调整的是width。
复制链接

扫一扫