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

布局：元素摆放的模式。

影响元素大小和位置的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. 十五个常用的jquery代码段

    十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...

  2. Nancy 学习-自宿主 继续跨平台

    Nancy简介 Nancy是一个轻量级的独立的框架,下面是官网的一些介绍: Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台,框架的目标是保持尽可能 ...

  3. MVC之前的那点事儿系列（1）:进入CLR

    MVC之前的那点事儿系列,是笔者在2012年初阅读MVC3源码的时候整理的,主要讲述的是从HTTP请求道进入MVCHandler之前的内容,包括了原创,翻译,转载,整理等各类型文章,当然也参考了博客园 ...

  4. sql中 in , not in , exists , not exists效率分析

    in和exists执行时,in是先执行子查询中的查询,然后再执行主查询.而exists查询它是先执行主查询,即外层表的查询,然后再执行子查询. exists 和 in 在执行时效率单从执行时间来说差不 ...

  5. sql传入组合字符串批量操作

    批量操作时我们可以传入一个有规律的ID或则是其他唯一值字段的组合字符串,然后:select/update/inset......where  字段 in(传入的组合字符串),而且很多时候我们还涉及到其 ...

  6. tomcat 5.5、6、7各版本的web-app标准

    刚把上周说的公司内各工程的web.xml给统一了,顺便看了下每个tomcat版本对应的标准servlet版本,如下: The XSD version is preferred since JSP 2. ...

  7. 【转】PHP调试开发工具你认识多少？

    来源:PHP100中文网(http://www.php100.com/html/itnews/PHPxinwen/2009/0902/3257.html) PHP现在已经是使用最为广泛的开源服务器端脚 ...

  8. C++之面向对象的三个基本特征

    三大特性是:封装,继承,多态 所谓封装 就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.封装是面向对象的特征之一,是对象和类概念的主要特性. ...

  9. (原) 1.1 Zookeeper单机安装

    本文为原创文章,转载请注明出处,谢谢 zookeeper 单机安装配置 1.安装前准备 linux系统(此文环境为Centos6.5) Zookeeper安装包,官网https://zookeeper ...

  10. VS2010添加类失败问题,弹出错误框,提示 CodeModel操作失败，无法访问标记数据库

    我在使用VS2010添加类的时候,会弹出一个错误框,提示 CodeModel操作失败,可以无法访问标记数据库 英文版是 CodeModel operation failed,Possibly cann ...