欢迎光临
我的个人博客网站

盒子模型


李立超老师前端课程笔记

文档流(normal flow)

网页是一个多层的结构,一层叠着一层。通过 css 可以分别为每一层来设置样式

用户只能看到最顶上一层,这些层中,最底下的一层称为文档流,文档流是网页的基础

我们所创建的元素默认都是在文档流中进行排列。

对于我们来元素主要有两个状态

  • 在文档流中
  • 不在文档流中(脱离文档流)

元素在文档流中有什么特点

  1. 块元素
    • 块元素会在页面中独占一行(自上向下垂直排列)
    • 默认宽度是父元素的全部(会把父元素撑满)
    • 默认高度是被内容撑开(子元素)
  2. 行内元素
    • 行内元素不会独占页面的一行,只占自身的大小
    • 行内元素在页面中左向右水平排列,如果一行之中不能容纳下所有的行内元素
    • 则元素会换到第二行继续自左向右排列(书写习惯一致)
    • 行内元素没有 width 和 height 属性的,所以默认宽度和高度都是被内容撑开的

盒子模型(box model)

CSS将页面中的所有元素都设置为了一个矩形的盒子,将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置

组成(由里到外):

  • 内容区(content)

  • 内边距(padding)

  • 边框(border)

  • 外边距(margin)

盒子模型

内容区(content)

元素中的所有的子元素和文本内容都在内容区中排列 。内容区的大小由 widthheight 两个属性来设置

  • width 设置内容区的宽度

  • height 设置内容区的高度

边框(border)

边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部

边框的大小会影响到整个盒子的大小

要设置边框,需要至少设置三个样式:

  • 边框的宽度 border-width

  • 边框的颜色 border-color

  • 边框的样式 border-style

内边距(padding)

内容区和边框之间的距离是内边距

一共有四个方向的内边距:

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

内边距的设置会影响到盒子的大小

背景颜色会延伸到内边距上

一共盒子的可见框的大小,由 内容区 内边距边框 共同决定,所以在计算盒子大小时,需要将这三个区域加到一起计算

padding 内边距的简写属性,可以同时指定四个方向的内边距

padding: 10px 20px 30px 40px;	// 上,右,下,左(顺时针)的顺序 padding: 10px 20px 30px ;	// 上,左右,下 padding: 10px 20px ;	// 上下,左右 padding: 10px ;	// 上下左右 

外边距(margin)

外边距不会影响盒子可见框的大小,但是外边距会影响盒子的位置

一共有四个方向的外边距:

  1. margin-top

    上外边距,设置一个正值,元素会向下移动

  2. margin-right

    默认情况下设置margin-right不会产生任何效果

  3. margin-bottom

    外边距,设置一个正值,其下边的元素会向下移动

  4. margin-left

    左外边距,设置一个正值,元素会向右移动

注意:margin-right 也可以设置负值,如果是负值则元素会向相反的方向移动

元素在页面中是按照自左向右的顺序排列的,

  • 所以默认情况下如果我们设置的左和上外边距则会移动元素自身

  • 而设置下和右外边距会移动其他元素

margin的简写属性:margin 可以同时设置四个方向的外边距 ,用法和padding一样

margin会影响到盒子实际占用空间

盒子的水平布局

元素的水平方向的布局:元素在其父元素中水平方向的位置由以下几个属性共同决定

  1. margin-left
  2. border-left
  3. padding-left
  4. width
  5. padding-right
  6. border-right
  7. margin-right

水平布局公式

一个元素在其父元素中,水平布局必须要满足以下的等式:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度必须满足

以上等式必须满足,如果相加结果使等式不成立,则称为过度约束,则等式会自动调整

  • 如果这七个值中没有为 auto 的情况,则浏览器会自动调整margin-right值以使等式满足
  • 如果某个值为 auto ,则会自动调整为 auto 的值以使等式成立
<style>     div.outer {         padding: 800px;         height: 200px;         border: 10px red solid;     }     div.inner {         height: 200px;         width: 200px;         background-color: #afb;     } </style> <body>     <div class="outer"> 		<div class="inner"></div> 	</div> </body> 
  • 此时就有

    0 + 0 + 0 + 200 + 0 + 0 + 0 = 800

    但明显不满足,所以浏览器会自动调整 margin-right = 800 – 200 = 600

  • 如果将 .inner 里 width=auto 那么,auto 会自动调整

    0 + 0 + 0 + auto(800) + 0 + 0 + 0 = 800

  • 如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0

  • 如果将三个值都设置为auto,则外边距都是0,宽度最大
  • 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值

    所以我们经常利用这个特点来使一个元素在其父元素中水平居中

    eg: width: xxpx; margin: 0 auto;

注意:如果子元素的 width 的值大于父元素的 width 时,那么浏览器会将子元素的 margin-right 设置为负值,显示的效果就是子元素的内容超出了父元素的框架。

垂直方向的布局

垂直方向的布局没有水平那么复杂,也不需要满足什么公式

  • 当父元素 height 没有设具体值(默认和 auto )时,父元素的高度会被子元素的 height 撑开

  • 若父元素 height 设的有具体值,且子元素的高度超出时,则子元素会从父元素中溢出

    使用 overflow 属性来设置父元素如何处理溢出的子元素

    • overflow: visible 默认值 子元素会从父元素中溢出,在父元素外部的位置显示
    • overflow: hidden 溢出内容将会被裁剪不会显示
    • overflow: scroll 生成两个滚动条,通过滚动条来查看完整的内容
    • overflow: auto 根据需要生成滚动条(常用)
  • 另外还有 overflow-xoverflow-y 表示 x 轴和 y 轴上的设置

垂直外边距的重叠

相邻的垂直方向外边距会发生重叠现象

  • 兄弟元素

    兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)

    特殊情况:

    ​ 如果相邻的外边距一正一负,则取两者的和

    ​ 如果相邻的外边距都是负值,则取两者中绝对值较大的

兄弟元素之间的外边距的重叠,对于开发是有利的,所以我们不需要进行处理

  • 父子元素

    父子元素间相邻外边距,子元素的会传递给父元素(上外边距)

    父子外边距的折叠会影响到页面的布局,必须要进行处理

行内元素的盒模型

特点

  • 行内元素不支持设置宽度高度
  • 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
  • 行内元素可以设置border,垂直方向的border不会影响页面的布局
  • 行内元素可以设置margin,垂直方向的margin不会影响布局

display

用来设置元素显示的类型

  • display: inline 将元素设置为行内元素

  • display: block 将元素设置为块元素

  • display: inline-block 将元素设置为行内块元素 。行内块,既可以设置宽度和高度又不会独占一行

  • display: table 将元素设置为一个表格

  • display: none 元素不在页面中显示,不会占据页面的位置

    注:visibility 也可用来设置元素的显示状态

    visibility: visible 默认值,元素在页面中正常显示

    visibility: hidden 元素在页面中隐藏 不显示,但是依然占据页面的位置,影响布局

赞(0) 打赏
未经允许不得转载:张拓的天空 » 盒子模型
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏