CSS 基础 例子 display属性：block、inline和inline-block的区别
HTML中块级元素(block)和行级元素(inline)；比如div就是常见的块级元素，span就是常见的行级元素。
可以通过css的display属性来设置一个元素到底是块级，还是行级元素；display:block将元素设置成块级的，display:inline将元素设置成行级的。
span的实际显示宽度和高度由其内容决定。
一、display:block的特点
1、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3、block元素可以设置margin和padding属性。
二、display:inline的特点
1、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2、inline元素设置width,height属性无效。
3、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
三、display:inline-block的特点
1、让行内块可以设置宽度高度。
span是行级元素，所以不能设置其宽度和高度；如果将span设置成block，那么又会自动换行。怎么让多个span在同一行显示，而且能够固定宽度呢？这就需要用到display:inline-block了。
例子：
<head>
<style>
span{
background-color:#43be60;
width:100px;
height:50px;
margin-top:20px;
margin-left:20px;
display:inline-block;
}
</style>
</head> <body>
<div style="background-color:#ededed;width:400px;height:400px;">
<span>1</span>
<span>10</span>
<span>100</span>
<span>1000</span>
</div>
</body>
CSS 基础 例子 display属性：block、inline和inline-block的区别的更多相关文章
- CSS中的display属性（none,block,inline,inline-block,inherit）
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
- 转: 详解css中的display属性
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...
- 细说CSS中的display属性
相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...
- HTML&CSS基础-标签的属性
HTML&CSS基础-标签的属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...
- HTML&CSS基础-边框简写属性
HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...
- CSS基础-行快属性，hover
CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性. 块标签 div,ul,li,ol,h1~h6,p 可 ...
- CSS visibility与display 属性
所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "colla ...
随机推荐
- image src base64 svg
1.显示img: 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgA ...
- 异步Servlet和异步过虑器
异步处理功能可以节约容器线程.此功能的作用是释放正在等待完成的线程,是该线程能够被另一请求所使用. 要编写支持异步处理的 Servlet 或者过虑器,需要设置 asyncSupported 属性为 t ...
- Centos 装系统 配置网卡，校准时间
Vclient -控制台: 1.编辑网卡,第一块为外网,第二块为内网 #vi /etc/sysconfig/network-scripts/ifcfg-ens160 TYPE=Ethernet NAM ...
- Maximum Product Subarray LT152
Given an integer array nums, find the contiguous subarray within an array (containing at least one n ...
- Max Chunks To Make Sorted LT769
Given an array arr that is a permutation of [0, 1, ..., arr.length - 1], we split the array into som ...
- linux- Fedora25 下 解决anacondas3 与ibus冲突问题
问题:当我们安装了anaconda3之后,会发现ibus-setup进不去. 原因: 是因为ibus-setup的python应该使用python2. 而当我们安装了anaconda3之后,调用pyt ...
- applicationContext-common.xml]; nested exception is java.lang.NoClassDefFoundError: org/w3c/dom/ElementTraversal
14:59:16,747 ERROR ContextLoader:350 - Context initialization failedorg.springframework.beans.factor ...
- 【Linux】Jenkins+Git源码管理（三）
摘要 本章介绍Jenkins配合Git源码管理,关于Jenkins的基本操作,参照[Linux]Jenkins配置和使用(二) 事例说明:在linux环境下,安装的jenkins,已安装git. 代码 ...
- 数组方法splice
删除功能: 语法:arrayObject.splice(index,count) 功能:删除从index处开始的零个或多个元素. 返回值:含有被删除的元素的数组 说明:count是要删除的项目数量,如 ...
- Web中的四大作用域对象
request:请求对象 类型:HttpServletRequest session:表示一次会话,可以处理一个用户多个页面之间的请求 application:标识web应用上下文,类型:Servle ...