课时91.CSS元素显示模式(掌握)

2018-06-24 02:28:24来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

在HTML中HTML将所有的标签分为两类,分别是容器级和文本级

在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素

1.什么是块级元素,什么是行内元素?

块级元素会独占一行

行内元素不会独占一行

块级元素       容器级标签都是块级元素还要加上一个p

p   div  h  ul   ol   dl   li  dt   dd

行内元素     文本级标签都是行内元素还要减去一个p

span   b  u   i   s  strong   em    ins    del

2.块级元素和行内元素的区别?

2.1块级元素

独占一行

如果没有设置宽度,默认和父元素一样宽,div的父元素是body,所以和body一样宽

如果设置了宽高,那么就按照设置的来显示

2.2行内元素

不会独占一行

如果没有设置宽度,那么默认和内容一样

行内元素是不可以设置宽度和高度的

从以上的实例可以看出来span是没有办法设置宽度和高度的

2.3行内块级元素

我们现在有一个需求:想要不独占一行,又能设置跨度和高度,应该怎么做呢?

如果用块级元素,必须独占一行才能设置宽高,如果用行内元素,不独占一行,却不能设置宽高。

所以我们要用到行内块级元素

如img标签,既不独占一行,又可以设置宽高

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:如何实现文字两端对齐?

下一篇:html div内第二行文字显示不下的时候才用省略号代替 css实现