css之display样式,padding,margin
1. 块级标签变成行内标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color:red;display:inline;">123</div>
<span style="background-color:red">123</span>
</body>
</html>
效果：
2. 行内标签变成块级标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color:red;display:inline;">123</div>
<span style="background-color:red;display:block;">123</span>
</body>
</html>
运行结果：
3. display:none; 让标签消失。display:block/inline;标签恢复。
display: inline;
display:block;
display:inline-block; 兼有两者的属性（具有inline,默认自己有多少占多少；具有block，可以设置高度，宽度等。）
行内标签：无法设置高度，宽度，边距，padding, margin
块级标签：可以设置高度，宽度，边距，padding, margin。默认占父亲标签的100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span style="display:inline-block;background-color:red;height:50px;width:70px;">Alex</span>
<a style="background-color:red;">Eric</a>
</body>
</html>
运行结果：
4.padding：内边距 padding-top10px,
margin：外边距 margin-top:10px,（针对里面div说的）蓝色部分。div本身的大小没有发生变化。只是它跟父亲之间的距离变大了。
pading:内边距，也是相对于内部的div来说的。（原意：填料）
5.margin的另一个用处：<body style="margin:0 auto;">
默认情况下html两边是有边距的。就去掉了外边距了。就从最角落起开始了。
<div style="width:980px; margin:0 auto">
css之display样式,padding,margin的更多相关文章
- CSS之display样式
一.前言 行内标签:类似span,无法设置高度,宽度,padding,margin 块级标签:类似div,可以设置高度,宽度,padding,margin 默认情况下是这个样子的,但是可以通过disp ...
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
- CSS padding margin border属性详解
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- CSS padding margin border属性详解【转载】
本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...
- 转-CSS padding margin border属性详解
原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...
- [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器？
为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器? ul标签在FF中默认是有padding值的,而在IE中仅仅有margin默认有值.请看下面不同浏览中对paddi ...
- 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
随机推荐
- 成都Uber优步司机奖励政策（2月19日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- DSP5509的ADC实验
1. 本次使用esay5509开发板,具体做这个板子叫做大道科技. 2. 5509有2个ADC的输入引脚,就是2个采集通道 3. 看下ADC的寄存器 4. 看下代码中怎么引用ADC的寄存器的,这种写法 ...
- VMWare虚拟机下 centos network is unreachable 问题的解决
vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 BOOTPROTO=static BROADCAST=192.168.1.255 HW ...
- Java开发工程师(Web方向) - 01.Java Web开发入门 - 第5章.Git
第5章--Git 版本控制简介 VCS (version control system) 版本控制系统:记录若干文件的修订记录的系统,帮助查阅/回到某个历史版本 LVCS本地 CVCS集中式(Cent ...
- Zookeeper 分布式应用
简介 这篇文章是旨在为那些想要利用zookeeper协调服务能力进行分布式应用创建的开发者的入门指导,包括一些理论性和实践性的内容. 文章的前四部分系统的介绍了zookeeper的相关概念,对于理解z ...
- Python2快速入门教程，只需要这十五张图片就够了！
今天给大家分享的教程是适用于Python 2.7,但它可能适用于Python 2.Python 2.7将停止在2020中的支持. 与Python 2.7和3兼容的Python代码是完全可能的.通过使用 ...
- spark dataset join 使用方法java
dataset<Row> df1,df2,df3 //该方法可以执行成功 df3= df1.join(df2,"post_id").selectExpr("h ...
- I Hate It：线段树：单点修改+区间查询
I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- STM32串口通信UART使用
STM32串口通信UART使用 uart使用的过程为: 1. 使能GPIO口和UART对应的总线时钟 2. 配置GPIO口的输出模式 3. 配置uart口相关的基本信息 4. 使能uart口的相关的中 ...
- Caused by: java.lang.NoClassDefFoundError: javax/el/ELManager
出现问题的原因: 在将springboot项目部署到Linux下的Tomcat中,项目无法正常启动(本地能正常运行),Tomcat启动日志中出现: Caused by: java.lang.NoCla ...