那些熟悉又陌生的 css2、css3 样式,持续复习

initial关键字:

          除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字。

       Opera 15 之前的版本不支持 initial 关键字。

       initial 关键字用于设置 CSS 属性为它的默认值。

       initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

overflow :

       所有主流浏览器都支持 overflow 属性。

       注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

position:

absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative
生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit
规定应该从父元素继承 position 属性的值。

center
absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)

page absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)
sticky 对象在常态时遵循常规流。它就像是relativefixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

display:    

        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)

时间: 2024-10-15 05:53:19

那些熟悉又陌生的 css2、css3 样式,持续复习的相关文章

一座熟悉而陌生的城市--一个程序员的成长史(7)

回到重庆,已经是两天以后了.代是雄的老家在农村,但他并没有急着回去,而是先到一个亲戚家住下,借此机会来重新看看重庆这张"熟悉而陌生"的面孔. 代是雄是土生土长的重庆人,但老家在农村,在上高中之前的大部分时光都是在他们那个小镇上度过的,自己的足迹也几乎仅限于以他家老房子为中心的方圆10公里以内.在他的印象中,在初中三年时间里,他到过两次县城,那是去参加所谓的初中数学竞赛.他当时只是觉得县城与小镇比起来,要漂亮很多.他印象最深的就是在县城里面吃了一碗凉粉,那个味道真的是好极了,似乎自己之前

纯css3样式属性制作各种图形图标

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

几个常用的CSS3样式代码以及不兼容的解决办法

原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 1 CSS3代码: 2 3 -webkit-border-radius:10px; 4 -moz-border-radius:10px; 5 border-radius:10px; 6 background-color:#666; 7 width:200px;height:100px; Firefox,Chrome Google,Safari等浏览器的显示效果如图0-0: 图0-0 但是IE这个异类不支

黑马程序员——冒泡排序和选择排序——熟悉又陌生的排序方法

------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 昨天做基础测试题,遇到了个排序问题,写完后脑子里突然跳出了“冒泡排序法”这个名词.“冒泡排序法”和“选择排序法”是每个程序初学者都会学到的两个排序方法,但是好多人对这两个排序方法是既熟悉又陌生,熟悉是因为凡是遇到排序一般都会想到这两个方法,陌生是因为细细一想对这两个方法的原理和区别又不是很清楚.不较真还好,初学者一较真就很容易被这两个方法搞晕了,我当时也被这两个方法搞晕了,就又认认真真一步一步

Python : 熟悉又陌生的字符编码(转自Python 开发者)

Python : 熟悉又陌生的字符编码 字符编码是计算机编程中不可回避的问题,不管你用 Python2 还是 Python3,亦或是 C++, Java 等,我都觉得非常有必要厘清计算机中的字符编码概念.本文主要分以下几个部分介绍: 基本概念 常见字符编码简介 Python 的默认编码 Python2 中的字符类型 UnicodeEncodeError & UnicodeDecodeError 根源 基本概念 字符(Character) 在电脑和电信领域中,字符是一个信息单位,它是各种文字和符号

两款CSS3样式可视化在线生成工具

CSS3随着浏览器的升级已经被越来越广泛的运用,合理的运用CSS3可以使你的网站更加美观,并且之前只能用js才能实现的效果也已经可以直接用 CSS3来实现.但是虽然如此,很多浏览器对CSS3的支持还都是通过其私有属性来达到支持的,鲜有直接对W3C的标准来实现的.诸如firefox的 -moz-和webkit的-webkit-属性前缀. 不过CSS3本身W3C也并未有正式版发布,现在还只是草案.下面我推荐两个很直观的,可视化的,自动生成CSS3样式代码的工具网站给大家. 1.CSS3 Genera

总结网页中流行的8种css3样式

CSS样式: .f1 img{border-radius:50%;transition: all .4s ease-out;} .f1 a:hover img{border-radius:0px;} .f2 a{transition:all 0.4s ease-out 0s;color:#000;} .f2 a:hover{margin-left:10px; text-decoration:none;} .f21{ transition:All 0.4s ease-in-out; -webkit

懒人css3样式代码生成器-一款懒人的样式生成代码工具

原文:懒人css3样式代码生成器-一款懒人的样式生成代码工具 源代码下载地址:http://www.zuidaima.com/share/1607130326682624.htm 版权声明:本文为博主原创文章,未经博主允许不得转载.

CSS3样式运用,悬浮立体方块

前言 作为后端开发者,了解前端是必须的,所以自己琢磨着弄了弄一个CSS3的阴影运用. 我记得这应该是以前淘宝用过的,PS:现在跑到淘宝去看,好像没有找到了.现在流行扁平化设计,没有了阴影,没有了立体! 效果图 实现思路 这里一共做了两边,一种是用UL,一种是用DIV啦. 两种没什么区别,这里着重说DIV的方式. 父容器下有三个子元素DIV,全部左浮动,然后设置z-index.选中的(突出的)DIV用另一套样式,hover 用box-shadow属性,可以实现阴影效果,在网上还有-moz-box-