CSS【06】:CSS显示模式
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显示模式的更多相关文章
- Css - 元素的显示模式
Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- CSS的元素显示模式与转换
CSS的元素显示模式与转换 1. CSS的元素显示模式 1.1 块元素 <div>标签是最典型的块元素.另外常见的块元素有h1~h6.p.ul.ol.li等. 特点: 独占一行 高度.宽度 ...
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- CSS Vocabulary – CSS 词汇表,你都掌握了吗?
CSS 是前端开发必备技能,入门容易,深入难.比如像 Pseudo-class.Pseudo-element.Media query.Media type 以及 Vendor prefix 的概念,很 ...
- css样式 --- CSS hack
前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- CSS:CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
- CSS之CSS hack
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器H ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
随机推荐
- canvas霓虹雨
在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewiley/f ...
- Vs code常用插件
Vs code常用插件 1.View In Browser 由于 VSCode 没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器查看文件选项,以及在客户端(Firef ...
- mac shell 获取ip,自动启动文件http服务
因为工作原因,时常有文件传输需求. rz.nc.rsync都用过,各有各的好处. 但相对的,向别处推文件时总有各种麻烦,尤其是在给同事发送文件时. 然后就想到了提供http服务. 在环境变量中定义别名 ...
- 跑 vue 项目
cd ***** npm install 或 yarn(推荐) npm run dev 若是报错: missing script: dev ERR! A complete log of this r ...
- ffmpeg命令的使用
参考博客:https://www.cnblogs.com/wainiwann/p/4128154.html 但是红色网页总结的 “ffmpeg 用法” 非常全面. http://www.360doc. ...
- spring相关jar包
spring.jar是包含有完整发布的单个jar 包,spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容,因为只有在开发环境下才会用到 spring-m ...
- JDK8新增接口的默认方法与静态方法
JDK8之前,interface中可以定义常量和抽象方法,访问修饰符是public. public interface A { /** a1和a2写法是等价的 */ public static fin ...
- 自动重置Language level 5 与 Java Complier 1.5
Intellij IDEA用Maven来构建项目,若pom.xml没有指定版本,总是默认Language level 5 与 Java Compiler 1.5. 以下是两种修改方式: 1. 手动进行 ...
- jquery实现一个标签图标hover到上面的时候显示tooltip
设计图: 解决思路:1.在thumbnailbox.js这个插件中加入tags弹出框显示的内容,一开始让这些内容display:none; 然后再用css画出来一个三角形 实现方法: 知识点:Jque ...
- 5、jeecg 笔记之 minidao 条件判断
1.前言 我们知道 mybatis 中的动态sql语句是基于 OGNL 表达式的. 额外补充一点:mybatis 中的 #{} 和 ${} ,可直接跳过. #{}表示一个占位符号,#{}接收输 ...