"display"属性

display 是CSS中最重要的用于控制布局的属性。

每个元素都有一个默认的 display 值,这与元素的类型有关。

对于大多数元素它们的默认值通常是 block 或 inline 。

一个 block 元素通常被叫做块级元素。

一个 inline 元素通常被叫做行内元素。

block

<div>

div 是一个标准的块级元素。

一个块级元素会新开始一行并且尽可能撑满容器。

其他常用的块级元素包括 p 、 form 和HTML5中的新元素: header 、 footer 、 section 等等。

</div>

 

inline

span 是一个标准的行内元素。

一个行内元素可以在段落中 <span> 像这样 </span>包裹一些文字而不会打乱段落的布局。

a 元素是最常用的行内元素,它可以被用作链接。

none

另一个常用的display值是 none 。

一些特殊元素的默认 display 值是它,例如 script

display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。

把 display 设置成 none 元素不会占据它本来应该显示的空间,但是设置成 visibility: hidden; 还会占据空间。

其他 display 值

还有很多的更有意思的 display 值,例如 list-item 和 table 。

这里有一份详细的列表

之后我们会讨论到 inline-block 和 flex 。

额外加分点

就像我之前讨论过的,每个元素都有一个默认的 display 类型。

不过你可以随时随地的重写它!

虽然“人为制造”一个行内元素可能看起来很难以理解,不过你可以把有特定语义的元素改成行内元素。

常见的例子是:把 li 元素修改成 inline,制作成水平菜单。

原文地址:http://zh.learnlayout.com/display.html

学习CSS布局 - dispaly属性的更多相关文章

  1. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  2. “学习CSS布局” 笔记

    学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...

  3. (十二)学习CSS之display属性

    参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...

  4. 学习css之文本属性

    css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段 ...

  5. (十一)学习CSS之float属性

    参考:http://www.w3school.com.cn/cssref/pr_class_float.asp 定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕 ...

  6. (五)学习CSS之line-height属性

    参考:http://www.jb51.net/w3school/css/pr_dim_line-height.htm line-height 属性设置行间的距离(行高). 注释:不允许使用负值. 值 ...

  7. 学习CSS布局 - position

    position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...

  8. 学习CSS布局 - box-sizing

    box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素 ...

  9. 学习CSS布局 - 没有布局

    如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏 ...

随机推荐

  1. openvswitch技术总结

    OVS技术总结 一.OVS的组成 二.OVS的匹配条件和动作 三.OVS的发展方向 四.OVS的操作实践 OVS与Namespace配合模拟租户之间的数据通信 基本思路: Namespace模拟出不同 ...

  2. Android 时间与日期操作类

    获取本地日期与时间 public String getCalendar() { @SuppressLint("SimpleDateFormat") SimpleDateFormat ...

  3. Expo大作战(三十二)--expo sdk api之Noifications

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  4. Ubuntu16.04升级 Ubuntu18.04

    1.更新资源 $ sudo apt-get update $ sudo apt-get upgrade $ sudo apt dist-upgrade 2.安装update-manager-core ...

  5. (其他)最常用的15大Eclipse开发快捷键技巧

    转自CSDNJava我人生(陈磊兴)   原文出处 引言 做java开发的,经常会用Eclipse或者MyEclise集成开发环境,一些实用的Eclipse快捷键和使用技巧,可以在平常开发中节约出很多 ...

  6. JavaScript大杂烩4 - 理解JavaScript对象的继承机制

    JavaScript是单根的完全面向对象的语言 JavaScript是单根的面向对象语言,它只有单一的根Object,所有的其他对象都是直接或者间接的从Object对象继承.而在JavaScript的 ...

  7. Linux 查看本机串口方法

    最近在了解嵌入式方面的知识,就随笔记录一下: 查看Linux本机串口: 1.查看串口是否可用 可以对串口发送数据比如对com1口,echo /dev/ttyS02.查看串口名称使用 ls -l /de ...

  8. weblogic CVE-2018-2628漏洞利用工具

    weblogic CVE-2018-2628漏洞利用 漏洞环境: Windows2018R2 weblogic10.3.6 漏洞利用过程: 搭建好存在CVE-2018-2628漏洞的weblogic平 ...

  9. Oracle 表操作(转)

    1.增加新字段:alter table table_name add (name varchar(20) default 'http://www.zangjing.net/');. 2.修改表字段:a ...

  10. C# show和showdialog区别

    简单地说他们的区别就是show弹出来的窗体和父窗体(上一个窗体的简称)是属于同一等级的,这两个窗体可以同时存在而且可以随意切换,但是showdialog弹出来的窗体就不能这样,他永远是被置顶的,如果不 ...