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

布局：元素摆放的模式。

影响元素大小和位置的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. “Win10 UAP 开发系列”之 在MVVM模式中控制ListView滚动位置

    这个扩展属性从WP8.1就开始用了,主要是为了解决MVVM模式中无法直接控制ListView滚动位置的问题.比如在VM中刷新了数据,需要将View中的ListView滚动到顶部,ListView只有一 ...

  2. 常用的一些SQL语句整理，也许有你想要的。

    本篇文章是对一些常用的sql语句进行了总结与分析,需要的朋友参考下,也许会有你需要的. 1.SQL行列转换 问题:假设有张学生成绩表(tb)如下:姓名 课程 分数张三 语文 74张三 数学 83张三 ...

  3. IT技术开发人员获得成功的六大步骤

    IT技术开发人士成功的6大步骤 一个前辈在移民加拿大后写的文章,写得不错,值得借鉴,转来给大家看看,也给自己   序言:经过001多年的洗礼,认识了这里这么多的JJMMGGDD,前几天刚得到签证, 无 ...

  4. Redis使用总结

    1.Redis安装 redis的安装非常的简单,而且Redis并不依赖其他环境和标准库,很容易上手,这可能也是它流行的一个原因.这里为了测试方便,用的都是windows 环境下测试.下载Windows ...

  5. MVC部分视图的巧用

    View视图界面 @{ Html.RenderAction("demo", "", new { id = ViewBag.id });} 请求的控制器方法 pu ...

  6. cros解决跨域

  7. 程序员下一门要学的编程语言Swift

    基于PHP是世界上最好的编程语言这个真理,我一直认为Hack才是程序员要学的下一门编程语言. 但今天看到InfoQ放出的新闻:"Google或许会将Swift编程语言纳入Android平台并 ...

  8. Yii2框架打包成Phar包报错的经历

    以yii2为例 打包文件过程比较简单,但打包好以后简单测试yii命令,一直报错: PHP Fatal error: Uncaught yii\base\InvalidParamException: T ...

  9. Java集合源码分析（一）

    Java集合工具包位于Java.util包下,包含了很多常用的数据结构,如数组.链表.栈.队列.集合.哈希表等.学习Java集合框架下大致可以分为如下五个部分:List列表.Set集合.Map映射.迭 ...

  10. Maven+SSM框架实现简单的增删改查

    Spring介绍: spring 使用基本的 JavaBean 来完成以前只可能由 EJB 完成的事情.然而, Spring的用途不仅限于服务器端的开发.从简单性.可测试性和松耦合的角度而言,任何Ja ...