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 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
随机推荐
- POJ青蛙的约会
青蛙的约会 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 114412 Accepted: 23446 Descript ...
- Python破解压缩包密码问题
所用知识 1. Pool 进程池 2. try...except 异常处理 3.枚举的方式 4.生成器的运用 逻辑关系 通过生成假密码去碰撞!捕获异常,一直碰撞,直到生成的密码与压缩包建立的密码对应, ...
- Awesome Flask
Awesome Flask A curated list of awesome Flask resources and plugins Awesome Flask Framework Admin i ...
- 刚安装的Linux Centos7使用yum安装firefox时提示：cannot find a valid baseurl for repo
出现这个问题是因为yum在安装包的过程中,虽然已经联网,但是没法解析远程包管理库对应的域名,所以我们只需要在网络配置中添加上DNS对应的ip地址即可. 解决参考链接:https://blog.csdn ...
- 【SpringCloud 】第八篇: 消息总线(Spring Cloud Bus)
前言: 必需学会SpringBoot基础知识 简介: spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选. ...
- Matlab R2016a 破解教程
郑重声明:图片来源于网络,在这里感谢图片提供者,我写这篇教程,是希望帮助后来者少走弯路,而且,这是一种比较简单有效的破解方法,针对网上那种修改本地文件的方法,在这里不做介绍,如果想体验,可自己百度或谷 ...
- Maxscript-获取选中文件
Maxscript - 获取选中文件 使用 .Net 的方法弹出窗口选择文件,并范围所有选中文件的路径“” Fn Fun_GetFilePaths strTitle strFilter = ( dia ...
- leetcode-最长上升子序列LIS
转载原文地址:http://www.cnblogs.com/GodA/p/5180560.html 给定一个无序的整数数组,找到其中最长上升子序列的长度. 示例: 输入: [10,9,2,5,3,7, ...
- JDK源码分析：Object.java
一. 序言 Object.java是一切类的基类,所以了解该类有一定的必要 二 .属性及方法分析 方法列表: private static native void registerNatives(); ...
- LeeCode第一次刷题（两数相加）
题目描述 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组 ...