css基础day03

作者: 兔子和猪 | 来源:发表于2017-02-21 20:22 被阅读0次

    一、回顾行内元素与块级元素

    1、行内元素:

    行内元素不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,

    一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。

    行内元素不能嵌套块级标签,只能嵌套其他的行内标签。

    常见的行内元素有strong,b,em,a,i,del,ins,s,span,i,u

    其中span是最典型的行内标签.

    2、块级元素

    •每个块元素通常都会独自占据一整行或多整行,

    可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。

    块级元素容器可以容纳多个嵌套的块级标签或者行内标签。

    常见的块元素有p,h1~h6,div,ul,ol,li,div是最典型的块级元素.

    二、display属性

    display可以控制标签的显示模式。

    display:none | inline | block |inline-block

    继承性:无

    display值的解释:

    none:此元素不被显示,在文档中被移除。

    block:此元素按块级元素显示:前后带换行符,自己占一行。内联元素→块元素

    inline:此元素按内联元素显示:1个挨着1个。块元素→内联元素

    inline-block:按行内标签进行排版,但是可以设置宽高,而且高度可以影响行高

    2、行内块元素设置

                                             宽高            边距                   独占行

    (inline)      行内元素:X              左右边距              不独占

      (block)          块级元素:√              上下左右                 独占

    (inline-block)行内块元素:√            左右                     不独占

    相关文章

      网友评论

        本文标题:css基础day03

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