我是靠谱客的博主 喜悦蛋挞,这篇文章主要介绍页面的布局简介,现在分享给大家,希望可以做个参考。

水平布局

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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  生成双向滚动条

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

最后

以上就是喜悦蛋挞最近收集整理的关于页面的布局简介的全部内容,更多相关页面内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(90)

评论列表共有 0 条评论

立即
投稿
返回
顶部