05-CSS显示模式 随笔  

Div和Span标签

  • 什么是div?
  • 作用: 一般用于配合css完成网页的基本布局
<style> .header{ width: 980px; height: 100px; background: red; margin: auto; margin-bottom: 10px; } .content{ width: 980px; height: 500px; background: green; margin: auto; margin-bottom: 10px; } .footer{ width: 980px; height: 100px; background: blue; margin: auto; } .logo{ width: 200px; height: 50px; background: pink; float: left; margin: 20px; } .nav{ width: 600px; height: 50px; background: yellow; float: right; margin: 20px; } .aside{ width: 250px; height: 460px; background: purple; float: left; margin: 20px; } .article{ width: 650px; height: 460px; background: deepskyblue; float: right; margin: 20px; } </style> <div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="content"> <div class="aside"></div> <div class="article"></div> </div> <div class="footer"></div>
  • 什么是span?
  • 作用: 一般用于配合css修改网页中的一些局部信息
<style> span{ color: red; } </style> <p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>

  • div和span有什么区别?

  • 1.div会单独的占领一行,而span不会单独占领一行

    SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

  • 2.div是一个容器级的标签, 而span是一个文本级的标签

  • 容器级的标签和文本级的标签的区别?

  • 容器级的标签中可以嵌套其它所有的标签

  • 常见容器级的标签: div h ul ol dl li dt dd ...

  • 文本级的标签中只能嵌套文字/图片/超链接

  • 常见文本级的标签:span p buis strong em ins del ...

  • 注意点:

  • 不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)

CSS元素显示模式

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

  • 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)

  • 什么是块级元素, 什么是行内元素?

  • 块级元素会独占一行

  • 行内元素不会独占一行

  • 常见容器级的标签: div h ul ol dl li dt dd ...

  • 常见文本级的标签:span p buis stong em ins del ...

  • 常见块级元素: p div h ul ol dl li dt dd

  • 常见行内元素: span buis strong em ins del

  • 块级元素和行内元素的区别?

  • 块级元素

  • 独占一行

  • 如果没有设置宽度, 那么默认和父元素一样宽

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

  • 行内元素

  • 不会独占一行

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

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

  • 行内块级元素

  • 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

  • 不独占一行, 并且可以设置宽高

CSS元素显示模式转换

  • 如何转换CSS元素的显示模式?

  • 设置元素的display属性

  • display取值

  • block 块级

  • inline 行内

  • inline-block 行内块级

  • 快捷键

  • di display: inline;

  • db display: block;

  • dib display: inline-block;



扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄