zoukankan      html  css  js  c++  java
  • 块元素、行内元素、行内块元素 小结,不足之处请谅解

    HTML中常用标签通常分为块元素、行内元素、行内块元素  ;

    常见的分类方法有(个人分发,不喜勿怪)

    块元素:div p h ol ul dl li dt dd form hr;

    行内元素:span i em b strong a br;

    行内块元素:  img input select textarea;

    那么块元素、行内元素、行内块元素 都有神马特性呢?

    在此之前,讲一下:

    行内元素,块元素,行内块,可以相互转换,通过修改display属性值来切换元素的样式,

    行内元素display:inline,块级元素display:block。行内块:display:inline-block;

    块元素

    1》块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

    2》块级元素却总是会在新的一行开始排列,块级元素独占一行,垂直向下排列,

    若想使其水平方向排序,可使用左右浮动(float:left/right)

    或者修改display属性值,定位(脱流了);来实现让其水平方向排列。

    3》块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;

    行内元素

    1》行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,和其他元素都在一行上

    2》是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;    

    3》行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

    行内块元素  ;

    1》在行内元素中有几个特殊的标签, 可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

    2》和相邻行内元素(行内块)在一行上,但是之间会有**空白缝隙

    3》默认宽度就是它本身内容的宽度。高度,行高、外边距以及内边距都可以控制。

    小结:

    1》行内元素就像一条直线他是没有空间的没有高宽的。

    2》块级元素他是有宽高的是一个空间。也可以理解成一个盒子像<div>就是一个盒子,你想要把他变成多大的盒子,取决于你在里面放了多少东西。

    行内元素和块级元素的区别到底在哪里呢????

    3》行内元素不可以设置宽高,或者说内元素是你即便设置了宽高但是浏览器也不会识别出来,

    但是块级元素就可以,你可以直接给它一个命名。但行内元素你要么在块级元素下面来定义块级元素,给他宽高。或者就是用 display:block 元素属性把它转换成块级元素。就可以定义宽高了。

    万能判断法:

    给元素设置一个宽高加个背景颜色,如果背景颜色和内容紧贴在一起就是行内元素,如果和你的宽高一样就是块级元素!

  • 相关阅读:
    4.9新随笔
    4.2上机作业
    3.30作业
    3.26上机练习
    作业十
    作业九
    作业八
    作业六
    作业五
    作业三
  • 原文地址:https://www.cnblogs.com/CH-cnblogs/p/13583011.html
Copyright © 2011-2022 走看看