乐趣区

关于前端:css布局系列1盒模型布局

明确基本概念

网页的布局相似于在一个大盒子中摆放各不相同的小盒子。在布局之前,首先要明确几个概念:

1. 块元素:在页面中独占一行,高度默认被内容(子元素)撑开,宽度默认为父元素的 100%,也即 auto(width 和 height 的默认值不是 0,而是 auto)。

2. 内联(行内)元素:在页面中不独占一行,只占本身内容的大小,不能设置宽和高。

3. 文档流:网页是一个多层构造,一层摞着一层。咱们通过屏幕看到的网页就是网页的最顶部,而文档流是最底下的一层。块元素和行内元素都摆放在文档流中(在不开启浮动、相对定位和固定定位的时候)。

盒模型

下图很好的解释了盒模型:

盒模型程度方向上的布局

程度方向上的布局必须要满足等式:margin-left+border-left+padding-left+width+padding-right+border-right+margin-right= 父元素内容区的宽度

程度方向上的布局必须满足该等式。如果该等式不满足,称为适度束缚。如果产生适度束缚,等式将主动进行调整,调整规定为:

如果上述等式中属性的属性值中没有为 auto 的,则默认调整 margin-right 的值以使等式成立。
【举例】属性值中没有 auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:100px;
      height:100px;
      background-color: coral;
      margin-left:100px;
      }


如果上述等式中属性的属性值中有 auto 的, 要分状况思考:

【阐明】以上属性值能够为 auto 的属性有三个:别离是margin-left,margin-right,width

1、如果有一个属性值为 auto 的,则默认调整值为 auto 属性的属性值。
【举例】margin-left 为 auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:100px;
      height:100px;
      background-color: coral;
      margin-left:auto;   /*margin-left 调整为 auto*/
      margin-right:200px;
      }


2、如果有其中一个外边距和 width 的属性值为 auto,则 width 的值调整至最大,外边距的值调整为 0。
【举例】margin-left 和 width 调整为 auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:auto;  /* 宽度也调整至 auto*/
      height:100px;
      background-color: coral;
      margin-left:auto;  /*margin-right 调整至 auto*/
      margin-right:200px;
      }


3、如果三个值都为 auto,则将 width 的值调整为最大,将外边距的值调整为 0。
【举例】margin-left,margin-right,width 都为 auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:auto;  /* 宽度也调整至 auto*/
      height:100px;
      background-color: coral;
      margin-left:auto;  /*margin-right 调整至 auto*/
      margin-right:auto;  /*margin-left 调整至 auto*/
     }


4、如果 width 的值固定,两个外边距的值为 auto, 则调整 margin-left 和 margin-right 同样的大小,使元素程度居中。个别用来做元素程度居中的成果。
【举例】宽度固定,外边距为 auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:200px;  /* 宽度固定 */
      height:100px;
      background-color: coral;
      margin-left:auto;  /*margin-right 调整至 auto*/
      margin-right:auto;  /*margin-left 调整至 auto*/
      }

盒模型垂直方向上的布局

因为垂直方向上,父元素的高度默认被子元素撑开,所以垂直方向上的布局并不简单。

与盒模型布局无关的三个属性

1.overflow

在垂直方向上布局,如果子元素的高度超过父元素的高度,子元素会溢出,overflow的作用就是用来设置父元素如何解决溢出的子元素。

可选值:

  • visiable:默认值 子元素会从父元素中溢出,在父元素内部的地位显示。
  • hidden:溢出的内容会被裁剪,不显示。
  • scroll:生成两个滚动条,通过滚动条来显示残缺内容。
  • auto:依据须要生成滚动条。
    除此之外,还能够设置overflow-xoverflow-y

2.visibility

visibility用来设置元素的显示状态。

可选值:

  • visible:默认值,元素在页面中失常显示。
  • hidden:元素在页面中暗藏不显示,然而仍然占据页面的地位。

3.display

display用来显示元素显示的类型。

可选值:

  • inline:将元素设置为块元素。
  • block:将元素设置为块元素。
  • inline-block:行内块元素,既不会独占一行,也能够设置宽和高。【小细节】如果两个相邻的行内块元素,两个块元素两头会有一个空隙,是空格导致的,如果把两个元素之间的所有空格删掉,就不会有空隙了。尽量不应用这个值。
  • table:将元素设置为一个表格。
  • none:元素不在页面中显示。

留神:visibility:hiddendisplay:none 的显著区别

display:none 和 visibility:hidden,都可能将元素暗藏。然而 visibility:hidden 暗藏的元素在页面中仍占据着地位,也就是说该元素前面的元素会给这个设置 visibility:hidden 的元素空出地位。而 display:none 暗藏的元素不会再占据着页面的地位。

应用重置样式表(reset stylesheets)革除浏览器的默认款式

通常状况下,浏览器都会主动为元素设置一些默认款式,这些默认款式会影响页面的布局。所以在编写网页的时候必须要去除浏览器的默认款式(PC 端的页面)。
去除浏览器默认款式须要在页面中引入以.css 结尾的重叠样式表文件。

去除默认款式的办法:这里分享两个适宜学习时候用的。在工作中具体会不会用?用哪种?取决于公司。

  1. reset.css 2011 年版本:间接去除了浏览器的默认款式
  2. normalize.css 2018 年版本:对浏览器的默认款式进行了对立

    两种形式的具体区别点这里。

【留神】在引入重置样式表的时候,要在其余引入的 css 文件之前和 <style> 标签之前引入重置样式表!!!


编程小白始终在学习,始终在路上。写文章的目标纯正为了总结集体所学,如有不妥之处,望大家批评指正,我将虚心接受。心愿我的分享也能给看到这篇文章的你一点播种。

退出移动版