CSS中元素的显示模式
在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level)、块级元素(block-level)。
1,首先介绍什么是行内元素,什么又是块级元素?
1.1,行内元素就是不会独占一行的元素,例如:span buis strong em ins del等;
1.2,块级元素就是会独占一行的元素,例如:p div h ul ol dl li dt dd等。
2,行内元素与块级元素有哪些区别?
2.1,行内元素不会独占一行,而块级元素会独占一行;
2.2,行内元素不能设置宽度和高度,它的宽度和高度会随着文本的改变而该改变。块级元素可以设置宽度和高度,
如果没有设置宽度和高度,在默认情况下和父元素一样宽,高度则为0;
2.3,下面这个实例就是通过给行内元素span,块级元素div设置样式,来展示行内元素和块级元素的差异:
<style>
span{
height: 200px;
width: 300px;
background-color: red;
font-size: 40px;
}
.father{
width: 300px;
height: 300px;
background-color: green;
margin: 100px auto;
}
.son{
background-color: blue;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS元素的显示模式</title>
</head>
<body>
<span>我是span</span>
<div class="father">
我是father
<div class="son">我是son</div>
</div>
</body>
</html>
3,由于我们有的时候不仅要设置元素的宽度和高度,同时也希望元素不会独占一行,
这时就出现了行内块级元素(inline-block),常见的行内块级元素有<img>/<input>/<td>等。
4,如何转换CSS元素的显示模式?
4.1,设置元素的display属性
4.2,display取值:inline(行内)、block(块级)、inline-block(行内块级)
4.3,下面这个实例就是将span的显示模式转换为块级,将div的显示属性转换为行内块级,将img的显示模式转换为块级
<style>
/*将span转换为块级元素--*/
*{
margin:;
padding:;
}
span{
display: block;
background-color: red;
width: 400px;
height: 400px;
}
/*将div转换为行内块级元素*/
div{
display: inline-block;
background-color: green;
width: 300px;
height: 300px;
}
/*将img转换为块级元素*/
img{
display: block;
width: 200px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS元素的显示模式</title>
</head>
<body>
<span>我是span</span>
<div>我是div</div>
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg"> </body>
</html>
CSS中元素的显示模式的更多相关文章
- css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0
css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示: ht ...
- CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
- css中元素定位
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...
- css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?
auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- css中元素的分类
按照显示元素分类: 行内元素(lnline-element):元素的高度,行高,顶底边距由元素所包含的图片或文字所决定,不可改变:其宽度为内容文字或图片的宽度所决定,而其左右边距可人为设置. 行内元素 ...
- css中元素的位置
一.display 1.display:none 隐藏标签 2.display:inline 将块级标签改为内联标签 3.display:block 将内联标签改为块级标签 4.display:inl ...
- CSS中元素各种居中方法(思维导图)
前言 用思维导图的方式简单总结一下各种元素的居中方法,如下图: 补充一下: table自带功能 100% 高度的 afrer before 加上 inline block优化 div 装成 table ...
随机推荐
- equals()和hashCode()必须同时覆盖的原因
我们在用JAVA创建自己的类的时候,一种比较常见的覆盖就是覆盖Object中的equals()方法和hashCode()方法.如果不这样做的话,就很可能违反Object.hashCode()的通用约定 ...
- centOS7.1安装nginx与可能遇见的问题
一,安装nginx(系统:CentOS7.1) 1.Nginx下载地址:http://nginx.org/download/nginx-1.6.2.tar.gz [root@linux src]# c ...
- JPA_映射关联关系
一:单项多对一的关联关系 例如:订单和客户 1.新创建订单类 package com.atguigu.jpa.helloworld; import javax.persistence.Column; ...
- Solution: 题解 CF1196E Connected Component on a Chessboard
感觉这题还可以 因为总空间比输入数量 不知高到哪里去了 ,所以完全不需要考虑放不下的问题 从贪心的角度考虑,如果要使相差数量巨大的\(b\)和\(w\)能够成功放下来,应该使这些方块尽量分散(似乎有点 ...
- HDU-5902-GCD is Funny解题笔记
Alex has invented a new game for fun. There are n integers at a board and he performs the following ...
- Windows10怎么用Administrator登录?
1.首先按下快捷键win+X键, 2.然后在命令提示符中输入命令“net user administrator /active:yes”后回车 3.此时administrator管理员账户已开启,点击 ...
- 【WPF学习】第三十三章 高级命令
前面两章介绍了命令的基本内容,可考虑一些更复杂的实现了.接下来介绍如何使用自己的命令,根据目标以不同方式处理相同的命令以及使用命令参数,还将讨论如何支持基本的撤销特性. 一.自定义命令 在5个命令类( ...
- 1222: 计算x^1+x^2+x^3+……+x^n的值
#include <stdio.h>int main(){ int x,n,i,j; long long sum,g;while(scanf("%d%d",&x ...
- (5千字)由浅入深讲解动态规划(JS版)-钢条切割,最大公共子序列,最短编辑距离
斐波拉契数列 首先我们来看看斐波拉契数列,这是一个大家都很熟悉的数列: // f = [1, 1, 2, 3, 5, 8] f(1) = 1; f(2) = 1; f(n) = f(n-1) + f( ...
- Android 开启与关闭软键盘
http://www.cnblogs.com/weixing/p/3300908.html InputMethodManager imm = (InputMethodManager)getSystem ...