优课达p3前端的零碎记忆
一、HTML
关于行内元素和块元素
-
块元素：
<h> <p>等：独占一行，可以设标签的height和width。属性display:block。另外height是改变块元素的，注意和line-height的区别。
-----行高：
另外line-height主要有两个作用：
1、改变段落中行于行之间的距离
2、使文字上下居中（让他等于区域的高度 -
行内元素：
<span>等：不换行，无法设height和width。属性display:inline -
两种元素要互相转换的话只需要改变
display的值即可。另外display如果是none，那他就消失了 -
元素内文字居中的方法
/* 使用text-align属性让文字左右居中 */
text-align: center;`
/* 使用行高让文字上下居中，让行高等于height */
line-height: 100px;
- 关于居中
](https://i-blog.csdnimg.cn/blog_migrate/42c9cfaf508043e884e9173c935d358b.png)
关于表单标签
- 单行文本输入框
<form action="">
<input type="text" placeholder="昵称" name="nick" value="小明" />
</form>
效果如下
关于只读的两个属性：disabled和readonly，区别如下：
- 多行文本输入框
<!-- name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<textarea
name="sign"
rows="5"<!--行数(高度)-->
cols="30"<!--文本域的可视宽度-->
placeholder="请输入个性签名"
></textarea>
效果如下：
- 密码输入框
<!-- type属性表示表单元素的类型，name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<input type="password" name="password" placeholder="密码" />
效果如下：
- 单选框
<label> <input type="radio" name="gender" value="male" />男 </label>
<label> <input type="radio" name="gender" value="female" />女 </label>
另一种写法：
<input id="male" type="radio" name="gender" value="male" />
<label for="male">男</label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">女</label>
效果如下
- 复选框
<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>
拥有相同的name属性，就是同一个多选问题的项
效果如下：
- 选项菜单
<select name="career">
<option value="default">请选择职业</option>
<option value="staff">公司职员</option>
<option value="freelancer">自由职业者</option>
<option value="student">学生</option>
<option value="other">其他</option>
</select>
效果如下：
每个option标签内的value值都应不同
若要多选，就在select标签里加个multiply
<select name="career" multiple>
...
- 按钮button
<button type="submit">注册</button>
效果如下：
button标签之间可以加入文字，图片，图标等
- 芜湖，来个合集
input标签总结：
来个表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>示例表单</title>
</head>
<body>
<form action="">
<input type="text" name="name" placeholder="请输入昵称" />
<textarea
name="sign"
rows="5"
cols="30"
placeholder="请输入个性签名"
></textarea>
<input name="password" type="password" placeholder="请输入密码" />
<label> <input type="radio" name="gender" value="male" />男 </label>
<label> <input type="radio" name="gender" value="female" />女 </label>
<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>
<select name="career">
<option value="default">请选择职业</option>
<option value="staff">公司职员</option>
<option value="freelancer">自由职业者</option>
<option value="student">学生</option>
<option value="other">其他</option>
</select>
<button type="submit">注册</button>
</form>
</body>
</html>
效果如下：
怎么说呢，没有css美化，简直。。咳咳
先更到这，下次再来。
字体颜色
1、英文字母形式：
2、十六进制颜色：以#开头，后面跟三个数字，范围为00~FF
3、rgb形式：r(red),g(green),b(blue)，每种颜色范围0~255（值越大色越深
4、rgba形式：a(alpha(透明度))，a的值在0-1之间，通常省略0，例如把0.3写成 .3 。
其他
字间距：letter-spacing
字体：font-family
字体大小：font-size
字体粗细：font-weight
<a>标签里去除下划线： text-decoration: none;
二、CSS
引入方式：
1、行内样式：直接在标签内用 style:...,比如
<p style="font-size: 18px;font-weight: 700;color: blue;">
这是一个p标签
</p>
2、内部样式：在<head>标签里声明一个<style>标签，把样式都放在<style>标签里
<style>
p {
font-size: 16px;
color: #ffffff;
}
</style>
3、外部样式：创建一个index.css文件，将写在<style>标签里的样式全部拷贝过来，再用<link>标签放在<head>里建立联系
<link rel="stylesheet" type="text/css" href="index.css" />
选择器
1、标签选择器
2、类选择器：一个标签可以有多个类名，用空格隔开即可；同样的类名可以给不止一个标签。
<p class="common color font-size">
common设置通用样式，color设置特殊颜色，font-size设置特殊字体大小
</p>
---------------------
.common{
}
3、id选择器：id是专用
<p id="p-item">这是一段文字</p>
----------------------
#p-item {
font-size: 24px;
font-weight: 400;
}
4、高级选择器
- 后代选择器（空格）
/* 选择id名为password的标签内部所有类名为box的元素内部的所有p标签 */
#password .box p{}
/* 选择所有p标签内部的所有span标签 */
p span{}
/* 选择所有p标签内部的所有类名为spanItem的标签 */
p .spanItem{}
- 交集选择器
<a href="#" class="special">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
a.special{}
上面意为：在所有<a>标签中，类名为special的那个。
- 子选择器
<p>
<span>Span 1. 在p标签内
<span>Span 2. 在p标签的span标签内</span>
</span>
</p>
p>span {
color: orangered;
}
此时只有 Span 1. 在p标签内 会变色
- 并集选择器
用逗号隔开，给几个标签相同的样式
.box,p,h3,.phone{}
选择器的优先级
1、单个选择器的优先级：id选择器>类选择器>标签选择器
2、高级选择器的优先级：看权重（可以假设id选择器的权重为100，类选择器的权重为10，标签选择器为1）
注意：若是选择到父类而不是直接选到子类来改变子类元素的属性，那么权重无论多高，都不如直接选择到子类来改变那个相同的属性。
<ul class="ul-item">
<li>
<p>文字的颜色到底是什么颜色？</p>
</li>
</ul>
.ul-item li {
color: blue;
}
p {
color: red;
}
结果为 红色字体
合模型
1、box-sizing:规定了如何计算一个元素的总高度和总宽度，它有两个值 content-box（默认），border-box
content-box：
border-box：border-box的width包含了content，padding，border，所以设padding和border后，不会超过父类的content
大概就是设置了padding就带上一起设置border-box
padding是内边距，对应的margin是外边距，在父类和子类盒子设定了宽度的情况，可以用margin：0 auto让子类盒子在父类盒子里居中
2、display
inline行内元素
不能设置宽高，可以设置padding，可以设置左右margin，不能设上下marginblock块元素inline-block行内块元素(和float
设置了这个属性后一行内的两个盒子中间会有空隙，要去除空隙只要给父元素加上font-size：0pxnone用于控制元素的显示和隐藏
定位
position
1、position:static；（默认）
static 遵循默认的文档流布局，top、left、right、bottom 属性都无效。
2、position:relative； （相对定位）
relative 先遵循默认的文档流布局也就是 static 布局，然后再在不改变页面布局的前提下根据 left、right、top、bottom 调整此元素的位置。是相对于static的位置进行的调整。不脱离文档流。
- 还有一点，
relative布局的父元素也可以用来拴住absolute布局的子元素
3、position:absolute;（绝对定位）
找到父节点中第一个非static布局的元素，按照其位置，根据 left、right、top、bottom 调整此元素的位置。脱离文档流，不给absolute元素预留位置。
4、position：fixed；(固定定位）
固定定位和绝对定位类似，但元素的包含块为屏幕视口（viewport），固定定位不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
- 有时候滚动时
fixed元素会被遮盖，这时候只要设置z-index的值大于0即可。（默认的非static元素z-index为0；z-index值越大，就越在上面，离观察者越近；同样的z-index， 在 HTML 中的元素越靠后，则越在最上面，离观察者越近）
*5、position:sticky;
float（浮动）
float有两个值 left、right。
float的使用场景：如果我们想要一组元素同时靠左靠右对齐，可以使用 float；如果我们想要文字围绕图片，可以使用 float,并且这才是float真正的用武之地。
- 消除浮动：哪个盒子有设置
float的元素，就在哪个盒子上消除浮动
.类名::after{
content: '';
display: block;
clear: both;
}
背景
背景颜色
1、纯色
background: red;
background: #ffffff;
background: rgba(200, 200, 200);
background: rgba(0, 0, 0, 0.5);
2、渐变色
用到 linear-gradient这个属性
另外，可以在颜色后面加 百分值，px 来规定渐变的起始位置。
背景图片
1、background-url:()
括号里直接加图片的地址，不用加引号
2、background-repeat: no-repeat;
当背景图片长或宽小于容器的长或宽时，用来避免图片重复
background-repeat的一些值
3、background-size
- 常用的
cover和contain的区别：
cover 就是满足图片长宽中较小的一方撑满屏幕。
contain 就是满足图片长宽中较大的一方撑满屏幕。
4、background的合并写法
比如
background: url(https://style.youkeda.com/img/ykd-components/logo.png) no-repeat center / contain;
三、css伪类
伪元素 ::before/::after
伪元素就是利用css代码在标签内部的前面，或者后面添加一个行内元素，这个行内元素可以理解为span。
/* before */
选择器::before{
/* 使用空白符号占位 */
content: '';
}
/* after */
选择器::after{
/* 使用空白符号占位 */
content: '';
}
清除浮动
我们需要一种技术可以让父元素包住浮动的子元素，以防影响布局，这种技术被称为清除浮动。
哪个盒子的子元素有浮动，就在哪个盒子上添加清除浮动
.clearfix::after{
content: '';
display: block;
clear: both;
}
事件伪类
1、鼠标移动上去的效果 hover
类:hover{
/* 要改变的效果 */
}
- 一个标签上可以添加多个
:hover效果，并且都会生效；同一个标签，如果使用伪类改变的属性相同，那么最终效果是后添加的效果 - 通过父元素的
:hover改变直接子元素的样式
<div>
<span></span>
</div>
div:hover>span{
background:blue;
}
2、鼠标点击的效果active
类:active{
/* 要改变的效果 */
}
另外hover一定要在active之前，否则不会生效
3、获取焦点后 focus
类:focus{
/* 要改变的效果 */
}
- 元素的显示和隐藏
在元素设置完属性之后，添加一个display:none;再在:hover/:active/:focus时 设置display:block;
列表伪类
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
匹配父元素中第一个子元素：
ul li:first-child{
...
}
匹配父元素中最后一个子元素：
ul li:last-child{
...
}
匹配父元素中第n个子元素：
ul li:nth-child(n){
...
}
/*括号里还可以写odd(奇数）或者even(偶数)*/
- 列表伪类的适用条件是，同一级别，相同元素
<!-- 第一级别 -->
<div>
<!-- 第二级别 -->
<div>
<!-- 第三级别 -->
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
</div>
下面的代码表示选中所有span标签中的第二个
span:nth-child(2){
}
css装饰
cursor
用于鼠标放到元素上去时发生变化
cursor的值
box-shadow
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
/*位数不足从前依次取即可*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
扫一扫
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
