20170227H5+css3属性随笔

padding 简写属性在一个声明中设置所有内边距属性。

margin 简写属性在一个声明中设置所有外边距属性。

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

alt 属性规定在图像无法显示时替代文本。

在电脑键盘上,esc是escape(逃跑)的简写,ctrl是control(控制)的简写,而alt是alter(改变)的简写。

repeat:背景图像在垂直和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将只显示一次。

margin:0 auto;使其左右居中

margin:上 右 下 左;

字体设置line-height使其上下居中

margin-left :与左边的距离

letter-spacing:使字与字之间有一定距离

text-align:文字居中显示

小技巧

清除浮动的技巧:消除子元素浮动对父元素背景/边框/不能被子元素撑开的方法

1. 父元素结尾处增加一空元素div,并清除其浮动。缺点:如果布局复杂,需要增加许多空标签。

2.在父元素定义overflow:hidden(浏览器会自动检查浮动区域的高度)

注:不必理会原理,知道用法即可。缺点:超出部分会被隐藏

3.利用伪类:after 父元素内容后增加空元素,并清除浮动。

:active 选择器用于选择活动链接。

当你在一个链接上点击时,它就会成为活动的(激活的)。

提示:请使用 :link 选择器对指向未被访问页面的链接设置样式,:visited 用于设置指向已访问页面的链接的样式, :hover 选择器用于设置鼠标指针浮动到链接上时的样式。

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
animation:lunbo 5s linear infinite;animation-direction:normal;

linear:匀速  infinite无限

display:flex;

border-right:1px solid rgba(60,60,30,0.3);添加右边灰色边框

时间: 2024-10-13 06:46:04

20170227H5+css3属性随笔的相关文章

CSS3属性的兼容 什么是弹性和布局

CSS3新特性,兼容性,兼容方法总结 css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?<length>:用长度值设置对象的圆角半径长度.不允许负值<percentage>:用百分比设置对象的圆角半径长度.不允许负值 实例: bo

常用css3属性

整理下日常用到的一些css3属性 1.颜色rgba()  rgb表示红.绿.蓝三个通道的颜色,整数取值范围0~255 + alpha透明通道:值从0到1 使用rgba的a透明值和opacity的区别是: opacity能把所有子元素都带有透明效果,所以通常会单独用一个定位层来设定opacity透明. rgba中的a只改变当前元素的透明. 2.盒子阴影 box-shadow: x轴偏移量  y轴偏移量  模糊半径  阴影的尺寸  阴影的颜色   inset内部阴影|outset外部阴影 偏移量为正

[一天学一个CSS3属性]之二:box-shadow

今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了. 语法: Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]

H5、CSS3属性的支持性以及flex

一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问题.(待深入研究) 二.距离上一次发布<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>转眼已过去一年,在这一年里,浏览器领域的竞争愈演愈烈.Firefox 成为新的“版本帝”但依然未能摆脱被 Chrome 超越的命运,支持更多标准的 IE10 将随着 Windows 8 在10月底正式发

CSS3属性之一:border-radius

语法: border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 取值: <length>: 由浮点数字和单位标识符组成的长度值.不可为负值. border-top-left-radius:

CSS3属性border-radius绘制多种多样的图形

border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角(如图下图第7),把这些角按照不同的顺序和大小来展现,能够绘制成多种多样的图形.以下图例就是通过定义border-radius得到的效果. 把这些基本的图形进行组合,还可以描绘成不同的图案,真的很棒.以下只是简单的几个举例,更多的图形,自己动手画吧.仅border-radius就能实现这么

让IE6/IE7/IE8浏览器支持CSS3属性

让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件,.htc文件是个脚本文件,我个人以为与js文件属于同一货色,只是呢,貌似htc是Internet Explorer(IE)的私生子,只有IE才认它.htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控

理解CSS3属性transition

一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-duration:规定完成过渡效果需要多少秒或毫秒. transition-timing-function:规定速度效果的速度曲线. transition-delay:定义过渡效果何时开始. 1.2 语法 transition: property duration timing-function del

document.documentElement.style判断浏览器是否支持Css3属性

1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAnimation等 2.判断浏览器是否支持制定的css属性 function support(cssName) { var htmlStyle = document.documentElement.style; if (cssName in htmlStyle) return true; return