美文网首页
前端——盒子

前端——盒子

作者: 浮_屠 | 来源:发表于2018-11-26 19:10 被阅读0次

盒子模型

  • 一个页面我们会分成几个盒子组成的
  • 一个盒子我们会分为以下几个部分:
    — 内容区(content)
    — 内边距(padding)
    — 边框 (border)
    — 外边距(margin)


    image.png

内容区

对盒子而言内容就是放东西的地方,对网页来说就是放客户看的东西。
没有设置内边距和边框,会默认内容区的大小和盒子大小一致。

  • 通过 widthheight两个属性可以设置内容区的大小。
  • widthheight这两个属性只适用于块元素。

内边距

内容区和边框以内的空间。

  • widthheight无法设置内边距
  • padding可以设置内边距属性
    image.png image.png

边框

在元素周围创建边框,边框是可见框的最外部

  • border可以来设置边框属性
    image.png
  • 可以分别指定上下左右四个方向的边框
  • padding一样,默认widthheight是包括边框的宽度的

边框的样式

image.png

display

当我们需要为行内元素设置width, height,margin-topmargin-dottom的时候使用去进行修改

image.png

visibility

  • 设置元素是否可见
  • 隐藏后文档所占区不会被其他元素覆盖。


    image.png

overflow

  • 当标签里的内容超出标签的样式宽度和高度后,会溢出盒子
  • 可以使用overflow来控制内容溢出的情况
    image.png

文档流

image.png

浮动

  • 一个元素浮动后,其下方的元素会向上移动。
  • 浮动会脱离文档流,不在占用位置
  • 设置浮动后,会向上漂浮直到遇到父元素的边界或其他的浮动元素
  • 浮动后完全脱离文档流,不影响父元素的高度
  • 浮动后默认为块元素,即使设置display:inline依然是块元素

清除浮动

  • clear属性可以用于清除浮动对元素的影响
  • 不会因为上方的浮动元素而改变位置


    image.png

定位

  • position属性来控制Web浏览器在何处显示特定元素
  • 可以将元素放到网页的任何位置


    image.png

相对定位

image.png

特点

image.png

绝对定位

image.png

特点

image.png

固定定位

image.png

z-index

image.png

相关文章

  • 前端—盒子

  • 前端盒子

    盒子

  • 前端——盒子

    盒子模型 一个页面我们会分成几个盒子组成的 一个盒子我们会分为以下几个部分:— 内容区(content)— 内边距...

  • 前端box(盒子)

    高度塌陷 1 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高但是当为子元素设置浮动以...

  • 05-盒子模型

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) ...

  • 前端页面设计的基础思维:盒子模型

    在前端工程师的眼里,可以说“万物皆盒子”。盒子模型是前端工程师将HTML和CSS结合起来,按照设计稿进行前端页面设...

  • box-sizing属性使用场景

    关键词:布局 盒子模型盒子模型盒子模型在前端开发中有着非常重要的地位。盒子模型的组成由content+paddin...

  • 2021-05-24

    前端面试2021.5.24 1.说一下盒子模型: 答:盒子模型有两种:W3C和IE盒子模型 盒子模型包括margi...

  • 前端盒子模型

    盒子 内容区域设定:width:宽度的设定,height:高度的设定。宽度和高度的设定可以是个体的数值(带单位),...

  • 前端box(盒子嵌套)

    1、盒子模型 一个盒子我们会分成几个部分:内容区(content)内边距(padding)边框(border)外边...

网友评论

      本文标题:前端——盒子

      本文链接:https://www.haomeiwen.com/subject/qiqiqqtx.html