> 웹 프론트엔드 > HTML 튜토리얼 > 了解HTML 元素分类_html/css_WEB-ITnose

了解HTML 元素分类_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:26:54
원래의
1060명이 탐색했습니다.

  HTML中包含大量的标签, 这些标签在我们使用中发现会有小小的差别, 有的标签用了之后不会有太大的布局变化, 只是语义化, 而有的标签却会重起一行, 相当于自己回车了一次, 这就是不同标签元素的分类不同造成的结果.

  块级元素

  在HTML中,

,

,

,

,
    ,
    ,
  1. 等标签就是块级元素, 每个块级元素一般都具有相同的特点.

      1, 每个块级元素都从新的一行开始, 并且其后的元素也另起一行. (也就是块级元素就要自己占一行, 后面的也得让路)

      2, 元素的高度, 宽度, 行高以及顶和底边距都可设置.

      3, 元素宽度在不设置的情况下, 是它本身父容器的100%, 也可以单独进行的设置.

      内联元素

      区别于块状元素, , ,

      当然, 内联元素也有自己的一些特点, 这些和块级元素都是一一对应的.

      1, 内联元素和其他元素都是在一行上, 而不会排挤其他的元素, 

      2, 元素的高度, 宽度以及顶部底部边距不可设置(因为元素都是行内紧挨着, 你如果设置这些, 那么元素不就都乱了).

      3, 元素的宽度就是它包含的文字或图片的宽度, 不可改变.

      内联块状元素

      这种元素非常少, 它们同时具备两种元素的特点, 了解HTML 元素分类_html/css_WEB-ITnose, 这两个标签就是内联块状元素. 就不多做介绍了.

      

      这三种元素是可以互相转化的, 也就是说可以通过css强制修改其元素类型, 只需要设置display的属性即可, 假如想要将内联元素类型修改为块级元素, 代码如下

      span{

        display:block;

      }

      同理其他的也是一样的属性值不同而已, 修改为块级元素:block, 修改为内联元素:inline, 修改为内联块状元素:inline-block.

      这三种元素一定要非常准确的掌握, 因为在div + css布局中, 它们占了举足轻重的地位.

      

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿