别和张东升去爬山了，来来来前端知识看起来！

最新推荐文章于 2024-01-29 21:40:16 发布

Sao_E

最新推荐文章于 2024-01-29 21:40:16 发布

阅读量366

点赞数 1

分类专栏：我的小成就文章标签： html css3 html5 css

本文链接：https://blog.csdn.net/sao_e/article/details/105890599

版权

我的小成就专栏收录该内容

15 篇文章 1 订阅

订阅专栏

优课达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;

关于居中

关于表单标签

单行文本输入框

<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，不能设上下margin
block块元素
inline-block行内块元素(和float
设置了这个属性后一行内的两个盒子中间会有空隙，要去除空隙只要给父元素加上 font-size：0px
none 用于控制元素的显示和隐藏

定位

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);

text-shadow

语法

Sao_E

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
别和张东升去爬山了，来来来前端知识看起来！

优课达p3前端的零碎记忆一、关于行内元素和块元素块元素：<h> <p>等：独占一行，可以设标签的height和width。属性display:block行内元素：<span>等：不换行，无法设height和width。属性display:inline两种元素要互相转换的话只需要改变display的值即可。另外display如果是none，那他...
复制链接

扫一扫