Html5常用备忘

 

 

不断行的空白（1个字符宽度）

 

 

半个空白（1个字符宽度）

 

 

一个空白（2个字符宽度）

 

 

窄空白（小于1个字符宽度）

overflow-y: scroll; /* 出现滚动条 */ 

background-color: transparent; /* 设置透明背景 */ 

text-decoration:underline  /* underline下划线 */ 

text-decoration:line-through  /* line-through删除线贯穿线 */ 

text-decoration:overline  /* overline上划线 */ 

font-style: normal;去除字体样

font-weight: normal;设置为细字体

font-weight 字体加粗 ; 对象值：从100到900，最常用font-weight的值为bold

font-style 斜体,正体

letter-spacing 设置字符间距

word-spacing 设置单词间距

vertical-align: middle; 设置中线对齐

@font-face{ font-family:定义名字;src:url(" ")

} 自定义字体

三角形

width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

text-decoration: none;去掉下划线

text-indent: 10px; 文本缩进

<textarea></textarea> 可变文本框; resize属性值:none;both

cursor: pointer; 使鼠标变成小手

opacity:0.8; 设置透明度

text-shadow:5px 5px 5px bule; 文字阴影

box-shadow:5px 5px 5px bule; 盒子阴影

out-line:none;去掉获取焦点后text框蓝边

flex-basis: 1px;

placeholder="1212" 文本框提示

content(内容区) padding: 0px;margin:0px;设置内边距 和 外边距; border(边框)

display: list-item;列表形式

display属性：

常见属性值：

1.none；隐藏对象（对象完全消失于文档流）而opacity：0；（透明度）完全透明，hidden也是隐藏，但是还留有位置。

2.inline；指定对象为内联(行)元素

3.block； 指定对象为块元素(独占一行) 显示,与none属性配合可实现滑动门效果

4.inline-block；指定对象为内联块元素

5.table-cell；指定对象作为表格单元格：

原因是单元格具有“table-cell”属性，我们为了使其他元素具有这种属性添加：

display：table-cell；和vertical-align：middle；这两个属性，使它里面的内容可以居中显示。

6.flex; 弹性(伸缩)盒模型 一般用tiem来表示

cellspacing = "0" 表格中间的间距,可去掉表格双线

cellpadding = "0" 表格内填充的间距,可去掉单个表格填充的距离

flex布局

flex-align：默认是设置垂直方向的对齐方式，值： start、end、center、stretch、baseline。

flex-pack：设置子元素之间如何分配多余空间，值：start、end、center、justify。

flex-direction：设置子元素的排列方式， row、row-reverse、column、column-reverse。

flex-wrap：设置子元素的是否自动换行和排列方向，值：nowrap、wrap和wrap-reverse。

-ms-flex：设置子元素弹性，参数，分别是正弹性、负弹性和默认大小。

.rightDIV{float: left;}浮动DIV设置写法

.clear{clear: both;}浮动DIV去除写法

overflow: hidden; 溢出：隐藏 也可用做 清除浮动

transition:2s ease-in 3s;过度效果,过程2s,3s后开始执行效果

transform:rotate(30deg);转换 旋转

• transform: translate(50px,100px);根据左(X轴)和顶部(Y轴)位置，从当前元素位置移动
• transform: rotate(30deg);顺时针旋转,负值是逆时针旋转;
• transform: scale(2,3);增加或减少（X轴）和（Y轴）的大小
• transform: skew(30deg,20deg);X轴和Y轴倾斜的角度,参数为空，则默认为0,可以负值
• transform: matrix(0.866,0.5,-0.5,0.866,0,0);六个参数，包含旋转，缩放，移动（平移）和倾斜功能

translate3d(x,y,z) 定义 3D 转化

scale3d(x,y,z) 定义 3D 缩放转换。

rotate3d(x,y,z,angle) 定义 3D 旋转。

perspective(n) 定义 3D 转换元素的透视视图。

@keyframes myfirst 定义动画

animation所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name:myfirst;

animation-duration:5s;规定完成动画所花费的时间，以秒或毫秒计

animation-timing-function:linear;规定动画的速度曲线。linear匀速,ease默认

animation-delay:2s;规定在动画开始之前的延迟。

animation-iteration-count:infinite;规定动画应该播放的次数..no 和infinie

animation-direction:alternate;规定是否应该轮流反向播放动画。normal默认正常,alt

animation-play-state:running;规定动画是否正在运行或暂停,默认running

div {

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst5s linear2s infinite alternate; (简写)

}

@keyframesmyfirst{

0%{background:red;left:0px;top:0px;}

25%{background:yellow;left:200px;top:0px;}

50%{background:blue;left:200px;top:200px;}

75%{background:green;left:0px;top:200px;}

100%{background:red;left:0px;top:0px;}

}

@keyframesmyfirst{

from{ }

to{}

}

当设置为box-sizing:content-box时，采用标准模式

当设置为box-sizing:border-box时，采用怪异模式

z-index: 1;(2;3) 堆叠 较大的元素会覆盖较小的一个

!important; 设置最高优先级,,一般情况不用

background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域

CSS3 background-origin: padding-box|border-box|content-box; 相对于内容框来定位背景图像

CSS3 background-clip: border-box|padding-box|content-box; 规定背景的显示区域

两栏自适应方案:一侧固定宽度浮动，另一侧设置：overflow： hidden

1.常见的块元素：

div - 常用块级容易，也是css layout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

menu - 菜单列表

ol - 排序列表

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表

2.常见的内联元素：

a - 锚点

abbr - 缩写

b - 粗体（不推荐）

big - 大字体

br - 换行

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线（不推荐）

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

u - 下划线

var - 定义变量

五、块级元素和内联元素之间的转换：

1.display

块元素默认display:block;行内非替换元素(a,span)默认为display：inline;行内替换元素(input)默认为display:inline-block;

a.display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。

b.display:block;转换为块级元素。

c.display:inline;转换为行内元素。

d.display:inline-block;转换为行内块级元素。

2.float

当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。

3.position

当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

规范:块元素和行内块元素同级!

选择器

引入浏览器左上角标志图标

css3背景渐变

background: -webkit-linear-gradient(top, #f0e759, #ffaa3a);

background: linear-gradient(top, #f0e759, #ffaa3a);

文字渐变

CSS代码：

.text-gradient { display: inline-block; color: green; font-size: 10em; font-family: '微软雅黑'; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1))); -webkit-background-clip: text; -webkit-text-fill-color: transparent;};

HTML代码：

<h2 class="text-gradient">天赐美妞</h2>

设置placeholder颜色和文字

input::-webkit-input-placeholder {color:#999;}

a标签中插入隐藏下拉框时，隐藏内容不可放到a中定位，会乱。