Skip to main content

css 基础

选择器​

选择器🌰
元素选择器 Element Selectorp 选中所有段落 <p>
ID 选择器 ID Selector#notice 选中 <div id="notice"> 或 <p id="notice">
类选择器 Class Selector.success 选中 <div class="success"> 和 <a class="success">
属性选择器 Attribute Selector[hidden] 选中 <div hidden> 和 <img hidden>
伪类选择器 Pseudo class selectora:hover 选中 鼠标悬停所在的 <a>

display 类型​

display 用于设置元素渲染框的类型。

  • none 不显示元素。
  • block 显示为块状元素。
  • inline 显示为行内元素。
  • inline-block 显示为行内块，创建一个 BFC。
  • table-cell 显示行为与 <td> 一样。
  • flex flex 布局
  • grid grid 布局
  • ...

问题 block，inline，inline-block 元素的区别是什么？

Details

参考答案 block 元素独占一行，宽度沾满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 <p> 只能包含 inline 元素。

inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。 设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效， 垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。

inline-block 元素不换行，设置 width, height, padding, margin 属性有效。 由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。