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 ...
随机推荐
- iOS开发之静态库(五)—— 图片、界面xib等资源文件封装到静态框架framework
编译环境:Macbook Air + OS X 10.9.2 + XCode5.1 + iPhone5s(iOS7.0.3) 一.首先将资源文件打包成bundle 由于bundle是静态的,所以可以将 ...
- Spring MVC 文件上传下载
本文基于Spring MVC 注解,让Spring跑起来. (1) 导入jar包:ant.jar.commons-fileupload.jar.connom-io.jar. (2) 在src/cont ...
- Python核心编程笔记(类)
Python并不强求你以面向对象的方式编程(与Java不同) # coding=utf8 class FooClass(object): version = 0.1 def __init__(self ...
- nginx用户认证配置( Basic HTTP authentication)
ngx_http_auth_basic_module模块实现让访问着,只有输入正确的用户密码才允许访问web内容.web上的一些内容不想被其他人知道,但是又想让部分人看到.nginx的http aut ...
- android如何播放和录制音频
视频录制功能正在走来,在Androidsdk中有与之相关的类:android.media.MediaRecorder.当然,因为模拟器上没有提供必要的硬件设施,所以在学习过程中并不能实现.Media能 ...
- 将 Book-Crossing Dataset 书籍推荐算法中 CVS 格式测试数据集导入到MySQL数据库
本文内容 最近看<写给程序员的数据挖掘指南>,研究推荐算法,书中的测试数据集是 Book-Crossing Dataset 提供的亚马逊用户对书籍评分的真实数据.推荐大家看本书,写得不错, ...
- java目录
1. 在jsp文件或Servlet中,可以通过getServletContext().getRealPath("/")来获取项目根目录的绝对路径. 2. Java桌面程序中,可以通 ...
- ios开发中的Swift面向对象
iOS在现代计算机语言中,面向对象是非常重要的特性,Swift语言也提供了面向对象的支持.而且在Swift语言中,不仅类具有面向对象特性,结构体和枚举也都具有面向对象特性. 1.Swift中的类和结构 ...
- http协议读书笔记3-Web服务器
一.web服务器的实现 web服务器逻辑实现了HTTP协议和相关的TCP连接处理,管理着web资源,并负责提供Web服务器的管理功能.web服务器逻辑和操作系统共同负责管理TCP连接.底层操作系统负责 ...
- Android TextUtils类介绍
对于字符串处理Android为我们提供了一个简单实用的TextUtils类,如果处理比较简单的内容不用去思考正则表达式不妨试试这个在android.text.TextUtils的类,主要的功能如下: ...