div和Span标签
- 作用：一般用于配合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>- 作用: 一般用于配合css修改网页中的一些局部信息
<style> ???span { ???????color: red; ???}</style><p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>- div和span有什么区别？
- div会单独的占领一行，而span不会单独占领一行
- div是一个容器级的标签，而span是一个文本级的标签
- 容器级的标签和文本级的标签的区别？
- 容器级的标签中可以嵌套其它所有的标签
- 常见容器级的标签：div、h、ul、ol、dl、li、dt、dd ...
- 文本级的标签中只能嵌套文字、图片、超链接
- 常见文本级的标签：span、p、strong、em、ins、del ...
- 注意点:
- 不用刻意去记忆哪些标签是文本级的哪些标签是容器级，在企业开发中一般情况下要嵌套都是嵌套在div中，或者按照组标签来嵌套(ul>li，ol>li，dl>dt+dd)
CSS元素显示模式
- 在HTML中HTML将所有的标签分为两类，分别是容器级和文本级
- 在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素（其实还有一类，行内块级）
- 什么是块级元素，什么是行内元素？
- 块级元素会独占一行
- 行内元素不会独占一行
- 常见块级元素：p、div、h、ul、ol、dl、li、dt、dd
- 常见行内元素：span、buis、strong、em、ins、del
- 块级元素和行内元素的区别？
- 块级元素：独占一行，如果没有设置宽度，那么默认和父元素一样宽，如果设置了宽高，那么就按照设置的来显示
- 行内元素：不会独占一行，如果没有设置宽度，那么默认和内容一样宽，行内元素是不可以设置宽度和高度的
- 行内块级元素：为了能够让元素既能够不独占一行，又可以设置宽度和高度，那么就出现了行内块级元素，不独占一行，并且可以设置宽高
CSS元素显示模式转换
- 通过设置元素的display属性
- display取值
- block 块级
- inline 行内
- inline-block 行内块级
CSS【06】：CSS显示模式
原文地址：https://www.cnblogs.com/qiuxirufeng/p/10181623.html