CSS样式表(二)
【layout】
clear:该属性的值指出了不允许有浮动对象的边。
默认值:none
none: 允许两边都可以有浮动对象
both: 不允许有浮动对象
left: 不允许左边有浮动对象
right: 不允许右边有浮动对象
--------------------------------------------------------------------------------------------------------
display:设置或检索对象是否及如何显示。
如果display设置为none,float及position属性定义将不生效;
如果position既不是static也不是relative,float属性定义将不生效;
IE7及更早浏览器只支持 none | inline | block | inline-block | list-item 属性值;
Opera12.10及以上已支持直接写属性值:flex | inline-flex 而不用加前缀;
none: 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline: 指定对象为内联元素。
block: 指定对象为块元素。
list-item: 指定对象为列表项目。
(CSS2所使用的属性)
inline-block: 指定对象为内联块元素。
table: 指定对象作为块元素级的表格。类同于html标签
inline-table: 指定对象作为内联元素级的表格。类同于html标签
table-caption: 指定对象作为表格标题。类同于html标签
table-row-group: 指定对象作为表格行组。类同于html标签
table-column: 指定对象作为表格列。类同于html标签
table-column-group: 指定对象作为表格列组显示。类同于html标签
table-header-group: 指定对象作为表格标题组。类同于html标签
table-footer-group: 指定对象作为表格脚注组。类同于html标签
(CSS3所用属性)
compact: 分配对象为块对象或基于内容之上的内联对象
run-in: 根据上下文决定对象是内联对象还是块级对象。
如果run-in元素包含了一个块级元素,run-in元素将变成块级元素;
如果块内有一个块级元素(非float和position定义)紧跟run-in元素之后,run-in元素将变成块内第一个内联元素;一个run-in元素不能插入开始已有run-in元素或者本身就是run-in元素的块中;
其它情况下,run-in元素都将是一个块级元素;
ruby: 将对象作为表格脚注组显示
ruby-base: 将对象作为表格脚注组显示
ruby-text: 将对象作为表格脚注组显示
ruby-base-group: 将对象作为表格脚注组显示
ruby-text-group: 将对象作为表格脚注组显示
flex: 将对象作为弹性盒模型显示
inline-flex: 将对象作为内联块级弹性盒模型显示
----------------------------------------------------------------------------------------------------------------
float: 该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。
float在绝对定位和display为none时不会被应用。
none: 设置对象不浮动
left: 设置对象浮在左边
right: 设置对象浮在右边
-----------------------------------------------------------------------------------------------------------------
overflow: 复合属性。检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
默认值:visible
如果只提供一个,其作用等同于overflow-x + overflow-y。
如果提供两个,第一个等同于overflow-x,第二个等同于overflow-y。
对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。
visible: 不剪切内容。
hidden: 将超出对象尺寸的内容进行裁剪,将不出现滚动条。
scroll: 将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。
auto: 在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。
no-display: 当内容不适合当前内容盒子时,整个盒子将被移除,类似display:none。(CSS3)
no-content: 当内容不适合当前内容盒子时,整个内容被隐藏,类似visibility:hidden。(CSS3)
----------------------------------------------------------------------------------------------------------
overflow-x:检索或设置当对象的内容超过其指定宽度时如何管理内容。
默认值:visible
visible: 不剪切内容。
hidden: 将超出对象宽度的内容进行裁剪,将不出现滚动条。
scroll: 将超出对象宽度的内容进行裁剪,并以滚动条的方式显示超出的内容。
auto: 在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。
no-display: 当内容不适合当前内容盒子时,整个盒子将被移除,类似display:none。
no-content: 当内容不适合当前内容盒子时,整个内容被隐藏,类似visibility:hidden。
------------------------------------------------------------------------------------------------------------------
overflow-y:索或设置当对象的内容超过其指定高度时如何管理内容。
默认值:visible
visible: 不剪切内容。
hidden: 将超出对象高度的内容进行裁剪,将不出现滚动条。
scroll: 将超出对象高度的内容进行裁剪,并以滚动条的方式显示超出的内容。
auto: 在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。
no-display: 当内容不适合当前内容盒子时,整个盒子将被移除,类似display:none。
no-content: 当内容不适合当前内容盒子时,整个内容被隐藏,类似visibility:hidden。
----------------------------------------------------------------------------------------------------------
rotation:检索或设置对象的旋转角度。
默认值:0
rotation旋转以rotation-point设置的值作为参照原点进行旋转偏移。
元素的border、padding、内容以及任何没有设置fixed的background都随元素旋转而旋转。所有position取值为static和relative的子元素也会跟着旋转,其余的则不会。
rotation旋转不影响父元素和兄弟元素,它们的位置布局不变。所以当元素旋转时,可能会重叠到其它元素上。
该属性类似transform属性下的旋转rotate(),可能会被替代或废弃。
: 指定角度。可以为负值
-------------------------------------------------------------------------------------------------------
rotation-point:检索或设置的对象旋转时所参照的坐标点。
rotation旋转以rotation-point设置的值作为参照原点进行旋转偏移。
该属性类似transform-origin,可能会被替代或废弃。
: 用百分比指定坐标值。
: 用长度值指定坐标值。
left: 指定原点的横坐标为left
center: 指定原点的横坐标或纵坐标为center
right: 指定原点的横坐标为right
top: 指定原点的纵坐标为top
bottom: 指定原点的纵坐标为bottom
---------------------------------------------------------------------------------------------------------
visibility:设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间
如果希望对象为可视,其父对象也必须是可视的。
默认值:visible
visible: 设置对象可视
hidden: 设置对象隐藏
collapse: 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。IE6及以下不支持此参数值
-------------------------------------------------------------------------------------------------------------------
table-cell: 指定对象作为表格单元格。类同于html标签(CSS2)
table-row: 指定对象作为表格行。类同于html标签
爱创课堂秉承纯干货,不忽悠的态度专注前端培训,让每个零基础的学员都能真正的从入门到精通。
想要学习前端的朋友们可以点击上面的蓝字哦
学习咨询qq2189877100
爱创前端兴趣部落,纯干货分享
CSS样式表(二)的更多相关文章
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
- HTML静态网页 css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- HTML——CSS样式表&布局页面
CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性 ...
- JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
- HTML静态网页(css样式表)
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- css样式表及属性
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 【2017-03-24】CSS样式表
CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...
随机推荐
- JMeter学习-027-JMeter参数文件(脚本分发)路径问题:jmeter.threads.JMeterThread: Test failed! java.lang.IllegalArgumentException: File distributed.csv must exist and be readable解决方法
前些天,在进行分布式参数化测试的时候,出现了如题所示的错误报错信息.此文,针对此做一个简略的重现及分析说明. JMX脚本线程组参数配置如下所示: 参数文件路径配置如下所示: 执行JMX脚本后,服务器对 ...
- WP8.1 和UWP 如何使用下载网页的上的音频 并保存
WP8.1: private async Task<StorageFile> GetVoiceData() { HttpClient httpclient = new HttpClient ...
- PHP获取某个表与其他表的关联关系算法
如图 电影movie有多个附表,如果通过movie表来找出多个与之关联的表. 本算法规则: 外键写法必须是X_id; A与B 1对多关系,中间表表名必须是A_B,且A_B,必须包含A_id,B_id外 ...
- PHP服务器配置环境变量
我们写的PHP应用程序,通常会分别在本地.开发.测试.RC.生产环境中运行,不同环境中全局变量各不相同.通常简单的部署做法是,每次部署到一个环境,都需要先修改对应的全局变量,然后再部署代码.如果部署频 ...
- webapi post 请求多个参数
Some programmers are tring to get or post multiple parameters on a WebApi controller, then they will ...
- TP框架 ---空控制器和空操作
通过之前的学习我们知道了index.php是一个入口文件,如果没有这个入口文件的话,我们需要自己创建! [视图模板文件创建] 视图模板文件存放发位置在: 里面没有模板文件 如果我们想要访问Login控 ...
- Ubuntu14.04台式机r8169有线网卡驱动问题
由于台式在安装了Ubuntu14.04后插入网线后灯不亮,不能使用有线网. 查找资料发现原来是网卡驱动问题,解决办法如下: 1.查看网卡驱动名称 lspci -v 找到以太网连接的kernel dri ...
- WebService "因 URL 意外地以 结束,请求格式无法识别" 的解决方法
最近在做一个图片上传的功能,js调用用webservice进行异步访问服务器,对于不是经常用webservice的菜鸟来说,经常会遇到以下的问题(起码我是遇到了) 在页面上写了js调用代码如下所示: ...
- Linux 下 PHP 扩展 cURL 编译安装
下载 cURL http://pan.baidu.com/s/1hqrHWkG (curl-7.39.0.tar.gz) 3.98MB 解压: tar zxvf curl-7.39.0.tar.gz ...
- python利用redis构成一个队列
例子在 http://peter-hoffmann.com/2012/python-simple-queue-redis-queue.html 英文 http://www.django-china.c ...