html 和 css知识点总结

1 CSS3实现圆角（border-radius），阴影（box-shadow）

2 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4 增加了更多的CSS选择器 多背景 rgba

5 在CSS3中唯一引入的伪元素是 ::selection.

6 媒体查询，多栏布局

7 border-image

 8 HTML5 Canvas 元素有什么用？

答：Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

 9CSS3 新增伪类有那些？

p:first-of-type选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

块元素

h p div ul ol li

1.占一行

2.可以设置宽高等

3.默认宽度父类100%

4.可以放块元素和行内元素

文字类的元素 例如 p h 不准放块元素

行内元素

a strong b em i del s ins u span

1.一行多个

2.不可以设置宽高等

3.默认宽度就是本身

4.可以放文字和行内元素

a不能放a 但是a可以放块

行内块元素

input img td

1.一行多个 但是有空隙

2.默认宽度本身

3.高度和边距都可以修改

转换为行内块 inline-block; display:block 行转块 反之inline

4.背景

background-color :transparent透明;

background-image:url();

background-repeat:repeat,no-repeat,repeat-x,repeat-y; 图片是否重复

background-position 分为x和y轴 只给一个另一个默认居中 精确数值要按照x y写 可以混合使用数字加标识；

background-attachment 背景图状态 scroll滚动 fixed固定

 

PS切图

6.1 常见的图片格式

jpg 图像格式：对色彩的信息保真较好，常用于 产品类的图片

gif 图像格式 ：最多存储256色，通常用来显示简单图形及字体，实际经常用于一些图片小动画效果，也可支持背景透明

png 图像格式：存储形式丰富，能够保持透明背景

psd 图像格式 ：Photoshop的专用格式，对于前端人员来说 ，最大的优点是：可以直接从上面复制文字，获得图片，还可测量大小与距离。

 

定位叠放次序 z-index

控制盒子的前后次序 ，数值越大 ，盒子越靠上（默认 auto）

数字后不加单位，只有定位的盒子才有z-index属性

 

网页布局总结

 

标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准布局

浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

定位

可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局