zoukankan      html  css  js  c++  java
  • 初学css 行内元素与块级元素

    行内元素与块级元素直观上的区别

    1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

    2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

    3.行内元素与块级元素属性的不同,主要是盒模型属性上行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

    行高决定行内元素的上限(即margin-top和padding-top的设置是否显示出来),当你不设置或者设置的行高小于字体所决定的行高时,行高为默认值,即字体*1.4;

    无论行高为多少,margin和padding左右下三个方向可以随意设置并显示,下方向,可以设置,也有对应的盒模型,但是底部的底不是砖头,后面的还是可以冲上来,知道碰到其line-height.

    行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。

    什么时候需要把行内元素转换为块级元素?

    display:block;比较常用于<a><span>这两个标签,因为他们不是块级元素,定义display:block属性后,定义width、height等和长宽相关的css属性才会生效。

    行内元素的高度可以用line-height设置,宽度可以用margin和padding,为什么还需要block化?

    这在设置单行文字时是有效的,

    什么时候会倾向于设置width和height?

    你想把文字限定在一个宽度和高度内部,

    来自网上资料

  • 相关阅读:
    C++官方文档-静态成员
    C++官方文档-this
    C++官方文档-运算符重载
    springboot-dokcer
    HDU 1073
    HDU 1070
    UVa 213
    HDU 1150
    POJ 1274
    POJ 2594
  • 原文地址:https://www.cnblogs.com/hfeng007/p/9104676.html
Copyright © 2011-2022 走看看