CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素。
块元素
每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。并且块级元素容器可以容纳多个嵌套的块级标签或者行内标签。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标记是网页制作中最常用的块元素。
行内元素
行内元素不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构的样式。行内元素不能嵌套块级标签,只能嵌套其他的行内标签。常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等,其中<span>标记是最常用的行内元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<div>我是一个div</div>
<span>我是一个span</span>
<strong>我是一个strong</strong>
</body>
</html>
要是想让strong标签像div标签一样独占一行可不可以呢,答案是当然可以。这就需要用到display这个属性了,比较常用的值有none、inline、block与inline-block,这几个值得解释如下
none :此元素不被显示,在文档中被移除。
block :此元素按块级元素显示:前后带换行符,自己占一行。内联元素 → 块元素
inline :此元素按内联元素显示:1个挨着1个。块元素 → 内联元素
inline-block:按行内标签进行排版,但是可以设置宽高,而且高度可以影响行高
block属性
现在让我们把上面的strong元素变成块级元素试试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title> <style type="text/css">
strong {
display: block;
}
</style>
</head>
<body>
<div>我是一个div</div>
<span>我是一个span</span>
<strong>我是一个strong</strong>
</body>
</html>
inline属性
可以看到设置了display属性为block之后,strong标签就独占一行了,相反如果让div元素变成行内元素的话,就需要用到display属性的inline值了
<style type="text/css">
strong {
display: block;
} div {
display: inline;
}
</style>
可以看到div标签与span在同一行显示了
inline-block属性
再来看看inline-block值,字面意思是行内块级元素,从最开始的介绍得知行内元素的宽高只能靠自身的内容来支撑,这里先给span标签设置宽高
span {
width: 200px;
height: 100px;
background-color: red;
}
从浏览器的运行结果来看,给span设置的宽高并没有起到任何的作用,现在给span设置下display属性inline-block看看
span {
width: 200px;
height: 100px;
background-color: red;
display: inline-block;
}
none属性
可以看到设置的宽高都起作用了,有了块级元素的假象,不过这里的span标签还是一个行内元素。有时候,我们需要暂时性的隐藏页面中的元素,这时就可以设置元素的display属性为none,例如需要隐藏页面中的div元素
div {
display: none;
}
需要注意的是,CSS中的visibility属性也可以控制页面元素的显示与否
div {
visibility: hidden;
}
通过浏览器的显示结果可以很容易得出下面的结论
display: none;的设置是直接把当前标签从页面中直接移除了,不影响页面的布局,而visibility: hidden这个设置只是表示元素在页面上不显示,但还是占用页面的空间。
CSS学习笔记05 display属性的更多相关文章
- CSS学习笔记:display属性
目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...
- CSS学习笔记:浮动属性
目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- CSS学习笔记:定位属性position
目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...
- CSS学习笔记-05 过渡模块的基本用法
话说 1对情侣两情相悦,你情我愿.时机成熟,夜深人静...咳 ,如果就这么直奔主题,是不是有点猴急,所以,还是要来点前戏@. 铛 铛, 这个时候 过渡模块出现了. 划重点: 上代码: <!DOC ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
随机推荐
- 从源码来理解slf4j的绑定,以及logback对配置文件的加载
项目中的日志系统使用的是slf4j + logback.slf4j作为一个简单日志门面,为各种loging APIs(像java.util.logging, logback, log4j)提供一个简单 ...
- [刷题]算法竞赛入门经典(第2版) 4-8/UVa12108 - Extraordinarily Tired Students
书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa12108 - Extraordinarily Tired Stude ...
- arm处理器
arm处理器 arm处理器相关 1.体系架构定义了指令集(ISA)和基于这一体系结构下处理器的编程模型. arm卖的是架构或者已经设计好的公版ip核 卖给苹果高通的是架构,需要苹果高通通过架构设计自己 ...
- winform无边框窗口拖动
无边框的窗口想拖动,只需要在置顶的容器上添加对应的mousedown 和 mousemove 事件就可以实现了.代码如下: //拖动窗口 private Point mPoint = new Poin ...
- 【JAVAWEB学习笔记】07_BootStrap、Viewport介绍
今天主要学习了BootStrap,viewport的介绍和最后对网站进行了重构 今天晨读单词: Compatible:兼容性 viewport:视口 device:设备 initial:初始化(缩写i ...
- jQ实现的一个轮播图
众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...
- 开涛spring3(7.5) - 对JDBC的支持 之 7.5 集成Spring JDBC及最佳实践
7.5 集成Spring JDBC及最佳实践 大多数情况下Spring JDBC都是与IOC容器一起使用.通过配置方式使用Spring JDBC. 而且大部分时间都是使用JdbcTemplate类(或 ...
- MyBatis_Generator插件的安装以及简单使用
MyBatis_Generator_1.3.1.zip 1 下载安装包 安装包名称:MyBatis_Generator_1.3.1.zip 2 在Eclipse上进行安装 l ...
- Android学习探索之App多渠道打包及动态添加修改资源属性
前言: 关于Android渠道打包是一个比较老的话题,今天主要记录总结一下多渠道打包以及如果动态配置修改一些资源属性.今天以公司实际需求为例进行演示,由于项目复用很多公共的业务组件,而且业务组件之间的 ...
- [翻译] 编写高性能 .NET 代码--第五章 通用编码与对象设计 -- 类 vs 结构体
本章介绍了本书其它部分未涉及到的一些编码和设计原则.包含了一些.NET的应用场景,有些不会造成太大危害,有些则会造成明显的问题.剩下的则根据你的使用方法会产生不同的效果.如果要对本章节出现的原则做一个 ...