网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
32.文字排版
(1)适用大多数浏览器：
从左向右 writing-mode: vertical-lr;
从右向左 writing-mode: vertical-rl;
(2)只适用IE浏览器:
从左向右 writing-mode: tb-lr;
从右向左 writing-mode: tb-rl
33.排版网页文本
(1)color文本颜色:
RGB：如color:#FF0000; 另一种方法rgb(r,g,b)其中三个参数取整0~255
RGBA：在RGB基础上加控制alpha透明度的参数，取值0~1，0表示完全透明
(2)text-align水平对齐:
left左(默认)、center中间、right右、justify两端对齐
(3)text-indent首行缩进：2em或2px 缩进两个字符
(4)text-height文本行高: 单位px或 按倍数(行高是字体大小的倍数)
(5)text-decoration文本装饰：
none默认无、underline下划线、overline上划线、line-through删除线
(2)vertical-align垂直对齐：只能作用于<table>表格单元格的对象:
top顶、middle居中、bottom底
(4)text-shadow文本阴影：
语法"text-shadow:阴影颜色 x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);"
如text-shadow: blue 10px 10ox 2px;
(5)查询浏览器是否支持HTML5及CSS3属性的网址www.caniuse.com
33.CSS3设置超链接样式：
伪类:根据标签处于某种行为或状态来修饰超链接样式。其他标签如p可以使用hover
和active。
语法"标签名:伪类名{声明;}"
(1)a:link 未访问前的超链接
(2)a:visited 访问过后
(3)a:hover 鼠标移到链接上
(4)a:active 鼠标点击未释放
(5)设置伪类的顺序：a:link - a:visited - a:hover - a:active
(6)虽有四种样式,但实际开发中只设置标签选择器样式、鼠标悬浮链接样式
34.CSS3设置列表样式
(1)list-style-type：列表项标记类型
none无符号、decimal数字、disc实心圆(默认)、circle空心圆、square实心正方形
(2)list-style-image：用图像做列表项标记
(3)list-style-position：设置列表项标记的位置
(4)list-style：一次设置列表的所有属性 (属性值为none时说明列表无样式)
顺序为 list-style-type + list-style-position + list-style-image
35.
36.CSS3设置背景样式：
(1)background-color：背景色不能继承，其默认值是透明transparent
(2)background-image：url(图片路径)、none(不显示背景图像)
(3)background-repeat：背景图像重复平铺
repeat(沿水平和垂直方向)、no-repeat(不平铺,只显示一次)、
repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、
(4)background-position：背景图的位置(X水平Y垂直方向的偏移量，如果只有一个方向关键字，则默认另一个关键字为center)
1.Xpos Ypos:如 0px 0px：默认无偏移,从左上角出现
30px 40px：正向偏移,图像向右和向下出现
-50px -60px：反向偏移,图像向左和向上出现
2.X% Y%：如30% 50%(水平方向偏移30%，垂直方向居中)
3.X水平关键词(left,center,right)、Y垂直关键词(top,center,bottom)
(5)background：一次设置背景的所有属性
(6)background-size背景图片尺寸：
auto(保持图片原尺寸,不易失真)、cover(放大填满容器标签)、
百分比percentage、contain(按照图片本身的宽高比例适应定义背景的区域)
37.gradient线性渐变：颜色沿着一条直线方向过渡
(1)常规语法：" linear-gradient(position, color1, color2,…)"
(2)浏览器兼容语法：" -兼容前缀-linear-gradient(position,color1,color2,…)"
(3)渐变的直线方向：
to left 从右向左、to top left 向左上方、to bottom left 向左下方、
to right 从左向右、to top right向右上方、to bottomo right向右下方、
to bottom从上向下、to top 从下向上、
38.CSS3径向渐变radial-gradient：圆形渐变，颜色从一个起点朝所有方向混合，语法和线性渐变相似。
———6 盒子模型———
39.盒子模型的组成：
content网页内容、border边框、padding内边距、margin外边距
(1)边框border：
border-color 边框颜色：如border-color:#369 #000 #111 #F00;按“上右下左顺时针”设置
border-width 边框粗细：如细thin、中等medium、粗的thick
border-style 边框样式：常用none无边框、dotted点线边框、dashed虚线边框、solid实线边框
border 简写:如下边框border-bottom:9px red dashed;四条边框border:9px blue solid;
(2)margin外边距：盒子边框以外和其他盒子间的距离
margin-top:上外边距、margin-bottom：下外边距
margin-left：左外边距、margin-right：右外边距
margin：简写"上右下左"
auto：设置盒子在它的父容器里居中显示。如margin:0px auto;让整个盒子居中。
如果将元素的 margin设为负值，则元素会变大。
(块元素可以把左右页边距设置为"自动"中心对齐。margin:auto;但前提宽度不能是100%)
注意：很多标签都有自身默认的外边距，所以一般用并集选择器统一设置这些标签的外边距为0px,这样不会产生不必要的空隙。
如清除body和h2自带的外边距 body,h2{margin:0px;}
(3)padding内边距：
padding-left、padding-right、padding-top、padding-bottom、
padding"上右下左"
40.盒子模型的尺寸：
增加边框、内边距、外边距后不会影响内容区域的尺寸，但会增加盒子模型的总尺寸。
(1)内盒总尺寸 = border(上下/左右)+padding(上下/左右)+内容宽/高度
(2)整个盒子的宽度 = 内容宽度+左右padding+左右边框border+左右margin
41.box-sizing拯救布局
(语法)box-sizing:content-box、border-box、inherit
(1)content-box：盒子的宽度或高度=border+padding+(margin)+width/height
(2)border-box：盒子的宽或高度等于元素内容的宽或高度
(即 该内容宽/高度=盒子宽/高度-border-padding )
(3)inherit：使元素继承父元素的盒子模型模式。
42.border-radius圆角边框：语法和边框相似，只是四个边框带圆角
(语法)border-radius:length{1~4个数字};
(1)用border-radius制作特殊图形
圆形：元素的宽度和高度必须相同。圆角半径为元素宽度的一半，或直接设圆角半径为50%
半圆形：元素的高度是宽度的2倍，且圆角半径为元素的宽度值。
扇形：即制作四分之一圆形。"三同"元素宽度、高度、圆角半径 “一不同”
43.盒子阴影：和文本阴影相似
(语法)box-shadow:inset x-offset y-offset blur-radius color;
inset：内部阴影，可选。
x-offset：X轴水平位移，正值在右，负值在左。
y-offset：Y轴垂直位移，正值在下，负值在上。
blur-radius：模糊半径可选，只能>=0 值越大阴影向外面积越大,边缘越模糊。
——7 浮动——
44.标准文档流：元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。
45.display属性：用于指定标签的显示方式
block：块元素的默认值，该元素前后自带换行符
inline：行内元素的默认值，元素会显示为行内元素
inline-block：行内块元素，兼具行内元素和块元素的特性
none：元素不会显示
46.Float：指定网页元素向哪个方向浮动
left左、right右、none默认无(元素不浮动 显示在其文本出现的位置)
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果是右浮动，后面的文本流将环绕在它左边：
47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。
48.clear属性：规定元素的哪一侧不允许其他浮动元素。
left(左侧不允许浮动元素)、right(右侧不允许)、
both(左右都不允许，常用于文本在图片下方显示)、
none(允许浮动元素出现在两侧)
49.解决父级边框塌陷的方法：
(1)浮动元素后加空的div，该div设样式clear:both;margin:0px;padding:0px;
(2)设置父元素固定高度把边框撑开。
(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。
(4)父级用伪类after设样式(推荐)
50.Overflow属性：溢出处理，也可用于扩展盒子高度。
1) visible 默认溢出内容可见，显示在盒子外面
2) hidden 多出来的内容被隐藏且没有滚动条
3) scroll 有垂直水平2条滚动条，可查看多余内容
4) auto 如果内容溢出，自动显示滚动条(只有垂直条)查看
5) inherit 继承父特性
————8 定位网页元素————
51.Position属性：指定盒子的位置，相对它父级的位置或它自身应该在的位置。
(1)static 默认无定位，元素按照标准文档布局。
(2)relative相对定位
a.特性:
1.以标准文档流排版为基础，相当于它在原来位置偏移指定的距离。
2.元素位置偏移后，仍会保留原位置。
3.层级提高，可以遮盖标准文档流元素和浮动元素。
b.使用场景：
相对定位可以不设偏移量，让后面的绝对定位以它为祖先元素作基准定位。
c.语法 position:relative,指定偏移量时：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如
div{
position: relative;
top:-20px;
left:20px;
}
(3)absolute绝对定位
a.特性：
1.以已定位的祖先元素作基准定位，如果没有定位的祖先元素，则以浏览器窗口为基准定位。
2.元素位置偏移后，不保留原位置(其他元素可以用它原来的空位)
3.层级提高，可以遮盖标准文档流元素和浮动元素。
4.设置绝对定位的元素脱离文档流，对其他盒子的定位无影响
b.使用场景：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等。
(4)fixed固定定位
a.特性：直接以浏览器窗口为基准定位，偏移位置不受窗口滚动条滚动的影响。
b.使用场景：窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。
52.z-index属性：设置定位元素的堆叠顺序。默认值0，值大的层位于值小层的上方。
(1)网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，此时z-index是0；另一个是设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。
53.设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容)
(1)opacity:x x值为0~1，值越小越透明
(2)filter:alpha(opacity=x) x值为0~100，值越小越透明
——9 CSS3做网页动画——
54.transform变形：
指效果的集合，如平移、旋转、缩放、倾斜效果。
语法 transform:[transform-function]*;
其中transform-function是变形函数，如要设置多个，则中间以空格分开。在用2D变形时要加浏览器兼容性前缀。
常用2D变形函数如下：
(1)translate(tx,ty)：
平移函数，将元素从原位置(基于X,Y坐标)移动到指定位置上。
tx表示X轴(横坐标)上移动的向量长度，正值向右，负值向左。
ty表示Y轴(纵坐标)上移动的向量长度，正值向下，负值向上。
(2)scale(sx,sy)：
缩放函数，定义宽高度(元素尺寸)的缩放比例，默认值1。0~0.99缩小，大于1放大。
sx表示宽度即横坐标方向的缩放量。
sy表示高度即纵坐标方向的缩放量。
(3)rotate(a)；
旋转函数，只取一个值为度数值,单位deg表示角度°
正值顺时针转，负值逆时针转。
rotate函数只旋转，不改变元素形状。
(4)skew(ax,ay)：
倾斜函数，取值为度数值，单位deg
ax表示水平方向即X轴的倾斜角度。
ay表示垂直方向即Y轴的倾斜角度。
55.3D变形函数：translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数
56.transition过渡：
指动画转换的过程，如渐现、渐弱、动画快慢等。
通过指定属性的初始状态、结束状态，在两个状态间通过平滑过渡的方式实现动画。
语法:[transition-property transition-duration
transition-timing-function transition-delay]*
(速记法)transition: 过渡属性 过渡用时 过渡的动画函数 过渡的延迟时间
主要包括四个属性值：
(1)transition-property：
过渡属性，设置过渡或动态模拟的CSS属性
(2)transition-duration：
过渡用时，从旧属性到新属性的用时，单位为s
(3)transition-timing-function：
指定过渡函数、过渡速度,有以下方式：
ease 速度由快到慢，逐渐变慢(默认)
liner 匀速
ease-in 越来越快(渐显)
ease-out 越来越慢(渐隐)
ease-in-out 先加速再减速(渐显渐隐)
(4)transition-delay：设置过渡是否延迟时间执行。
注意：transition-duration指完成过渡需要的时间；transition-delay指过渡在什么时间之后触发。
57.总结如何用transition实现过渡动画：
(1)在默认样式中声明元素的初始状态。
(2)声明过渡元素之中状态样式，如悬浮状态
(3)在默认样式中通过添加过渡函数，添加不同的样式。
58.过渡的触发机制：
(1)伪类触发: :hover、 :active、 :focus、 :checked等
(2)媒体查询：通过@media属性判断设备的尺寸、方向等。
(3)JavaScript触发：用JavaScript脚本触发。
59.animation动画
animation制作动画的步骤:
(1)通过类似Flash动画的关键帧(@keyframes)声明一个动画；
其中@keyframes称为关键帧，可以设置多段属性。语法
@keyframes 动画名称{
from{ //css样式代码 }
百分比1{ //css样式 }
百分比2{ //css样式 }
100%{ //css样式 }
}
(2)找到要设置动画的元素，调用关键帧已声明的动画。
如 animation: spread(动画名) 2s linear(匀速);
60.animation动画的语法和属性：
" animation: 动画名称 播放时间 播放方式 开始播放的时间 播放次数 播放方向 播放状态 动画时间之外的状态 "
其中属性分别为：
animation-name 动画名称、
animation-duration 播放时间、
animation-timing-function 播放方式、
animation-delay 开始播放的时间、
animation-iteration-count 播放次数(无限次用infinite)、
animation-diriection 播放方向、
animation-play-state 播放状态、
animation-fill-mode 动画时间之外的状态、
—— 其他HTML部分——
utf-8 和 utf8的使用
只有MySQL可以用"utf8"，但其他地方一律使用大写"UTF-8"。
网页推荐使用长后缀名.html
有的浏览器中直接输出中文会出现中文乱码，可加声明
————
超链接
标签链接Email地址，使用mailto能发送电子邮件。
如果mailto后面同时有多个参数，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
链接显示的文本
——
超链接伪类：
a:link 访问前
a:visited 访问后
a:hover 鼠标悬停
a:active 鼠标选中未释放
————
创建表格：
1、
2、：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。）
3、：表格的一行，所以有几对tr 表格就有几行。
4、：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。
5、：表格的一个单元格，一行中包含几对这行中就有几个单元格。
6、表格中列的个数，取决于一行中数据单元格的个数。
7.设置样式border-collapse:collapse;可以把双线边框线合并为一条线边框。
普通输入框
radio单选按钮
checkbox多选按钮
下拉列表
1
文本域textarea
文本————
透明度
opacity:(范围0~1)
filter:aplha(opcitive=透明度<(100)>);
————
Location 对象的方法：
.assign() //加载新文档
.reload() //刷新当前文档
.replace() //用新文档替换当前文档
————
在网页中显示代码，当代码为一行时可用包裹，多行代码用
。
：预格式化，它包围的文本会保留空格和换行符
下拉列表进行多选操作：在标签中设置multiple="multiple"属性，就可以实现多选功能，在windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
通用选择器匹配所有标签 *{ }
浏览器根据选择器权值来使用权值最高的css样式
规则：
标签的权值为1，类选择器的权值为10，ID选择器的权值为100。
!important有最高权值
!important要写在分号的前面，但注意当网页制作者不设置css样式时，浏览器会按照自己的样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但 !important优先级例外，权值高于用户自设置的样式。
什么是“置换元素”？
置换元素会根据标签属性来显示的元素。反之就是非置换元素了。
如img根据src属性来显示，input根据value属性显示，因此可知img和input是置换元素，同理textarea、 select也是置换元素。
————
段落排版：
(1)letter-spacing：单个汉字间隔或单个字母间隔。
(2)word-spacing：按单词来设置间隔。
——
1、border-style 边框样式：
dashed（虚线）| dotted（点线）| solid（实线）
2、border-color 边框颜色
3、border-width 边框宽度：
thin | medium | thick。常用像素(px)。
4、当margin(或padding或border)的left和right的值相同，如：
margin:10px 20px 30px 20px;
缩写：
margin:10px 20px 30px;
——
布局模型与盒模型都是 CSS概念。布局模型建立在盒模型基础上。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
流动（Flow）是默认的网页布局模式。特征：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
流动模型下，内联元素会在所处的包含元素内从左到右水平分布显示。
2、浮动模型 (Float)
任何元素默认是不能浮动的，可用CSS定义为浮动。
3、层模型（Layer）
让html元素在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
(1)绝对定位(position: absolute)
将元素从文档流中拖出来，然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位。如果不存在这样的父包含块，则相对于body元素即相对于浏览器窗口。
(2)相对定位(position: relative)
元素在正常文档流中的偏移位置。首先按static(float)方式生成一个元素(元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留。
(3)固定定位(position: fixed)
始终位于浏览器窗口内视图的设置位置，不受文档流动影响，
另外属性background-attachment:fixed;的作用也是设置背景图片固定。
relative与absolute组合：
1、参照定位的元素必须是相对定位元素的前辈元素。
2、参照定位的元素必须加入position:relative。
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
设置颜色的方法：
1、单词：p{color:red}
2、RGB
由 R(red)、G(green)、B(blue)三种颜色比例来配色。
p{color:rgb(133,45,200)}
每一项的值可以是 0~255 的整数，也可以是0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%)}
3、十六进制颜色
其原理也是 RGB 设置，每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}
——
相对单位长度值：
1、px像素
像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器和使用显示器的实际像素值有关。
2、em
(1)元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em = 14px；如果font-size 为18px，那么 1em = 18px。
如 p{font-size:12px; text-indent:2em;}意思首行缩进 24px(即两个字体大小的距离)
(2)当 font-size 设置为 em时，计算标准以它父元素的 font-size 为基础。
如：以这个例子为例
p{font-size:14px} span{font-size:0.8em;}
这里 span 字体大小就为11.2px(14 * 0.8 = 11.2px)
3、%百分比
p{font-size:12px; line-height:130%}
设置行高(行间距)为字体的130%（12 * 1.3 = 15.6px）
块状元素没有设置宽度时怎么居中?
1.加入 table 标签
2.设置 display: inline方法：显示类型设为行内元素，进行不定宽元素的属性设置
3.设置 position: relative 和 left:50%。利用相对定位，将元素从左偏移50%实现居中。
——
隐性改变display类型：
1. position : absolute;
2. float:left 或 float:right;
不论什么元素(display:none除外)，设置以上属性之一，该元素的display显示类型就会自动变为 以display:inline-block(行内块状元素)方式显示，此时可设置元素的 width 和 height，且默认宽度不占满父元素。
(如 a是行内元素，直接设置它的 width 无效，但设置 position:absolute 绝对定位后就可以设置宽度)
文本格式化标签：
文本加粗
文本加粗(加重语气)
斜体字
斜体(强调文字)
字体放大
字体缩小 定义下标字 定义上标字 插入字(字体下划线)
字体删除线
"计算机输出" 标签：
定义计算机代码
键盘输入
定义计算机代码样本
定义变量
预格式化文本(会保留文本的多个空格)
引文、引用、及标签定义：
缩写
地址联系信息
文字方向(设置dir="rtl"为从右到左显示)
长文本引用(不会自带双引号，但会两边自动缩进)
短句引用语(自带双引号)
定义引用、引证
定义一个定义项目。
title=""属性规定关于元素的额外信息。标签中加上title属性可实现鼠标移过时出现提示文字，如
——
元素:
描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
提示：在HTML中，标签没有结束标签。
——
HTML 颜色值RGB
由红(R)、绿(G)、蓝(B)组成。
每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。
十六进制值写法：#号后加3个或6个十六进制字符。
三位数表示法为：#RGB，转换为六位数表示为：#RRGGBB
——
常见的 URL Schemes
http 超文本传输协议 以http开头的普通网页不加密
https 安全超文本传输协议 https 加密所有信息交换
ftp 文件传输协议 把文件上传或下载到网站
file 本地计算机上的文件。
——
HTML5 多媒体标签
定义内嵌对象
定义内嵌对象
定义对象的参数
定义声音内容
定义视频或者影片
定义media元素的多媒体资源(、)
规定media元素的字幕文件或其他包含文本的文件 (、)
——
audio音频设置
1.解决方法：
下例使用两个不同的音频格式。HTML5 元素会尝试以 mp3 或 ogg来播放音频。如果失败，代码将回退尝试 元素。
2.雅虎播放器使用免费，提供一个小型的播放按钮。
（1）如果使用它，要把这段JS插入网页底部：
（2）然后把MP3文件链接到页面中，JS会自动为每首歌创建播放按钮如：
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
horse.ogg" type=“audio/ogg”>
2.雅虎播放器使用免费，提供一个小型的播放按钮。
（1）如果使用它，要把这段JS插入网页底部：
（2）然后把MP3文件链接到页面中，JS会自动为每首歌创建播放按钮如：
[外链图片转存中…(img-K7GgTIzb-1715726382885)]
[外链图片转存中…(img-2H3nwiMm-1715726382886)]
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
扫一扫
982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
