H5+css3属性随笔

20170227

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);添加右边灰色边框

 

20170301

 border-radius:圆角

 input：focus{}的妙用

 

20170304

1.display:flex弹性盒子

2.overflow:hidden 超出隐藏

3.background可以同时添加两张图片，同时设置浮动和大小

　　background:url(../img/15.PNG),url(../img/2.PNG);
    background-repeat: no-repeat;
    background-size:20px,20px;
    background-position: left,right;

4.flex:1;设置？一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

flex知识：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

5.border-radius:5px;设置圆角

6. :nthchild(n)：见css选择器

7.背景颜色线性渐变

background-image:linear-gradient(to bottom,#DAAAAA,#E87373 80%,#DAAAAA);

 

8.给字体加阴影

/*给字体加阴影 x y z*/
    text-shadow:0 1px 1px rgba(0,0,0,0.8);