display属性详解
内容：
1.display介绍
2.display分类
3.块级标签和内联标签
4.inline-block应用
1.display介绍
display：display属性设置元素如何被显示
2.display分类
(1)display分类
- display: none; -- 让标签消失(隐藏元素并脱离文档流)
- display: inline; -- 内联元素(内联表签)
- display: block; -- 块级元素(块级标签)
- display: inline-block; -- 既有inline的属性也有block属性
(2)块级元素和内联元素
block元素：
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度
- block元素可以设置width和height属性。块级元素即使设置了宽度,仍然是独占一行
- block元素也可以设置margin和padding属性
inline元素：
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
- inline元素的宽度是自身内容的宽度(默认有多少占多少)
- inline元素设置width和height属性无效
- inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
inline-block元素：
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）设置inline-block属性，使其既具有block的可设置宽度和高度特性又具有inline的同行特性
3.块级标签与内联标签(块级元素和内联元素)
(1)块级标签与内联标签实例
1 <!--__author__ = "wyb"-->
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>块级标签和内联标签</title>
7 <style>
8 div, p, span{
9 width: 100px;
10 height: 100px;
11 }
12 div{
13 background: red;
14 }
15 p{
16 background: #747F8C;
17 }
18 span{
19 background: #41db50;
20 }
21 </style>
22 </head>
23 <body>
24 <div>div(块级标签) </div>
25 <p>p(块级标签)</p>
26 <span>span(内联标签)</span>
27 </body>
28 </html>
(2)块级标签和内联标签通过display转换
1 <!--__author__ = "wyb"-->
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>块级标签和内联标签通过display转换</title>
7 <style>
8 .inline{
9 background: red;
10 display: inline;
11 }
12 .block{
13 background: red;
14 display: block;
15 }
16 </style>
17 </head>
18 <body>
19 <!--将块级标签变成行内标签-->
20 <div class="inline">div</div>
21 <!--将行内标签变成块级标签-->
22 <span class="block">span</span>
23 </body>
24 </html>
4.inline-block应用
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：
1 #outer{
2 border: 3px dashed;
3 word-spacing: -6px;
4 }
display属性详解的更多相关文章
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
- CSS display 属性详解
定义display 属性设置是否及如何显示元素. 继承性: No 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不 谨慎会很危险,因为可能 ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- [转]CSS vertical-align属性详解 作者：黄映焜
CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...
- CSS2.1SPEC：视觉格式化模型之width属性详解(下)
本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...
- flex弹性布局属性详解！
详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...
- android:exported 属性详解
属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...
- OutputCache属性详解（一）一Duration、VaryByParam
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
- OutputCache属性详解（二）一 Location
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
随机推荐
- delphi批量存入多媒体字段 遇到内存溢出的坑
最近delphi做一个小工具其中一个需求要把上W张照片存入数据库多媒体字段. 程序转到1,2W的时候即内在溢出了.最多一次转了3W张照片.很简单的一段代码后来仔细检查发现其中的坑. 下面放上代码 wi ...
- jquery中.prev()
☆ 遍历 - .prev()方法:取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合.选择性筛选的选择器. (previous:上一个,上一页,前一个,以前的......) 示例: ...
- day2-Iptables笔记
1. iptables防火墙简介 Iptables也叫netfilter是Linux下自带的一款免费且优秀的基于包过滤的防火墙工具,它的功能十分强大,使用非常灵活,可以对流入.流出.流经服务器的数 ...
- repo学习笔记
1. 遍历所有的git仓库,并在每个仓库执行-c所指定的命令(被执行的命令不限于git命令,而是任何被系统支持的命令,比如:ls . pwd .cp 等 . $ repo forall -c &quo ...
- centos7 添加用户并授权root权限
centos7.2 版本,我们不可能每次都用root账号登陆,root账号公认的不安全,所以,首先,禁止掉root账号的登陆.1.静止root账号登陆. $ vi /etc/ssh/sshd.conf ...
- 测试开发系列之Python开发mock接口（一）
什么是mock接口呢,举个栗子,你在一家电商公司,有查看商品.购物.支付.发 货.收获等等等一大堆功能,你是一个测试人员,测测测,测到支付功能的时候,你就要调用第三方支付接口了,真实支付,直接扣你支付 ...
- ORTP&&RTSP
ortp为了提高实时性使用UDP发送 rtsp建立了一个TCPserver,等待客户端连接,此时打开VLC播放器-->打开网络串流-->输入rtsp地址,会请求RTSP Server建立一 ...
- 使用 Visual Studio Code （VSCODE）写 C51 （持续更新 2018-04-09）
Keil C51 那代码编辑器就是上一个时代的产物, 不适合现代人使用. 但是用 Visual Studio Code (VSCODE)就舒服多了.但需要安装和配置一些扩展: 按 Ctrl + Shi ...
- 【转】RS232、RS485、TTL电平、CMOS电平
原文网址:http://blog.sina.com.cn/s/blog_63a0638101018grc.html RS232.RS485.TTL电平.CMOS电平 什么是TTL电平.CMOS电平.R ...
- maven 知识点2
maven 命令: table th:first-of-type { width: 500px; } table th:nth-of-type(2) { } 命令 含义 mvn help:effect ...