一、div和span标签
- 什么是div
- 作用: 一般是用于配合css完成网页的基本布局。
- 什么是span
- 作用:一般配合css修改网页中的一些局部信息。
- div 和 span 的区别
- div会单独占领一行,span不会单独占领一行。
- div是一个容器级别的标签,span 是文本级别的标签。
- 容器级和文本级的标签的区别?
- 容器级的标签中可以嵌套其他所有的标签,但是文本级的标签中只能嵌套文字/超链接/图片。
- 注意点:那些标签是文本级的,那些标签是容器级的,我们可以不用去记忆的,在企业开发中一般情况下要嵌套的都是嵌套在div 中,或者按照组标签来嵌套。
二、CSS元素的显示模式
1、什么是CSS的显示模式
- 在HTML中将所有的标签分为两类,分别是容器级别和文本级别,在css中,也将所有的标签分为两类,分别是块级别元素和行内元素。
- 什么是块级元素,什么是行内元素?
块级别元素(容器级):p/div/ h/ ul/ol/dl/li/dt/dd
行内元素(文本):span/buis/strong/em/ins/del
- 块级元素和行内元素的区别?
块级元素:
- 独占一行;
- 如果没有设置宽度,那么默认和父元素一样宽;
- 如果设置了宽度,那么就根据设置的来显示;
行内元素:
- 不会独占一行;
- 如果没有设置宽度,那么默认和内容一样宽;
- 行内元素是不可以设置宽度和高度的。
行内块级元素:
1.为了能够让元素既能够不独占一行,又可以设置宽度和高度,那么就出现了行内块级元素。例如 img
二、CSS元素显示模式的转换
1、如何转化CSS 元素的显示模式?
- 设置元素的display属性
2、display 的取值
- block:块级
- inline:行内
- inline-block: 行内转换
3、快捷键:
di : display:inline
db: display:block
dib:display:inline-block