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

布局：元素摆放的模式。

影响元素大小和位置的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. Visual Studio 2012 Update 4 RC 启动调试失败解决方案

    以下解决办法适用于任何Visual Studio开发环境,及Windows NT 6.1以上系统. 系统:Windows 8.1 Enterprise x64 RTM 开发环境:Visual Stud ...

  2. jquery列表顺序倒转排序效果

    html文件代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

  3. CSRF 防御策略

    在业界目前防御 CSRF 攻击主要有三种策略:验证 HTTP Referer 字段:在请求地址中添加 token 并验证:在 HTTP 头中自定义属性并验证.下面就分别对这三种策略进行详细介绍. 验证 ...

  4. 【C#】第3章学习要点（三）--常用类和结构的用法

    分类:C#.VS2015 创建日期:2016-06-19 使用教材:(十二五国家级规划教材)<C#程序设计及应用教程>(第3版) 一.DateTime结构和TimeSpan结构 DateT ...

  5. WPF 将DLL嵌入EXE文件(安装包)

    网上很多例子,各种套路,就是没有测试过. WPF 将DLL嵌入EXE文件的套路是这样的 1.将要引用的dll源文件添加到wpf 项目中,dll 的属性->生成操作为[嵌入的资源]. 2.监听  ...

  6. mysql ，为什么一张表的varchar关联另一张表varchar执行失败的一个原因

    CONSTRAINT `orderdts_ibfk_2` FOREIGN KEY (`address`) REFERENCES `test列` (`address`) 很可能的原因是另一张表的test ...

  7. XE7 iOS 取得系统字型名称

    系统字型名称在每个平台的取得方式不尽相同,以下示范如何在 iOS 取得系统内所有字型的名称: uses // 加入下面二个 uses 文件 iOSapi.UIKit, iOSapi.Foundatio ...

  8. ActiveMQ消息队列介绍

    ActiveMQ是一个开源兼容Java Message  Service  (JMS) 1.1面向消息的中件间. 来自Apache Software Foundation. ActiveMQ提供松耦合 ...

  9. Java经典实例：在正则表达式中控制大小写

    默认是:区分大小写的: 传递标志参数:Pattern.CASE_INSENSITIVE,以说明匹配时忽略大小写:如果你的代码运行在不同的地区那么你应该再添加一个Pattern.UNICODE_CASE ...

  10. 基于NXBRE规则引擎实现的柔性折扣策略

    规则引擎由推理引擎发展而来,是一种嵌入在应用程序中的组件,实现了将业务决策从应用程序代码中分离出来,并使用预定义的语义模块编写业务决策.接受数据输入,解释业务规则,并根据业务规则做出业务决策.应用背景 ...