黑马程序员技术交流社区

标题: j技术贴 [打印本页]

---

作者: 是在夏天啊    时间: 2019-6-9 22:59
标题: j技术贴
标签显示模式（重点要理解）

实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：

    块级元素：自己独占一行； --- 代表标签 div、h标签

     行内元素：一行可以共存多个；--- 代表标签  span 、a

     行内块元素：一行可以共存多个； --- 代表标签 img 、 input

块级元素(死记硬背)

特点：独占一行，设置宽高能够生效，也可以控制外边距和内边距；

       默认的宽度是父级的100%；

       是一个容器盒子，里面可以放行内或者块元素；

注意：p标签是块级元素，但是p标签里面不能放div标签；

      同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；

常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd

行内元素(死记硬背)

特点：01、一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开；

02、行内元素里面最好只放文本或者其他的行内元素；

常见的行内元素：a  span  u  s  del  strong   em  i  ins 等；

注意：超链接里面不能嵌套超链接；

      特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；

行内块元素：

一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距；

一句话总结：行内块元素可以一行共存多个，能够设置宽高并且生效；

三种显示模式相互转换

将元素转化为块级元素：display:block;

将元素转化为行内元素：display:inline;

将元素转化为行内块元素：display:inline-block;

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2