时间戳

首页 > 技术文章 > 网页知识点

网页知识点

Crown-V 2020-06-02 19:10 原文

第一章 网页的基本结构

1.网页的组成

<!DOCTYPE html> ----- 声明网页,并且简写支持H5
<html></html> ------- 定义网页的内容和属性
<head></head> ------网页的头部,主要是属性和标题
<body></body> ------ 网页的身体，主要是网页的内容和一些脚本

2.网页的样式

CSS加载有三种方法,每种方法的权重不同(内联>内部>外部):
    1.内联样式(行间样式)
    内联就是在标签中直接更改样式
    2.内部样式
    在头部标签的<style>标签内写入样式
    3.外部样式
    使用link标签连接外部的css

3.选择器的权重

选择器的权重():
    1.权重不同的样式规则作用于同一元素时,权重高
        的规则生效
    2.权重相同的样式规则作用于同一元素时,后声明
    的规则生效。
        1.!import ---- infinity
        2.内联样式(行间样式) ---- 1000
        3.id选择器 --- 100
        4.类选择器、属性选择器、伪类选择器 ----- 10
        5.标签选择器、伪元素选择器 ---- 1
        6.通配符选择器和(+ > ~) ----- 0

4.元素的定位

默认为position:static;    
    1.相对定位：position:relative;
    2.绝对定位：position:position; (脱离文档流,不占空间)
    3.固定定位：position:fixed; (脱离文档流,不占空间)
    4.粘贴定位:position:sticky; 
注:在定位的时候，一般使用[left][top][right][bottom]参数

定位还有浮动:
    浮动:float
    清除浮动:clear

5.元素的类型

1)块级元素
特点:常见的块级元素(自动换行， 可设置高宽 )

2)行内元素
特点:常见的行内元素（无法自动换行，无法设置宽高）

3)行内块级元素
特点:常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )

2.三种元素的转化
    1)display:block; 转化为块级元素
    2)display:inline-block; 转换为行内块级元素
    3)display:inline; 转换为行内元素

第二章:元素特效

1.边框

1)border-radius:top-left top-right bottom-left bottom-right;
设置边框的圆角：
    border-top-left-radius: 左上角
    border-top-right-radius: 右上角
    border-bottom-right-radius: 右下角
    border-bottom-left-radius: 左下角

2)box-shadow: h-shadow v-shadow blur spread color inset
设置元素的阴影：
    h-shadow:水平阴影的位置。允许负值
    v-shadow:垂直阴影的位置。允许负值
    blur: 模糊距离,可省略
    spread: 阴影的尺寸,可省略
    color:阴影的颜色,可省略
    inset ： 将外部阴影(outset)改为内部阴影,可省略

3)border-image: source slice width outset repeat;
设置边框的图片样式:
    border-image-source: 用于指定要用于绘制边框的图像的位置
    border-image-slice: 图像边界向内偏移
    border-image-width: 图像边界的宽度
    border-image-outset: 
    border-image-repeat: 用于设置图像边界是否重复(repeat)、拉伸        (stretch)或铺满(round)

2.背景

3.渐变

1)线性渐变（Linear Gradients）
　　background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

　　direction: to bottom、to top、to right、to left、to bottom right或者0deg


2)径向渐变（Radial Gradients）
　　background-image: radial-gradient(shape size at position, start-color, ..., last-color);
　　background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

shape :cirlcle,ellipse(默认值)
size 参数定义了渐变的大小：
　　1)closest-side
　　2)farthest-side
　　3)closest-corner
　　4)farthest-corner
例如:
　　background-image: radial-gradient(red 5%, yellow 15%, green 60%);
　　background-image: radial-gradient(red, yellow, green);
　　background-image: radial-gradient(circle, red, yellow, green);
　　background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
　　background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

4.文本效果

1)text-shadow:h-shadow v-shadow blur color;
文字阴影效果:
　　h-shadow:水平阴影
　　v-shadow:垂直阴影
　　blur： 模糊度
　　color：阴影颜色

2)text-overflow:clip|ellipse|string
文字溢出效果:
　　clip:剪切
　　ellipse:显示省略符号来代表被修复的文本
　　string:使用给定的字符串来代表被修剪的文本

注意:需要配合overflow:hidden;white-space:nowrap;

3)word-wrap:break-word;
　　当比较长的文字超出边界，使用可以换行(主要针对英文字母)非中日韩文本的换行规则

4)word-break:break-all|keep-all
　　break-all    允许在单词内换行。
　　keep-all    只能在半角空格或连字符处换行。

5.字体

1.自定义

@font-face{
font-family:myFont;
src:url('xxx.ttf'),url('xxx.eot');
}

2.字体的样式

font-size:16px;    //字体大小:
font-family:  //字体样式：
font-style:normal|italic|oblique     //字体状态:
　　italic：字体的倾斜
　　oblique:字体的倾斜
font-weight:100-900;     //字体的粗细:

第三章:CSS 2D&&3D动画

1.2D转换

 

transform：
1)translate(0px,0px)
　　移动:
　　translateX()
　　translateY()

2)rotate(0deg)
　　旋转:

3)scale(w,h)
　　放大:
　　scaleX()
　　scaleY()

4)skew(0deg,odeg)
　　倾斜:
　　skewX()
　　skewY()

5)matrix()
　　将上述方法的集成:
　　　　　matrix(a,b,c,d,e,f)
　　　　　　平移(e水平&&f垂直)： 
　　　　　　　　e和f不带距离单位,分别控制水平和垂直方向的移动

　　　　　　缩放(a水平&&d垂直):
　　　　　　　　a和d分别是水平方向和垂直方向的缩放控制

　　　　　　倾斜(b水平&&c垂直):
　　　　　　　　b和c分别是水平和垂直倾斜,是通过sinθ的最终值

　　　　　　旋转(a,b,c,d)：
　　　　　　　　通过公式
　　　　　　　　transform：matrix（cosθ，sinθ,-sinθ,cosθ,0,0);
　　　　　　　　θ为旋转角度

 

 

 

 

 

 

 

 

 

 


-->

推荐阅读