说明:
该文章仅作为博主对一些不熟悉或常常忘记的前端知识的一个小小归纳,系统学习请前往黑马程序员的相关网站或者其他平台学习。
目录
1. 易忘
1.1 内外边距
margin/padding:(上、右、下、左)——顺时针
1.2 h数字标签
h1-h6 独占一行
1.3 css手写顺序
1.4 required
<input v-model="userIdentifyCode" type="text" placeholder="输入验证码" required>
在HTML中,required 是一个布尔属性(boolean attribute),用于指定在提交表单之前,该输入字段(input、select 或 textarea)必须被填写或选择一个值。如果尝试提交表单而该字段为空(或对于某些类型的输入,如checkbox或radio,未选中任何选项),浏览器会阻止表单的提交,并显示一条消息提示用户必须填写该字段。
2.placeholder属性文字样式与焦点距去除
焦点框:在网页设计中,“焦点框”通常指当用户与页面元素进行交互(如点击输入框)时,获得焦点的元素所呈现的一种特殊状态,例如默认输入框显示黑色轮廓等。
有焦点框:
无焦点框:
/* ::placeholder 选中就是 placeholder 属性文字样式*/
.search input::placeholder {
font-size: 14px;
color: #999;
}
/* 去掉表单控件的焦点框 */
outline: none;
3.隐藏
display: none;,
是CSS中的一种属性设置,用于控制HTML元素的显示方式。当一个元素的display
属性被设置为none
时,该元素及其所有子元素将从页面的渲染树中移除,不会占据任何空间,也不会对页面的布局产生影响。
3.1 使用场景
- 隐藏元素:当需要隐藏某个元素而不影响页面布局时,可以使用
display: none;
。例如,隐藏一个按钮或一段文本。 - 条件渲染:在某些情况下,根据用户的操作或页面的状态,动态地显示或隐藏元素。例如,根据用户的登录状态显示不同的内容。
- 性能优化:在某些性能敏感的场景下,可以通过设置
display: none;
来临时移除不必要的元素,以减少页面的渲染负担。
3.2 对比
visibility: hidden;
:与display: none;
不同,设置visibility: hidden;
的元素仍然占据页面空间,只是不可见。这意味着元素的布局空间不会改变,但用户无法看到该元素。opacity: 0;
:设置opacity: 0;
的元素也是不可见的,但它仍然占据页面空间,并且可以响应用户交互(如点击事件)。这与display: none;
不同,后者完全移除了元素,使其不响应任何事件。
4.选择器及优先级
4.1 选择器
4.1.1 基础选择器
![](https://i-blog.csdnimg.cn/direct/2520918298fb46c6a049d13bce651104.png)
![](https://i-blog.csdnimg.cn/direct/bfd132e3bb004b55bafda7a9dda7211f.png)
/* 基础公共样式:清除默认样式 + 设置通用样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
body {
font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
a {
color: #333;
text-decoration: none;
}
4.1.2 复合选择器
后代选择器:父子选择器之间用空格隔开
子代选择器:父子选择器之间用 > 隔开
并集选择器:选中多组标签设置相同的样式,选择器之间用 , 隔开
伪类选择器:伪类表示元素状态,选中元素的某个状态设置样式,
例1:a:hover { color: red; }
例2:超链接一共有四个状态,且需要按照LVHA顺序写,包括 :link(访问前) :visited(访问后) :hover(鼠标悬停) :active(点击时),其中:hover为通用常用泛用
4.2 结构伪类选择器
4.3 优先级
5.布局
5.1 水平居中对齐与垂直居中对齐
水平方向:
内容:text-align:center;
盒子:margin:auto;
disply:flex;(详细见flex布局)
垂直方向:
文字: (line-height)行高等于盒子高度
背景图片: background-position: center center;
绝对定位(详细见定位居中)
行内块和行内:vertical-align: middle;(详细见26)
5.2 flex布局
5.3 绝对定位——居中
5.4 绝对定位与相对定位、固定定位
5.5 垂直对齐方式vertical-align
盒子放入图片后图片底部有空白,
原因:浏览器默认把行内块和行内标签当作文字处理,按基线对齐
处理方法1:添加垂直对齐方式
处理方法2:修改图片为块级
6.背景
背景图固定(背景不会随着元素的内容滚动):background-attachment: fixed;
透明背景:background-color: transparent;
背景复合属性(background):背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值,不区分顺序)
例:background: pink url(./images/1.png) no-repeat right center/cover;
7.字体图标
8.显示模式
应用:a标签转块级
9.基础
9.1 代码简写-Emmet写法
9.2 Favicon图标
9.3 盒子尺寸计算
9.4 button的type属性
9.5 label标签
9.6 滚动条
9.7 圆角
9.8 盒子阴影
9.9 堆叠
9.10 过渡属性与透明度
9.11 光标类型
9.12 css精灵
10.异常
10.1 清除浮动
![](https://i-blog.csdnimg.cn/direct/9876264a49cf4f53bbfc7def84c10d73.png)
![](https://i-blog.csdnimg.cn/direct/521e6dbee25249bbb6788701c3b12aff.png)
![](https://i-blog.csdnimg.cn/direct/4700b8866b9a458c8c9b5df1682d4615.png)
/* 双伪元素法 */
/* before 解决外边距塌陷问题*/
/* after 清除浮动*/
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
![](https://i-blog.csdnimg.cn/direct/46e5d588fe434063a2086f2d0a80f887.png)
10.2 合并与塌陷问题
11.2D转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
<style>
body {
display: flex;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
background-image: linear-gradient(
/* 写法一 */
/* to right, */
/* 写法二 */
/* 90deg, */
pink 70%,
green
);
}
.box2 {
width: 200px;
height: 332px;
position: relative;
}
.box2 img {
width: 200px;
}
.box2 .mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.5)
);
opacity: 0;
transition: all 0.5s;
}
.box2:hover .mask {
opacity: 1;
}
.yuan {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
background-image: radial-gradient(
50px at center center,
red,
pink
);
}
button {
width: 100px;
height: 40px;
background-color: green;
border: 0;
border-radius: 5px;
color: #eee;
background-image: radial-gradient(
30px at 30px 20px,
rgba(255,255,255,0.7),
transparent
);
}
</style>
</head>
<body>
<div class="box2">
<img src="../imgs/3.jpg" alt="">
<div class="mask"></div>
</div>
<br>
<div class="box"></div>
<div class="yuan"></div>
<button>按钮</button>
</body>
</html>
12.3D转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D</title>
<style>
body {
display: flex;
}
.father {
/* 需要给父级添加视距,否则3D转换没效果 */
perspective: 1000px;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all .5s;
}
.son:hover {
transform: translate3d(100px, 200px, 300px);
}
.box {
width: 200px;
height: 332px;
position: relative;
perspective: 1000px;
}
.box img {
width: 200px;
transition: all .5s;
}
.box img:hover {
transform: rotateZ(60deg);
transform: rotateX(60deg);
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="box">
<img src="../imgs/3.jpg" alt="">
</div>
</body>
</html>
13.动画
14.适配方案
14.1 rem
14.2 vw
15.less
16.媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询</title>
<style>
body {
background-color: #ccc;
}
/* @media (max-width:760px) {
body {
background-color: pink;
}
} */
@media (min-width:760px) {
body {
background-color: yellow;
}
}
@media (min-width:960px) {
body {
background-color: rgb(255, 0, 0);
}
}
@media (min-width:1260px) {
body {
background-color: rgb(51, 0, 255);
}
}
</style>
</head>
<body>
</body>
</html>
17.Boostrap
示例: