题外话:
- 今天稍微整理了下工作中经常用的html+css,算是一个技术总结吧
- 消失了两个月,终于有小伙伴加了我qq,小伙子,你催更狠独特呀
- 待会儿,过两三个小时,还会有经历文章,如果没有,说明我偷懒了,等明天吧,哈哈
html篇
1.万能div(常用指数★★★★★)
讲道理,有一说一,div天下第一。
大家不会反驳吧
小徐,这里写个文案,好
<div style="
font-size:16px;
font-weight:500;
line-height:1.5;
color:#333" >好</div>
小徐,这里弄个图出来,好
<div style="
width:100px;
height:100px;
background:url(img.png) no-repeat;
background-size:cover" ></div>
图文都能搞出来,那还有什么弄不出来的呢。
2.文字span(常用指数★★★)
span是行内元素,宽高由里面的元素撑起来,所以适合放文字,想要固定宽高,在外套层div,就可以了。
<div style=" width:100px;height:100px;" >
<span>文案文案</span>
</div>
3.图片img,视频video,音频audio等等(媒体标签)(常用指数★★★)
这些媒体标签,对于我们来说还是经常用到的,这里就单纯写个经常用到的配置标签属性吧
<img src="./img.png"
alt="图片未显示时的文字"
title="鼠标停留图片时显示文字"
/>
<video src="movie.ogg"
controls="controls"
/>
更多请看
img标签属性 video标签属性 audio标签属性 iframe标签属性
css篇(重点)
1.absolute绝对定位(常用指数★★★)
.parent{
width: 100px;
height: 100px;
position: relative;
}
.child{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
推荐理由:当你犹豫不决,不知道选择哪个布局时,绝对定位,这个绝对用的挺好,绝对可以满足你的要求,当然层级元素多了,要用z-index排优先级。
2.fixed固定定位(常用指数★★)
推荐理由:和绝对定位一样的用法,只不过将absolute替换为fixed,适用于tab栏,页面滚动,其元素不动的情况下。
3.margin属性(常用指数★★★★)
.box{
margin: 100px auto 0;
}
推荐理由:margin属性经常被拿来作,居中或者间距,如果你发现设计稿上某元素要居中,或者元素有间距的情况下,可以考虑用margin。
4.object-fit图片裁剪(常用指数★★★★)
.img{
object-fit: cover;
}
推荐理由:只要你的图片不拉伸压缩,用这个宽裁剪,准没错了。
5.文字省略…(常用指数★★★★★)
.sigle-h{ /*单行...*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.more-h{ /*多行...*/
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*行数*/
-webkit-box-orient: vertical;
}
推荐理由:由于项目里充斥着大量的变量文字,多出某个固定的宽度,或者高度,经过样式处理,显示…,所以就不用我说,这个的重要性吧。
6. flex布局(常用指数★★★★★)
6.1 图文左右排列布局
.parent{
width: 300px;
height: 200px;
display: flex;
justify-content: space-between;
align-items: center;
}
.right{
flex: 1;
}
.left:{
width: 100px;
margin-right: 20px;
}
6.2 子集靠左布局
.parent{
width: 300px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.child{
width: 140px;
height: 200px;
}
推荐理由:flex布局天下第一,用了flex布局,绝对定位和margin布局就觉得low,还有很多属性,阮一峰大神的flex布局
7.min-?占位属性(常用指数★★★)
.wrapper{
width: 100%;
box-sizing: border-box;
min-height: 100vh;
background: #fff;
position: relative;
}
推荐理由:页面宽度都是100%,主要还是高度,显示器不同,高度也不同,所以一个页面的容器最小要有高度吧,也就是撑起一个满屏,所以经常在容器里使用
8.vw vh vmin vmax 自适应布局单位(常用指数★★★)
推荐理由:1vw 和 1vh 分别是显示器宽高的1%,vmin和vmax分别是取,显示器宽高最小值和最大值,适用于自适应场景。
9.placeholder自定义样式(常用指数★★★)
input::placeholder {
color: #ccc;
}
input::-moz-placeholder {
color: #ccc;
}
inpit::-webkit-input-placeholder {
color: #ccc;
}
推荐理由:不管是哪个UI设计美工,都不喜欢它原来的样式,当设计稿上有input,textarea时,你就得,改改改。
- 以上都是经常用到的,像什么特殊的伪类,大家都耳濡目染的font-size都没必要写出来,所以写的不是很多,还需待完善,以后有空再补上,就先这样吧。