CSS显示模式(diaplay)简介

html所有标签都可以配置成任意样式,不去配置,很多标签具有缺省显示样式,除非特殊情况,很多时候都会延用默认样式。缺省的显示模式分为三种:块级元素,行内元素以及行内块元素(元素就是标记,html中一般叫做标记,CSS中一般叫做元素)。

显示模式(diaplay)

block块级元素

  • 常用块级元素:div,hx,p,ul,ol,li,dl,dt,dd
  • div元素经常被当做布局元素使用
  • 块级元素的特点:
  1. 所有的块级元素自己占用一行
  2. 块级元素可以设定宽度和高度width,height
  3. 块级元素可以设定内边距和外边距padding,margin
  4. 块级元素的宽度是其容器(父节点)宽度的100%
  5. 块级元素内部可以容纳其他的块级元素或者内联元素
  6. 例外:p,hx元素通常内部只放文字

inline行内元素

  • 常用的行内元素:span,a,文本格式化标签
  • 行内元素的特点:
  1. 相邻的行内元素可以在一行上
  2. 行内元素设定宽度和高度无效
  3. 行内元素可以设定内边距,但是设定外边距时,只有水平方向有效margin
  4. 行内元素的宽度是其内部内容的宽度
  5. 行内元素通常只容纳文本或者其他行内元素
  6. 例外,a元素内部可以放块级元素
  7. 注意:a元素内部不能再放a元素

inline-block行内块元素

  • 常见的行内块元素:img,input,td
  • 行内块元素的特点:

相邻的行内块元素是可以在一行上:(行内元素)

行内块元素可以设定宽度、高度、内边距和外边距:(块级元素)

显示模式的转换

  • 块级元素变为行内元素:display:inline
  • 行内元素变为块级元素:display:block
  • 块级元素\行内元素变为行内块元素:display:inline-block

CSS显示模式(diaplay)简介

注:显示(display)-none
visibility:visible或者hidden
面试题:display: none 和 visibility:hidden区别:
1. dn把元素从Render tree取下,但是vh不会
2. dn的元素不参与layout(不参与标准流的计算),但是vh参与

本站技术原创文章,是由作者:常春 创作,如若转载请注明原文及出处:https://www.aiyouseo.com/jianzhan/1553.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注