什么是布局： 浏览器以正确的大小将元素摆放在正确的位置上。

布局：元素摆放的模式。

影响元素大小和位置的css属性： display  position   float  flex

display

设置元素的显示方式 ，包括 大小和位置 , display的取值有：

block

inline

inline-block

none

display : block

block元素又称为『块级元素』

特性:

1 .默认宽度为父元素宽度

2. 可以设置宽高

3. 换行显示( 前序元素 相对于 display : block 是换行显示的， 后续元素相对于 display : block 也是换行显示的。)

默认的html 元素中，  div, p , h1-h6, ul, form, … 默认的display 是  block

display : inline

红色边框为父级元素

display: line的特性：

1.默认宽度为内容宽度

2.不可设置宽高  ，因为行级元素是不可设置宽高的

3.同行显示。  如果 前序元素和后续元素都是 display:inline  (行级元素) ，那么他们是同行显示的。可以在元素内部换行。

默认display: inline 元素  span , a , label, cite , em, …

举个栗子:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>display_inline</title>

    <style type="text/css">

    .sample{

        background-color: pink;

    }

    /* 行级元素设置宽高无效 */

    .sample{

        width: 200px;

        height: 200px;

    }

    /* 指定em为块级元素 ，块级元素换行显示（自身相对前序元素是换行的）*/

    em{

        display: block;

    }

    </style>

</head>

<body>

<span>before inline</span>

<span class="sample">display : inline;</span>

<em>after inline</em>

</body>

</html>

block vs inline 对比

display 默认宽度 可设置高度 起始位置

block

父元素宽度

是

换行

inline

内容宽度

否

同行

display : inline-block

图1

图二

图三

display: inline-block 特性

1.默认宽度为内容宽度  (图一所示)

2.可设置宽高

3.同行显示 (图三所示)

4.整块换行 如果超过了 inline-block的宽度，会『整行换行』。而『inline』是可以在『元素内』换行的。

默认 display: inline-block 元素  input , textarea , select , button …

举一个栗子:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>display_inline-block</title>

    <style type="text/css">

    .sample{

        background-color: pink;

    }

    .sample{

        display: inline-block;

    }

    .sample{

        width: 200px;

        height: 200px;

    }

    /* inline-block元素还具有其他inline元素的特征 ,  比如设置垂直居中（由于sample比较高，所以sample的前序和后序两个元素在『一行』垂直居中）*/

    .sample{

        vertical-align: middle;

    }

    </style>

</head>

<body>

<span>before inline-block</span>

<span class="sample">display : inline-block;</span>

<em>after inline-block</em>

</body>

</html>

display : none

设置元素不显示

dislplay: none  vs visibility:hidden

visibility:hidden会继续占据位置。

举个栗子:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>display_none vs visibility_hidden</title>

    <style type="text/css">

    .parent{

        margin: 30px;

        border: 1px solid pink;

    }

    .dn{

        /*display: none;*/

    }

    .vh{

        /*visibility: hidden;*/

    }

    </style>

</head>

<body>

<div class="parent">

        <div class="dn">display : none;</div>

</div>

<div class="parent">

        <div class="vh">visibility : hidden;</div>

</div>

</body>

</html>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

布局display的更多相关文章

  1. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  2. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  3. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  4. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  5. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  6. 布局display属性(一)--【Flex】

    一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...

  7. 自适应布局display:-webkit-box的用法

    在web布局中,我们经常使用的是display:inline-block,display:flex,这些,但其实在进行移动端设备自适应布局中,-webkit-box布局更加合适 不同的浏览器有不同的前 ...

  8. 等高布局display：table

    display:table用法: 父元素:display:table; 子元素:display:table-cell; 注:使用display:table-cell元素部分出现空白缝隙的问题:设置 . ...

  9. css3 伸缩布局 display:flex等

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. HtmlAgilityPack 处理通配的contains

    //选择不包含class属性的节点 var result = node.SelectNodes(".//span[not(@class)]"); //选择不包含class和id属性 ...

  2. Microsoft Visual Studio Ultimate 2013 Update 2 RC 英文版--离线完整安装ISO+简体中文语言包

    VS2013.2_RC_EN_Full.iso:名称:Microsoft Visual Studio 2013版本:Ultimate 2013 Update 2 RC语言:English在线下载:ht ...

  3. IIS MIME类型大全

    文件如果下载不了,可能是iis中的MIME设置问题.格式前面为后辍名,后面为对应的MIME型(例如:rar application/x-rar-compressed 表示.RAR对应的是applica ...

  4. Repository 设计模式介绍

    在DDD设计中大家都会使用Repository pattern来获取domain model所需要的数据. 1.什么是Repository? "A Repository mediates b ...

  5. C#中使用Sql对Excel条件查询

    如何在C#中实现对Excel的条件查询呢? 在使用Sql条件语句对Excel进行查询时,遇到"至少一个参数没有被指定值"的问题,如何解决? 使用OleDbConnection对象创 ...

  6. LeetCode122:Best Time to Buy and Sell Stock II

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  7. 一个奇葩常见的问题 nginx 403 forbidden错误

    今天安装dedecms,配置Nginx,然后生成一键生成静态页面,然后就没有然后了,所有栏目页面都显示nginx 403 forbidden. 一般来说nginx 的 403 Forbidden er ...

  8. sina sae开发中出现的问题

    都是些小问题,但既然出现了,下次就该避免! 网站加载速度慢: 1.安装 Disable Google Fonts 字体插件即可  2.删代码 http://jingyan.baidu.com/arti ...

  9. NOSQL学习笔记系列之MongoDB 一 基础

    主题:MongoDB 学习资料参考网址: 1.http://www.w3cschool.cc/mongodb/mongodb-tutorial.html 2.http://www.icoolxue.c ...

  10. 引用计数 vs. GC

    内存管理问题 内存管理是编程过程中的一个经典问题,早期在 C 语言时代,几乎都靠 malloc/free 手动管理内存.随着各个平台的发展,到现在被广泛采用的主要有两个方法: 引用计数 (ARC,Au ...