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的更多相关文章

  1. CSS之display样式

    一.前言 行内标签:类似span,无法设置高度,宽度,padding,margin 块级标签:类似div,可以设置高度,宽度,padding,margin 默认情况下是这个样子的,但是可以通过disp ...

  2. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  3. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  4. CSS padding margin border属性详解【转载】

    本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...

  5. 转-CSS padding margin border属性详解

    原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...

  6. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  7. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  8. 为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器?

    为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器? ul标签在FF中默认是有padding值的,而在IE中仅仅有margin默认有值.请看下面不同浏览中对paddi ...

  9. 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

随机推荐

  1. ASP.NET中Gridview一些技巧

    ASP.NET中Gridview一些技巧 一.后台覆盖掉Gridview中自动填充的值 我们可以再Gridview中的事件触发的过程中修改其中的值,而这些值将会在具体的运行过程中覆盖掉那些自动属性.这 ...

  2. Java开发工程师(Web方向) - 02.Servlet技术 - 第3章.Servlet应用

    第3章.Servlet应用 转发与重定向 转发:浏览器发送资源请求到ServletA后,ServletA传递请求给ServletB,ServletB生成响应后返回给浏览器. 请求转发:forward: ...

  3. Android 修改系统默认density

    如你所知在Anroid N 中,系统添加了多个级别的密度值供用户选择. 系统的默认的值就是 ro.sf.lcd_density 同时其他级别的默认值的大小基础也是以默认值为基础,然后乘以不同的比例得到 ...

  4. python切片技巧

    写一个程序,打印数字1到100,3的倍数打印“Fizz”来替换这个数,5的倍数打印“Buzz”,对于既是3的倍数又是5的倍数的数字打印“FizzBuzz” for x in range(101): p ...

  5. 关于Python3中函数:

    # 关于Python3中函数: - 定义 定义函数使用关键字def,后接函数名和放在圆括号()中的可选参数列表,函数内容以冒号起始并且缩进.一般格式如下:``` def 函数名(参数列表): &quo ...

  6. JavaScript 之 对象/JSON/数组

    对象 简单说,所谓对象,就是一种无序的数据集合,由若干个“键值对”(key-value)构成. var obj = { p: 'Hello World' }; 上面代码中,大括号就定义了一个对象,它被 ...

  7. 第一个线性回归程序(基于Jupyter)

    import pandas as pdimport seaborn as snssns.set(context="notebook", style="whitegrid& ...

  8. maven项目中没有resource文件夹的问题

    之前使用eclipse创建maven项目,文件夹都是建好的,这几次创建,都没有resource文件夹,需要手动创建resource. 现象描述 在eclipse中,创建maven项目有两种方式: 一种 ...

  9. Bus of Characters(栈和队列)

    In the Bus of Characters there are nn rows of seat, each having 22 seats. The width of both seats in ...

  10. 域名加www与不加www不一样结果的解决办法

    有些浏览器域名访问加www 与不加www出现的页面不一样.在aj请求的时候也不同.firefox与google新版本的都会自动加上www. 比如 访问haitaohua.com,但aj请求的时候是带w ...