CSS基础-CSS显示模式 12
来源:互联网 发布:软件开发技术总监 编辑:程序博客网 时间:2024/06/04 20:10
//联系人:石虎 QQ: 1224614774昵称:嗡嘛呢叭咪哄
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不会单独占领一行
- 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元素显示模式
- 不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)
- 在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;
- 谢谢!!!
阅读全文
0 0
- CSS基础-CSS显示模式 12
- css显示模式
- CSS元素显示模式转换
- 12-CSS入门基础
- 【CSS 基础】 12 position
- HTML+CSS基础 body标签显示文本
- CSS 基础(008_显示)
- CSS基础-12CSS样式-轮廓
- css学习--css基础
- CSS基础学习8-CSS设置盒装模式
- css的对象显示模式(block、inline)
- css的显示模式display记录笔记
- css元素显示模式及转换
- 0430-CSS元素的显示模式
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- Java
- Android N(7.0) 编译出现ninja_wrapper Error
- 软件开发概述和Java语言概述、Java配置
- Linux系统文件与文件夹权限设置
- java编程_servlet
- CSS基础-CSS显示模式 12
- UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现
- Educational Codeforces Round 23 C. Really Big Numbers(二分 数学)
- javascript 数组 Array
- java 面试题---String的“==”比较
- clone的用法--浅拷贝和深拷贝
- java、数学、算法交流会
- gdb调试简单入门
- ConcurrentHashMap源码分析1