黑马程序员技术交流社区

标题: 前端基础阶段学习心得 [打印本页]

作者: 李黑马33 时间: 2020-12-15 16:02
标题: 前端基础阶段学习心得
   黑马学习已半月，所得甚多。本人不善言辞，奉承不实之语也不愿多言，亦不愿抄袭他人心得。然，受累于字数限制，唯将部分所学公布于此。望后来者斧正，携手共进。

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 …
   以上所述，受格式所限，略显凌乱，却干货满满，字字均为所学所码。望诸君，凑活着看···

作者: 李黑马33 时间: 2020-12-15 16:05
自己当自己的一楼，望楼主好好学，变秃也变强了

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2