美文网首页
CSS 块级元素与内联元素及其转换

CSS 块级元素与内联元素及其转换

作者: 晴天的晴q | 来源:发表于2019-02-27 19:47 被阅读0次

    常见块级元素:address、div、dl、form、h1-h6、menu、ol、ul、li、p、table、header、nav、footer、article、section等

    常见内联元素:a、br、font、img、input、label、select、span、textarea、b、small

    块级元素具有以下特点:
    1. 总是在新行上开始,占据一整行
    2. 高度、行高以及内外边距都可以控制
    3. 宽带始终是与浏览器宽度一样,与内容无关
    4. 它可以容纳内联元素和其他块元素

    内联元素的特点:
    1. 和其他元素都在一行上
    2. 高、行高以及内外边距部分可改变
    3. 宽度只与内容有关
    4. 行内元素只能容纳文本或者其他行内元素
    5. 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在 ie6 中不对上下起作用,只能对左右起作用。

    CSS 改变元素类型

    display: block        显示为块级元素
    display: inline        显示为内联元素
    display: inline-block        显示为内联块级元素,表现为同行显示并可修改宽高内外边距等属性

    注意:内联元素的 margin-left / margin-right 及 padding-right / padding-left 是可以控制的,所以可以通过这四个属性来控制内联元素的宽度。
    内联元素的内部也可以放块级元素标签,而且内部的块级元素标签会撑大外部的内联标签,所以可以通过放块元素来控制内联元素的高度。

    相关文章

      网友评论

          本文标题:CSS 块级元素与内联元素及其转换

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