CSS中块级元素和行级元素 | 青训营笔记

小伞太
84 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第9天。

想要说清块级元素和行级元素，先要介绍CSS中的盒模型。

盒子模型

标准盒模型(content-box)： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)

image.png

padding：指定元素四个方向的内边距，百分数相对于容器宽度

10px：表示四个内边距都是10px

10px 20px：表示上下内边距是10px，左右内边距是20px

10px 20px 10px 20px：表示上右下左边距分别是10px 20px 10px 20px

border：指定容器边框样式、粗细和颜色

三种属性：border-width、border-style、border-color

四个方向：border-top、border-right、border-bottom、border-left

margin：指定元素四个方向的外边距

margin collapse在垂直方向上会折叠，上面元素有下外边距，下面元素有上外边距，这样两个元素中间的距离会是那个更大的外边距，而不是简单相加。

怪异盒模型(border-box)： 一个块的总宽度 = width+margin(左右)

image.png

块级和行级

块级元素行级元素
生成块级盒子(可以独占一行)生成行级盒子/内容分散在多个行盒中（一行会排列多个）
body、article、div、main、section、h1-h6、p、ul、lispan、em、strong、cite、code
display:blockdisplay:inline

display属性：

  • block：块级盒子
  • inline：行级盒子
  • inline-block：本身是行级，可以放在行盒中。可以设置宽高，作为一个整体不会被拆散成多行
  • none：排版时完全被忽略
<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
  And <em>Inline Block</em>
  And <em>Inline Block</em>
  And <em>Inline Block</em>
  And <em>Inline Block</em>
</div>
​
<style>
  div {
    width: 10em;
    //overflow-wrap: break-word; //文字换行
    background: #411;
  }
​
  em {
    /* 是行级元素，但是成块，一行多块 */
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

image.png

image-20230115155229284

行级排版上下文（inline formatting contect)：

  • 只包含行级盒子的容器会创建一个IFC
  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动元素

块级排版上下文（Block formatting context):

某些容器会创建一个BFC：

  • 根元素
  • 浮动、绝对定位、inline-block
  • flex子项和grid子项
  • overflow值不是visible的块盒
  • display:flow-root;

display:none和visibility:hidden

display: none和visibility: hidden和opcaity: 0三者这件的区别是什么？

1.opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，如click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已 经绑定的事件 ，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

  • DOM结构

    display: none，浏览器不会渲染该元素，不占据空间。

    visibility: hidden，元素被隐藏，但是会被渲染，占据空间。

    opacity: 0，透明度为0，元素隐藏，占据空间。

  • 事件监听

    display: none，无法进行DOM事件监听。

    visibility: hidden，无法进行DOM事件监听。

    opacity: 0，无法进行DOM事件监听。

  • 性能

    display: none，动态改变该属性会引起重排，性能较差。

    visibility: hidden, 动态改变此属性会引起重绘，性能较高。

    opacity: 0，提升为合成层，不会触发重绘，性能较高。

  • 继承

    display: none，不会被子元素继承，因为子元素不会被渲染。

    visibility: hidden，会被子元素继承，子元素可以通过设置visibility: visibile来取消隐藏。

    opacity: 0，会被子元素继承，并且子元素无法通过opacity:1来取消隐藏。

avatar
文章
阅读
粉丝