布局display
什么是布局： 浏览器以正确的大小将元素摆放在正确的位置上。
布局：元素摆放的模式。
影响元素大小和位置的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的更多相关文章
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- 前端CSS3布局display:grid用法
前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...
- 前端CSS3布局display:flex用法
前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
- 弹性盒布局display:flex详解
一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...
- 布局display属性(一)--【Flex】
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...
- 自适应布局display:-webkit-box的用法
在web布局中,我们经常使用的是display:inline-block,display:flex,这些,但其实在进行移动端设备自适应布局中,-webkit-box布局更加合适 不同的浏览器有不同的前 ...
- 等高布局display：table
display:table用法: 父元素:display:table; 子元素:display:table-cell; 注:使用display:table-cell元素部分出现空白缝隙的问题:设置 . ...
- css3 伸缩布局 display:flex等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 上传文件被nginx全部缓存的问题
nginx采用1.5.6. 后端采用nodejs+formidable的方式接受上传文件,本问题的对应与采用什么样的后端没太大关系,这里只是交代一下. 问题: 在前端页面上将文件上传,nginx没有将 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（7）--实现省份、城市、行政区三者联动
为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此对基于MVC的Web界面继续进行一些研究和优化,力求在功能和界面上保持和Winform一致,本文 ...
- .NET项目开发的几个非常重要的项目设置
在开发.NET项目的时候,包括Winform项目和Web方面的项目,编译和部署的时候,都需要考虑到是32位的X86方式,还是64位的方式,有时候还需要进行调试,如果没有合理设置好这些关系,还可能出现无 ...
- Chrome 35个开发者工具的小技巧
来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览 ...
- C# 站点IP访问频率限制 针对单个站点
0x00 前言 写网站的时候,或多或少会遇到,登录,注册等操作,有时候,为了防止别人批量进行操作,不得不做出一些限制IP的操作(当前也可以用于限制某个账号的密码校验等). 这样的简单限制,我们又不想对 ...
- 【Java每日一题】20161018
20161017问题解析请点击今日问题下方的"[Java每日一题]20161018"查看 package Oct2016; public class Ques1018 { publ ...
- PHP发短信 PEAR 包：Services_Sms
PHP发短信 PEAR 包:Services_Sms 对于这种第三方库,PHP官方称之为PEAR,需要按照PEAR标准开发(标准URI). PEAR的优势:一键安装到php/lib/php目录,req ...
- jQuery Label Better – 友好的表单输入框提示插件
jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...
- Treed – 基于拖放 操作的，强大的树形编辑器
Treed 是一个功能强大的树型编辑组件.Treed 使用 MVC 模式,简单的构造可以帮助你轻松创建一个完全不同的树形视图.您也可以创建自己的“节点”类,如果你想要做的不仅仅是单一的文本输入. 您可 ...
- 15个最佳的代码评审（Code Review）工具
代码评审可以被看作是计算机源代码的测试,它的目的是查找和修复引入到开发阶段的应用程序的错误,提高软件的整体素质和开发者的技能.代码审查程序以各种形式,如结对编程,代码抽查等.在这个列表中,我们编制了1 ...