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

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

作者: 苦瓜_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编码。

    相关文章

      网友评论

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

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