欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

第一篇:前端开发-css元素类型详解

程序员文章站 2022-07-03 13:18:08
css元素类型详解 css元素类型可分为三类:块状元素、内联元素以及可变元素(具有争议) 1、块状元素 特点: a、在页面中以矩形区域显示; b、自上而下排列,独占一行; c、可直接添加宽高; d、一般情况下直接作为其他元素或内容的容器。 块状元素: div:最常用的块状元素 dl:和dt、dd搭配 ......

 css元素类型详解

 css元素类型可分为三类:块状元素、内联元素以及可变元素(具有争议)

1、块状元素

特点:

  a、在页面中以矩形区域显示;

  b、自上而下排列,独占一行;

  c、可直接添加宽高;

  d、一般情况下直接作为其他元素或内容的容器。

块状元素:

  div:最常用的块状元素

  dl:和dt、dd搭配使用的块状元素

  form:交互表单

  h1-h6:大标题

  hr:水平分隔线

  ul:无序列表

  ol:有序列表

  li:列表单元

  p:段落

  fieldset:表单字段集

  colgroup-col:表单列分组元素

  table-tr-td:表格及行列单元格

 

2、内联元素

特点:

  a、在页面中最小单位也是矩形;

  b、横向排列,在一行内逐个排列。如果元素间有回车,会出现空格;

  c、不可直接添加宽高,大小直接由内容撑开;

  d、也符合盒模型规则,但个别属性会出现问题,如padding-top/bottom,margin-top/bottom(转化为块状元素后可正常使用)。

  e、也内联元素在一行排列的时候会有间距,清除方法:

    1、添加浮动。

    2、把所有内联元素放在一行,不用回车键(不推荐使用)。

内联元素

  a:超链接

  b:粗体

  br:换行

  i:斜体

  em:强调

  img:图片(特殊内联,可添加大小)

  input:输入框

  label:表单标签

  span:常用内联容器,定义文本内区块

  strong:粗体强调

  sup、sub:上下标

  textarea:多行文本输入框

 

3、可变元素

  根据上下文的显示来确定这个元素是块状元素还是内联元素。