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

优课达p3前端的零碎记忆

一、HTML

关于行内元素和块元素
  1. 块元素:<h> <p>等:独占一行,可以设标签的heightwidth。属性display:block。另外height是改变块元素的,注意和line-height的区别。
    -----行高:
    在这里插入图片描述
    另外line-height主要有两个作用:
    1、改变段落中行于行之间的距离
    2、使文字上下居中(让他等于区域的高度

  2. 行内元素:<span>等:不换行,无法设heightwidth。属性display:inline

  3. 两种元素要互相转换的话只需要改变display的值即可。另外display如果是none,那他就消失了

  4. 元素内文字居中的方法

/* 使用text-align属性让文字左右居中 */ 
        text-align: center;`
 /* 使用行高让文字上下居中,让行高等于height */
    line-height: 100px;
  • 关于居中
    在这里插入图片描述[在这里插入图片描述](https://img-blog.csdnimg.cn/20200626120855825.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nhb19F,size_16,color_FFFFFF,t_70)
    在这里插入图片描述
关于表单标签
  1. 单行文本输入框
<form action="">
<input type="text" placeholder="昵称" name="nick" value="小明" />
</form>

效果如下
显示效果
关于只读的两个属性:disabledreadonly,区别如下:
在这里插入图片描述

  1. 多行文本输入框
<!-- name属性表示表单元素的名称,placeholder属性表示表单元素的占位文本 -->
<textarea
  name="sign"
  rows="5"<!--行数(高度)-->
  cols="30"<!--文本域的可视宽度-->
  placeholder="请输入个性签名"
></textarea>

效果如下:
在这里插入图片描述

  1. 密码输入框
<!-- type属性表示表单元素的类型,name属性表示表单元素的名称,placeholder属性表示表单元素的占位文本 -->
<input type="password" name="password" placeholder="密码" />

效果如下:
在这里插入图片描述

  1. 单选框
<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>

效果如下
在这里插入图片描述

  1. 复选框
<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>

拥有相同的name属性,就是同一个多选问题的项
效果如下:
在这里插入图片描述

  1. 选项菜单
<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>
...
  1. 按钮button
<button type="submit">注册</button>

效果如下:
在这里插入图片描述

button标签之间可以加入文字,图片,图标等

  1. 芜湖,来个合集
    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-boxborder-boxwidth包含了contentpaddingborder,所以设paddingborder后,不会超过父类的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 遵循默认的文档流布局,topleftrightbottom 属性都无效。
2、position:relative; (相对定位)
relative 先遵循默认的文档流布局也就是 static 布局,然后再在不改变页面布局的前提下根据 leftrighttopbottom 调整此元素的位置。是相对于static的位置进行的调整。不脱离文档流。

  • 还有一点,relative布局的父元素也可以用来拴住absolute布局的子元素

3、position:absolute;(绝对定位)
找到父节点中第一个非static布局的元素,按照其位置,根据 leftrighttopbottom 调整此元素的位置。脱离文档流,不给absolute元素预留位置。
4、position:fixed;(固定定位)
固定定位和绝对定位类似,但元素的包含块为屏幕视口(viewport),固定定位不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

  • 有时候滚动时fixed元素会被遮盖,这时候只要设置z-index的值大于0即可。(默认的非static元素z-index为0;z-index值越大,就越在上面,离观察者越近;同样的 z-index, 在 HTML 中的元素越靠后,则越在最上面,离观察者越近)

*5、position:sticky;

float(浮动)

float有两个值 leftright
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
    在这里插入图片描述
  • 常用的covercontain的区别:

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

语法


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值