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. wireshark抓包分析——TCP/IP协议

    本文来自网易云社区 当我们需要跟踪网络有关的信息时,经常会说"抓包".这里抓包究竟是什么?抓到的包又能分析出什么?在本文中以TCP/IP协议为例,简单介绍TCP/IP协议以及如何通 ...

  2. C#调用大漠插件，发送QQ和微信消息

    大漠插件就不过多介绍了,不知道的请查下百度.主要是讲解C#怎么调用大漠插件. 大漠插件提供了COM版本,C#直接点击引用,添加即可.然后注册下大漠插件到系统文件夹,注册代码如下: static str ...

  3. python处理dict转json，字符串中存在空格问题，导致url编码时，存在多余字符

    在进行urlencode转换请求的参数时,一直多出一个空格,导致请求参数不正确,多了一个空格,解决方法一种是将dict中key-value键值对的value直接定义为字符串,另一种是value仍然为字 ...

  4. 跟浩哥学自动化测试Selenium -- 我的第一个Demo (2)

    我的第一个Demo 开始写第一个 Demo 之前,先熟悉一下编写 Selenium 脚本的四个步骤: 驱动路径写法分析:System.setProperty 主要做用是设置系统属性,第一个参数为系统属 ...

  5. Django - day01 快速回忆ORM操作

    Django - day01 Model的增删改查找 得益于Django的ORM模型,用面向对象的思想来操作数据库使得数据库的操作一切变得简洁了很多. 0. 建表 在应用下的models.py中建立一 ...

  6. TW实习日记：第28天

    同前两天一样,等接口,开发,调试接口.重复地做着低级代码得搬运工作,确实挺没意思的.怪不得有些人一直说写低级代码很无聊,没有创造性和成就感.31号准备溜了,还是好好复习准备秋招吧. 挖坑清单: Vue ...

  7. 【wx:if】小程序条件渲染的使用说明

    语法,以view为例: <view xw:if="{{条件}}">aaaa</view> <view xw:elif="{{条件}}&quo ...

  8. [Clr via C#读书笔记]Cp14字符字符串和文本处理

    Cp14字符字符串和文本处理 字符 System.Char结构,2个字节的Unicode,提供了大量的静态方法:可以直接强制转换成数值: 字符串 使用最频繁的类型:不可变:引用类型,在堆上分配,但是使 ...

  9. java学习过程小问题

    一:基本的需要注意点(基础语句); package my; public class hello { public static void main(String[] args) { // TODO ...

  10. 您的下个中文网站可以使用的5个高质量中文Webfont

    你有没有考虑为什么中文网站的版式风格不像大多数现代英文网站那样丰富?您想了解如何让您的下一个中文网站项目更吸引用户的眼球么?继续往下读吧…… 根据Smashing Magazine进行的一项调查显示  ...