美文网首页
常见块级元素和行内元素以及它们的区别

常见块级元素和行内元素以及它们的区别

作者: 苦瓜_6 | 来源:发表于2018-03-01 12:18 被阅读0次

主要内容: 常见的块级元素和行内元素以及它们的区别。

常见的块级元素和行内元素

  • 块级元素 (block-level) : div h1~h6 p hr form ul dl ol pre table li dd dt tr td th
  • 行内元素 (inline-level):em strong span a br img button input label select textarea code script

块级元素和行内元素的区别

  • 块级元素占据的是一整行 , 而行内元素占据的空间是它自身,多个行内元素可以并排排列;
  • 块级元素可以直接设置宽度、高度 , 而行内元素不能设置宽高(行内元素的高度由line-height决定,宽度由具体的内容来决定)
  • 块级元素可以包含块级和行内, 行内只能包含文本和行内
  • 块级元素可以设置margin和padding, 而行内元素上下的margin、padding不生效, 只有左右生效( 此时上下padding虽不会占用空间, 但是会占用背景色)
  • 块级元素使用margin: 0 auto;居中,行内元素,设置text-align: center; 达到居中目的(注意:text-align:center;仅作用在块级元素上,所以text-align:center;这个属性应该设置在行内元素的block级父元素上)
  • 行内元素可以“感受”到浮动元素的存在

关于text-align

text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐,text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。

text-align:center的意思是块级元素中的行内内容居中。
作用在block-level元素上(包括了block和inline-block);
能让block-level的元素中的行内元素,替换元素和inline-block元素居中。

解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }

  • 设置body字体大小为12像素, 行高为1.5倍字体大小, 然后字体按顺序依次选择(没有才选择下一个字体), 如果都没有的话, 按浏览器默认样式设置
  • 加引号是因为中间有空格,不加引号会被识别成多个元素
  • \5b8b\4f53 是Unicode码, 宋体,使用Unicode是因为网页或css编码是utf-8,直接写成中文,浏览器有可能不能识别,所以要写成Unicode编码。

相关文章

  • 常见块级元素和行内元素以及它们的区别

    主要内容: 常见的块级元素和行内元素以及它们的区别。 常见的块级元素和行内元素 块级元素 (block-level...

  • 行内元素和块级元素

    行内元素和块级元素的区别 常见的行内元素:span、strong、em 常见的块级元素:div、p、form、ul...

  • css常见样式

    CSS常见属性 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素与行内元素区别: 块级可以...

  • 任务8——CSS常见样式

    1.块级元素和行内元素分别有哪些? 区别1块级元素可以包含块级元素和行内元素;行内元素只能包含文本和行内元素 区别...

  • 入门任务8

    块级元素和行内元素分别有哪些?## 块级元素 行内元素 区别 块级元素可以包含行内元素和其他块级元素,行内元素只能...

  • css学习笔记之常见样式

    1 块级元素 和 行内元素区别 1 差异 块级元素可以包含行内元素和块级元素 行内元素只能包含文本和行内元素 块级...

  • CSS常见样式1

    1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别? 常见的块级元素和行内元素 块级元素(bloc...

  • CSS常见样式

    块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别。 常见的块级元素和行内元素: 块级元素:h/p/d...

  • css常见样式

    块级元素和行内元素分别有哪些? 块级元素: 行内元素: 特性区别:1.块级元素可以包含行内元素和块级元素,而行内元...

  • Css 的块级元素 和行内元素的区别

    块级元素与行内的元素的区别 块级元素和行内元素是布局最基本的两种元素,我们都知道常见的块级元素有div,p,for...

网友评论

      本文标题:常见块级元素和行内元素以及它们的区别

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