页面的布局简介

72 阅读 0 评论 48 点赞

我是靠谱客的博主喜悦蛋挞，最近开发中收集的这篇文章主要介绍页面的布局简介，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

水平布局

浏览器规定一个元素水平方向的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>