块级元素、行内元素，display和无名框

最新推荐文章于 2020-02-01 21:03:56 发布

咖木

最新推荐文章于 2020-02-01 21:03:56 发布

阅读量268

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/dongdaxiaopenyou/article/details/79339805

版权

前端学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

诸如div，p，h1这些元素被称为块级元素，这些元素的内容会被显示成为一个四四方方的block
而span，strong这些元素被称为行内元素，那么这些元素的内容是in-line的，内容显示在行中

可以使用 display 属性改变生成的框的类型。

把 display 设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。

把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  a 
  href= 
  "#" 
  >这是一个链接 
  </ 
  a 
  > 
 
 
  < 
  a 
  href= 
  "#" 
  >这是另一个链接 
  </ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  a 
  href= 
  "#" 
  style= 
  "display:block" 
  >这是一个链接，但设置display为block 
  </ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  a 
  href= 
  "#" 
  style= 
  "display:none" 
  >这是一个链接，但设置display为none 
  </ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 

   some text 
 
 
  < 
  p 
  >Some more text. 
  </ 
  p 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  style 
  > 
 
 
  a, 
 
 
   p { 
 
 
  background-color: 
  yellow; 
 
 
  border: 
  1px 
  dashed 
  blue; 
 
 
  padding: 
  10px; 
 
 
  margin: 
  5px; 
 

   } 
 
 
 
 
  div { 
 
 
  border: 
  2px 
  solid 
  red; 
 
 
  margin: 
  20px; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 

把一些文本添加到一个块级元素（比如 div）的开头，即使没有进行显式定义，也会创建块级元素。虽然没有把这些文本定义为段落，但是它也会被当作段落对待，如Some text。这个框称为无名块框，它不与专门定义的元素相关联。

我们无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。

所以无名框是应该避免的，在屏幕上看到的所有东西都形成某种框。

咖木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块级元素、行内元素，display和无名框

诸如div，p，h1这些元素被称为块级元素，这些元素的内容会被显示成为一个四四方方的block而span，strong这些元素被称为行内元素，那么这些元素的内容是in-line的，内容显示在行中可以使用 display 属性改变生成的框的类型。把 display 设置为 block，可以让行内元素（比如 &lt;a&gt; 元素）表现得像块级元素一样。把 display 设置为 none，让生成的...
复制链接

扫一扫