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. 优步北京B组奖励政策

    用户组:优步北京B组(2015年7月20日前激活的部分司机) 更新日期:2015年8月4日 滴滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最 ...

  2. CF 1033 C. Permutation Game

    C. Permutation Game http://codeforces.com/contest/1033/problem/C 题意: 一个排列,每个位置i走到的位置j满足:a[j]>a[i] ...

  3. EWS3-24S05电源转换芯片DC-DC

    1. EWS3-24S05是24V转5V的DC-DC电源,输入和输出都是直流电. 2. 典型应用 3. 引脚图 4. 使用注意事项: 输入电源的要求 输入电源的要求产品的输入端必需接一个低阻抗的电压源 ...

  4. 面试遇到的订单表sql的解决方案

    对于以下需求:用户表:users (user_id  int)订单表:order_tb(user_id int, or_time  date, or_money double)求以下用户:一月下过单, ...

  5. spring + mybatis 注解 @Transactional失效

    1.问题 在使用@Transactional注解管理事务的时候会出现很多错误,比如: *** was not registered for synchronization because synchr ...

  6. Qt-QML-QML调用C++类

    QML用来做界面,在不考虑数据的请款下,那是溜溜的,但是,程序是没有不和后台数据交互的,但是了,QML在数据处理方面的效率又是不敢恭维的,这里就出现了QML负责前端界面,而后端使用JS或者C++了. ...

  7. Python3.5+selenium(11)脚本模块化&参数化

    mail126.py脚本如下 from selenium import webdriver from time import sleep from model1 import Login driver ...

  8. lesson 20 pioneer pilots

    lesson 20 Pioneer pilots driver pilot rider cyclist 骑自行车的人 介词后不加that cover + 距离 = travel 了一段距离 by su ...

  9. Java并发基础--volatile关键字

    一.java内存模型 1.java内存模型 程序运行过程中的临时数据是存放在主存(物理内存)中,但是现代计算机CPU的运算能力和速度非常的高效,从内存中读取和写入数据的速度跟不上CPU的处理速度,在这 ...

  10. 【shell 练习5】编写简单的多级菜单

    一.简单的多级菜单 [root@web129 ~]# cat menu.sh #!/bin/bash #shell菜单演示 function menu() { echo -e `date` cat & ...