CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)
display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox |flex | inline-flex
默认值:inline
适用于:所有元素
继承性:无
动画性:否
计算值:指定值,除浮动,绝对定位和根元素外
取值:
- none:
- 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
- inline:
- 指定对象为内联元素。
- block:
- 指定对象为块元素。
- list-item:
- 指定对象为列表项目。
- inline-block:
- 指定对象为内联块元素。(CSS2)
- table:
- 指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
- inline-table:
- 指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
- table-caption:
- 指定对象作为表格标题。类同于html标签<caption>(CSS2)
- table-cell:
- 指定对象作为表格单元格。类同于html标签<td>(CSS2)
- table-row:
- 指定对象作为表格行。类同于html标签<tr>(CSS2)
- table-row-group:
- 指定对象作为表格行组。类同于html标签<tbody>(CSS2)
- table-column:
- 指定对象作为表格列。类同于html标签<col>(CSS2)
- table-column-group:
- 指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
- table-header-group:
- 指定对象作为表格标题组。类同于html标签<thead>(CSS2)
- table-footer-group:
- 指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
- run-in:
- 根据上下文决定对象是内联对象还是块级对象。(CSS3)
- box:
- 将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
- inline-box:
- 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
- flexbox:
- 将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
- inline-flexbox:
- 将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
- flex:
- 将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
- inline-flex:
- 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
float:none | left | right
默认值:none
适用于:所有元素
继承性:无
动画性:否
计算值:指定值
取值:
- none:
- 设置对象不浮动
- left:
- 设置对象浮在左边
- right:
- 设置对象浮在右边
说明:
clear:none | left | right | both
默认值:none
适用于:块级元素
继承性:无
动画性:否
计算值:指定值
取值:
- none:
- 允许两边都可以有浮动对象
- both:
- 不允许有浮动对象
- left:
- 不允许左边有浮动对象
- right:
- 不允许右边有浮动对象
说明:
- 对应的脚本特性为clear。
visibility:visible | hidden | collapse
默认值:visible
适用于:所有元素
继承性:有
动画性:是
计算值:指定值
取值:
- visible:
- 设置对象可视
- hidden:
- 设置对象隐藏
- collapse:
- 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。
说明:
- 如果希望对象为可视,其父对象也必须是可视的。
- 对应的脚本特性为visibility。
overflow:<overflow-style>
<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls |fragments
默认值:visible
适用于:块容器,伸缩盒容器,grid容器
继承性:无
动画性:否
计算值:指定值
取值:
- visible:
- 对溢出内容不做处理,内容可能会超出容器。
- hidden:
- 隐藏溢出容器的内容且不出现滚动条。
- scroll:
- 隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
- auto:
- 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
- paged-x:
- TODO...(CSS3)
- paged-y:
- TODO...(CSS3)
- paged-x-controls:
- TODO...(CSS3)
- paged-y-controls:
- TODO...(CSS3)
- fragments:
- TODO...(CSS3)
* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
说明:
- overflow的效果等同于overflow-x + overflow-y。
- 对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。
- 对应的脚本特性为overflow。
overflow-x:<overflow-style>
<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls |fragments
默认值:visible
适用于:块容器,伸缩盒容器,grid容器
继承性:无
动画性:否
计算值:指定值
取值:
- visible:
- 对溢出内容不做处理,内容可能会超出容器。
- hidden:
- 隐藏溢出容器的内容且不出现滚动条。
- scroll:
- 隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
- auto:
- 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
- paged-x:
- TODO...(CSS3)
- paged-y:
- TODO...(CSS3)
- paged-x-controls:
- TODO...(CSS3)
- paged-y-controls:
- TODO...(CSS3)
- fragments:
- TODO...(CSS3)
* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
说明:
overflow-y:<overflow-style>
<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls |fragments
默认值:visible
适用于:块容器,伸缩盒容器,grid容器
继承性:无
动画性:否
计算值:指定值
取值:
- visible:
- 对溢出内容不做处理,内容可能会超出容器。
- hidden:
- 隐藏溢出容器的内容且不出现滚动条。
- scroll:
- 隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
- auto:
- 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
- paged-x:
- TODO...(CSS3)
- paged-y:
- TODO...(CSS3)
- paged-x-controls:
- TODO...(CSS3)
- paged-y-controls:
- TODO...(CSS3)
- fragments:
- TODO...(CSS3)
* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
说明:
CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)的更多相关文章
- CSS布局 ——从display,position, float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- css中的display(显示)和visibility(可见性)
display定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险, ...
- [浅谈CSS核心概念] CSS布局模型:float和position
1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...
- CSS布局之display: tables布局
首先来看看display: table的兼容性: 可以看到,除非你还要跟IE6/7较劲,否则display: table不需考虑兼容性. 接下来看看关于table的display可选值: table: ...
- CSS布局 ——从display,position, float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
- CSS布局模型学习(Float、Position、Flexbox)
一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...
- CSS布局属性
一.弹性盒模型介绍 1.弹性盒模型介绍 — 基础知识 弹性盒模型( Flexible Box 或 Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout M ...
- 浅析css布局模型1
css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...
- css 可继承属性 display:inline-block 历史
1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...
随机推荐
- Paip.声明式编程以及DSL 总结
Paip.声明式编程以及DSL 总结 1.1 声明式编程DSL 1.2 声明式语言) 1.3 声明式编程框架AOP实现 1.4 应用场合 1.5 ...
- 海康威视 NET_DVR_FindFile NET_DVR_PlayBackByTime 尝试读取或写入受保护的内存,这通常指示其他内存已损坏
从农民伯伯那下载的代码 NET_DVR_PlayBackByTime NET_DVR_FindFile 这两个方法执行不了 下面是我改的 经过测试了 [DllImport("HCNetSDK ...
- Cento OS 6.5 YUM 安装 R 的方法
(1)配置yum (2)安装EPEL YUM源 yum install epel-release 修改源配置文件/etc/yum.repos.d/epel.repo ,把基础的恢复,镜像的地址注释掉 ...
- javaweb学习总结(四)——Http协议
一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...
- MyEclipse使用总结——在MyEclipse中设置jsp页面为默认utf-8编码
在MyEclispe中创建Jsp页面,Jsp页面的默认编码是“ISO-8859-1”,如下图所示: 在这种编码下编写中文是没有办法保存Jsp页面的,会出现如下的错误提示: 因此可以设置Jsp默认的编码 ...
- PHP读取流文件
$filepath = 'http://www.vip.com/down'; $fp = fopen($filepath,"r"); Header("Content-ty ...
- Clojure的并行与并发
这次来聊聊clojure的并行与并发,如果你还不知clojure为何物,请翻翻我的上一篇推文.“并行”是指clojure对并行计算的支持(parallel computing),“并发”是其并发特性( ...
- 测试markdown发布
- 如何增强 Linux 系统的安全性,第一部分: Linux 安全模块(LSM)简介
http://www.ibm.com/developerworks/cn/linux/l-lsm/part1/ 1.相关背景介绍:为什么和是什么 近年来Linux系统由于其出色的性能和稳定性,开放源代 ...
- Nginx负载均衡 后端服务器怎么共享Session 问题
Nginx负载均衡 Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1).轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端 ...