黑马学习已半月，所得甚多。本人不善言辞，奉承不实之语也不愿多言，亦不愿抄袭他人心得。然，受累于字数限制，唯将部分所学公布于此。望后来者斧正，携手共进。
HTML，CSS中需要注意的部分
特殊字符集
table
caption 整个表格的一个标题
thead,tbody,tfoot
tr
th
td
cellspacing表格之间的距离
cellpading内容与表格的距离
text-align：
right,left,center
如果你想单独的控制某一个内容的位置，请把align的center属性写到当前想居中的元素身上
合并
跨行合并：rowspan="合并单元格的个数"
<td colspan=“2”></td>。删除多余的单元格
border-collapse合并相邻边框
表单
<form action='' method='' name=''>
input type
buton按钮
checkbox复选
checked
file文件
hidden定义隐藏的输入字段
password密码
比value好用
radio单选按钮
reset重置
submit提交
text输入文本
placeholder占位符
outline:0/none去掉默认文本边框
lable
用for id
直接包含
select
option
selected
textarea
rows="3" cols="20"
resize: none;防止拖拽
文本
font: font-style font-weight font-size/line-height font-family;
text-align: center;文本水平对齐
text-decoration：；
underline
line-through
overline
text-indent：2em/2px；
line-height: 26px/1.5;
对齐方式
vertical-align ：top||middle||bottom||数值
写在被对齐的元素身上
锚点
a
href="#id"
元素id
列表
ul>li
ol>li
dl>dt,dd,dd
list-style:none
图片
默认下方有三个像素的间隙
1.display:block
2.font-size:0
3.vertical-align:middle··
c3h5
css3
属性[]10
input[class="name"]
input[class^="na"]
input[class$="me"]
input[class*="n"所有包含b]
结构伪类选择器
nth-child
li:first-child第一个li标签
li:last-child最后一个li标签
li:nth-child(3)选择第3个li标签
li:nth-child(n)选则全部li标签
li:nth-child(2n)选择所有偶数个li标签
li:nth-child(2n-1)选择所有奇数个li标签
li:nth-child(-n+9)选择前9个li标签
li:nth-last-child(-n+3)选择最后3个li标签
li:nth-child(n+9)选择从第9个li标签开始的所有标签
先看个数再看个数
nth-of-type
同上
伪元素
css模拟的假元素
注意
1.只能给双标签加
伪元素冒号前不能有空格
伪元素里面必须写上属性content:""
每一个元素都可以为伪元素
before
after
每个模拟伪元素
相当于行内元素
box和after其实是同级关系
可以理解为伪元素寄生在box上
作用
减少页面结构
盒子模型
border:px solid/dashed color
默认
width=content+padding+border
box-sizing:boder-box
改变盒子计算方式，只受width影响
自动计算内容宽度content
padding的妙用
子盒子不写宽度，默认100%父盒子
此时给子盒子加padding值，不会撑大父盒子，而是使子盒子内容减小，子盒子总体大小与没加之前大小相等
子盒子写宽度
给子盒子加padding值，内容大小不变，子盒子总体大小变大
水平居中
块级
margin:0 auto
行内块，内联
text-align:center
垂直居中
块级
暂无
行内块，内联
line-height=height
圆角边框
border-radius:左上 右上 右下 左下
border-radius-left-top:
盒子塌陷
垂直方向：取较大值
父子嵌套，子盒子有margin-top,父盒子一起往下掉
父盒子加上边框
父盒子加内边距
父盒子加overflow:hidden
计算盒子宽度
width: calc(100% - 80px);
括号中可使用+-*/
图标模糊
blur模糊处理
filter: blur(5px);
2D不影响页面结构
让元素在平面移动
transform:translate(x,y)
平移属性是根据自身大小平移的（百分比），占位置，不影响结构，对行内元素无效
transform:translatex(x)
旋转
tansform:rotate(xdeg)
旋转中心
transform-origin:center(默认)、left···
transform-origin:数字
缩放
transform:scale(2)
transform:scale(x，y)
倾斜
transform:skew(30deg,0)
顺序
不同顺序可能会导致不同结果
transform:translate() ratate() ···
3D
人和物体的距离 - 视距 这个值规定要设置给物体的父元素 perspertive:1000px/transform-style:preserve-3d
平移
transform:translate3d(x,y,z)
transfrm:translate(x)
旋转
rotatex(deg)
rotated3d(x,y,z,deg)
任意轴
动画
定义
@keyframes 动画名称
0%
···
100%
调用
div{animation: 动画名称 动画执行时间}
补充
animation:动画名称 动画执行时间 执行速度 等待时间 执行次数 是否反向 动画结束位置
动画停止需要一个事件触发
animation-play-state:running/paused
透明
rgba0-1
只透明当前背景
opacity0-1
里面内容都透明，带有继承性
过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
能否过渡看该属性是否有中间值
花费时间： 单位是 秒（必须写单位） 比如 0.5s
运动曲线： 默认是 ease （慢-快-慢）
linear匀速
ease-in慢速启动
ease-out慢速结束
ease-in-out慢速启动和结束
何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
transition:width 1s···，height 1s
过渡的使用口诀： 谁做过渡给谁加
html5
语义化签
header
footer
nav
main
视频标签
vedio
src
在vedio和source标签中仅能存一，如在source中，则vedio中需要删去该标签
autoplay谷歌不允许自动播放/preload预加载
muted静音播放
controls控制面板
poster默认图片
object-fit:fill让视频内容铺满整个video
source
存在于video中的单标签
依次加载
常用mp4
音频标签
常用格式mp3
表单
autocomplete="on"记录上次提交的内容
email,url,search
datetime,datetime-localweek,data,month,time,tel
range范围,color
number
max="5" min="1" value="3" step步长
multiple提交多个文件
datalist可输入表单
css
继承性
color
text-
font
line
a标签本身有颜色，不继承父级
选择器
通配符0
标签1
类，伪类10
id100
!improtant无穷大
交集，并集，混合,权重累加但不进位
背景
background:color url() no-repeat scroll/fixed position
background-repeat
repeat
no-repeat
repeat-x/y
background-position
方位lleft,right,top,bottom,center
x,y
盒子阴影
box-shadow: x轴（必填项） y轴（必填项）模糊程度 阴影尺寸 颜色 内外;
文本阴影
text-shadow: x轴（必填项） y轴（必填项）模糊程度 颜色;
浮动
是兄弟就一起浮动
父盒子加清除浮动
.clearfix:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height:0;}
.clearfix{*zoom:1;}
浮动虽脱离标准流，但不会压住文字
浮动会影响后面的元素，但不会影响前面的
子主题 5
浮动后（定位后），行内元素和块级元素都具备了行内块的特征（能够设置宽高、默认由内容撑开）
display
block
显示
none
隐藏，不占位置
visibility:hidden
占据位置
定位position
静态static(默认)
relative
脱离标准流，但占据位置
absolute
fixed
定位在版心
1.position：fixed;
2.left:50%
3.margin-left:盒子宽度一半
sticky粘性定位
语法position:sticky;top:100px
层级,只针对定位
默认0，后来者居上
z-index,首先看父级大小，拼爹
overflow
visible默认显示
单行解决办法
1.强制一排显示
white-space: nowrap;
2.溢出部分隐藏起来
overflow: hidden;
多余部分变成···
text-overflow: ellipsis;
多行解决办法
div.twe {
width: 100px;
height: 60px;
line-height: 30px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
/* 后面的数字就是决定你当前要显示多少排的一个数字 */
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-box-orient: vertical;
}
hidden
清除浮动
盒子塌陷
scroll无论内容，出现滚动条
auto视内容多少出现滚动
精灵图
1.backround-image
2.ps从右下往左上量取坐标
3.weidth,height
4.position:x,y,要取负值
字体图标
1.在阿里巴巴矢量图去选择图标
2.下载到本地
3.解压 demo_index.html
4.打开网页，选第二种 font class
引入css
路径
写span字体图标
把类名放到xxx中
其他
手型cursor
pointer
三角形，利用边框特性，width=0,boeder=x
为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
外边距负值
压住其他元素
引入网页图标
1.制作favicon.ico图标
2.将图标放在根目录下
3.用<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">引入
需要遵循顺序
1.布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2.自身属性：width / height / margin / padding / border / background
3.文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4.其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
以上所述，受格式所限，略显凌乱，却干货满满，字字均为所学所码。望诸君，凑活着看··· |
|
收藏
淘帖
踩
