css display block 和 inline
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。
块级元素:
占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;
行内元素:
自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。
例子:
链接 a 元素,在默认情况下是是“行内元素”,因此对a元素设置高度、宽度等属性,都是无效的。而比如div,p,li,img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样:display:block;强制将它改成块元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span, div {
background-color: #F60;
margin-bottom: 5px;
margin-left: 5px;
height: 50Px;
}
</style>
</head>
<body>
<div style="background-color:#F60">Div默认为 block</div>
<span style="display:block;">加了block属性</span>
<span style="display:block;">加了block属性</span>
<span style="display:block;">加了block属性</span> <span>没加block属性</span>
<span>没加block属性</span>
<span>没加block属性</span>
</body>
</html>
效果图:
css display block 和 inline的更多相关文章
- DIV CSS display(block,inline,none)的属性教程
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:block、inline、inline-block的区别及应用案例
A.display:block就是将元素显示为块级元素. block元素的特点是: 1.总是在新行上开始: 2.高度,行高以及顶和底边距都可控制: 3.宽度缺省是它的容器的100%,除非设定一个宽度; ...
- css(二) block,inline和inline-block概念和区别
转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...
- HTML/CSS:block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- CSS中block,inline和block-inline的区别(转载)
http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level e ...
- CSS——display(Block none inline等)属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- display:block 不起作用
jquery中$("#Main").css("display","none"); $("#Day").css('disp ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- CSS 基础 例子 display属性:block、inline和inline-block的区别
HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...
随机推荐
- MacOSX 虚拟机与宿主机的网络配置
环境:MacOSX.VMware Fusion11.5.CentOS6 比较重要的两个网卡 安装虚拟机后,宿主机会多出几个网卡,其中vmnet1对应的Bridge(桥接方式),vmnet8对应NAT方 ...
- mysql查看连接情况
1.使用navicat进入命令行或者命令行进入mysql 2.看所有进程 show full processlist; 3.看所有连接show status like 'Threads%';
- k8s记录-node组件部署(十)
1)CA 证书配置登录 192.168.0.1 app 用户下cd ssl/kubernetes#注意修改 KUBE_HOME,BOOTSTRAP_TOKEN #与 3.5 3)token 一致,KU ...
- vue-cli入门 - 搭建项目打包运行+webpack打包
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_38225558/article/d ...
- Jmeter做压力测试
1)首先双击bin/jmeter.bat 2)创建Thread Group 3)配置HTTP Request 4)配置Aggregate Report 5)配置并发数和并发时间 6)点击绿色按钮,执行 ...
- [转]java 根据模板文件生成word文档
链接地址:https://blog.csdn.net/ai_0922/article/details/82773466
- javascript Round Function
var rounded = Math.round( number * 10 ) / 10; // round to one digit var rounded = Math.round( number ...
- 1-3docker commit定制镜像
以定制⼀个 Web 服务器为例⼦ 1.commit定制镜像 docker pull nginx:1.17 运行容器 --name:容器名字 -d:后台 -p本地端口:容器内端口 docker ru ...
- 静默安装weblogic12c提示INST-07319: Oracle 主目录(O) 位置的验证失败。指定的位置已存在, 是非空目录并且不是有效的 Oracle 主目录
[xxx@localhost bea12c3]$ java -jar fmw_12.2.1.3.0_wls.jar -silent -responseFile /app/bea12c3/weblogi ...
- mysql8.0安装时,Unable to connect to any of the specified MySQL hosts
https://blog.csdn.net/u014776759/article/details/88422967