HTML&&CSS
关注
分享
扫一扫
文章平均质量分 66
记录自己的学习笔记，进个人用于复习使用，参考资料来自b站尚硅谷视频及其源码，用Typora编写，没有截取编译器所实现的图片效果，若有需求，各位看官建议看其他人总结的，更为直观
Edshine
这个作者很懒，什么都没留下…
展开
-
20 弹性盒
弹性盒（flex）[TOC]1.弹性盒的基本概念flex（弹性盒，伸缩盒）是css中的又一种布局手段，它主要用来替代浮动来完成页面的布局flex可以使元素具有弹性，让元素可以跟随页面的改变而改变弹性容器我们要使用弹性盒，必须先将一个元素设置为弹性容器我们通过display来设置弹性容器display：flex设置为块级弹性容器display：inline-flex设置为行内的弹性容器display:flex不同点：flex独占一行inline-flex不会独占一行原创 2021-10-10 15:44:28 · 118 阅读 · 0 评论 -
19 LESS
less简介：less是一门css的预处理语言less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性：像对变量的支持，对mixin的支持less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行1.安装插件在vscode中搜索less，点击直接安装2.编写less快捷创建三个盒子的方法box$*3/*按下回车原创 2021-10-10 15:42:27 · 113 阅读 · 0 评论 -
18 变形：平移，旋转，缩放
变形：平移，旋转，缩放文章目录变形：平移，旋转，缩放1.基础知识0.平移1.绝对定位：2.table-cell的方式3.transform的方式：浮出效果：2.Z轴平移3.旋转4.缩放1.基础知识变形就是通过css来改变元素的形状或位置变形不好会影响页面的布局transform用来设置元素的变形效果0.平移translateX()沿X轴方向平移translateY()沿Y轴方向平移translateZ()沿Z轴方向平移百分比是相对于自己位置计算的几种水平垂直居中方式对比：1.原创 2021-10-03 19:30:34 · 108 阅读 · 0 评论 -
17 动画
动画动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤@keyframes test { /* from表示动画的开始位置 也可以使用 0% */ from{ margin-left: 0; background-color: orange; } /* to动画的结束位置 也可以使用100%*/原创 2021-10-03 19:27:43 · 65 阅读 · 0 评论 -
16 过渡
过渡1、过渡过渡（transition）通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提升用户的体验属性值transition-property：指定要执行过渡的属性多个属性间使用,隔开；如果所有属性都需要过渡，则使用all关键字；大部分属性都支持过渡效果；注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；transition-duration：指定过渡效果的持续时间时间单位：s和ms（1s=1000ms）transition-d原创 2021-10-03 19:27:05 · 82 阅读 · 0 评论 -
15 表格
表格文章目录表格1.表格2.长表格3.表格的样式4.表单：5.表单补充1.表格在现实生活中，我们经常需要使用表格来表示一些格式化数据：课程表、人名单、成绩单…同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspan 纵向的合并单元格colspan 横向的合并单元格例如：<body> <t原创 2021-10-03 19:25:22 · 103 阅读 · 0 评论 -
14 渐变
渐变文章目录渐变1.线性渐变2.径向渐变1.线性渐变通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果！！渐变是图片，需要通过background-image来设置线性渐变，颜色沿着一条直线发生变化background-image:linear-gradient(red，yellow)background-image:linear-gradient(to right red，yellow)/*线性渐变的开头可以指定渐变方向，例如to left ，right，bot原创 2021-10-03 19:24:20 · 91 阅读 · 0 评论 -
13 雪碧图
13 雪碧图详情视频参考：https://www.bilibili.com/video/BV1XJ411X7Ud?p=92&spm_id_from=pageDriver解决图片闪烁的问题：可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题这个技术在网页中应用十分广泛，被称为css-sprite，这种图我们称为雪碧图雪碧图的使用步骤：先确定要使用的图标测量图标的大小根据测原创 2021-10-03 19:22:44 · 64 阅读 · 0 评论 -
12 背景
12 背景background-color 设置背景颜色background-image 设置背景图片如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满如果背景图片大小大于元素，则背景图片一部分会无法完全显示如果背景图片大小等于元素，则背景图片会直接正常显示background-repeat 设置背景图片的重复方式repeat 默认值，背景图片沿着x轴和y轴双方向重复repeat-x 背景图片沿着x轴方向重复repeat-y 背景图片沿着y轴方向重复no-re原创 2021-10-03 19:20:29 · 72 阅读 · 0 评论 -
11 字体
11 字体文章目录11 字体1.字体相关的样式2.字体格式font-family3.font-face4.图标字体（iconfont）5.图标字体其他使用方式6,行高6.1 行高（line height）6.2 字体框7.字体的简写属性8 文本的对齐方式8.1 水平对齐8.2 垂直对齐8.3 图片对齐９其它9.1 **text-decoration 设置文本修饰**9.2 **white-space 设置网页如何处理空白**1.字体相关的样式color：用来设置字体颜色font-size：字体大小原创 2021-10-03 19:18:08 · 120 阅读 · 0 评论 -
盒子模型图片
原创 2021-09-17 22:24:21 · 129 阅读 · 0 评论 -
10.定位
定位文章目录定位@[toc]1 相对定位2 绝对定位1基础2.布局1水平方向的布局2 垂直方向布局3 固定定位4 粘滞定位3 元素层级定位（position）的概念定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用position属性来设置定位可选值：static 默认值，元素是静止的没有开启定位relative 开启元素的相对定位absolute开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘滞定位1 相对定位当这个元素的p原创 2021-09-17 21:43:47 · 76 阅读 · 0 评论 -
09.高度塌陷和BFC
高度塌陷和BFC文章目录高度塌陷和BFC1.高度塌陷2.BFC3. clear4.高度塌陷的最终解决方案（after）***after***5.clearfix（清除浮动修复）1.高度塌陷在浮动布局中，父元素的高度默认是被子元素撑开的当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！ .oute原创 2021-09-16 23:42:27 · 66 阅读 · 0 评论 -
08.页面布局的简单尝试
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-09-16 22:10:28 · 65 阅读 · 0 评论 -
07.浮动
浮动文章目录浮动1.浮动的简介2.浮动的特点3.浮动的其它特点1.浮动的简介通过浮动可以使一个元素向其父元素的左侧或者右侧移动使用float属性来设置于元素的浮动none默认值，元素不浮动left元素向左浮动right元素向右浮动注意元素设置浮动以后，水平布局的等式便不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动<style>.box1{ width: 400px; height: 2原创 2021-09-16 21:23:36 · 69 阅读 · 0 评论 -
06. 盒子内容补充
盒子内容补充文章目录盒子内容补充1 盒子的大小2 轮廓和圆角2.1 轮廓2.2 阴影：2.3 圆角1 盒子的大小.box1{ width: 100px; height: 100px; background-color: #bfa; padding: 10px; border: 10px red solid; box-sizing:border-box }默认情况下，盒子可见框的大小由内容区和边框共同决定box-sizing：用来设置盒子尺寸的计算方原创 2021-09-15 23:59:03 · 62 阅读 · 0 评论 -
05.盒模型
盒模型文章目录盒模型1.文档流（normal flow）2.块元素在文档流中有什么特点：3.行内元素4.盒子模型4.1 内容区（content）4.2 边框（border）4.3 内边距（padding）4.4 外边距(margin)5 元素在水平方向的布局6 垂直方向布局7 边距折叠7.1 兄弟元素7.2 父子元素8 行内元素的盒模型9 默认样式1.文档流（normal flow）网页是一个多层的结构，一层摞着一层通过CSS可以分别为每一层来设置样式作为用户来讲只能看到最顶上一层原创 2021-09-14 22:05:39 · 53 阅读 · 0 评论 -
04.继承，选择器权重及长度与颜色单位
继承，选择器权重及长度与颜色单位文章目录继承，选择器权重及长度与颜色单位1.继承2.选择器的权重3.长度单位3.1 像素3.2 百分比3.3 em3.4 rem4 颜色单位1.继承样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上继承是发生在祖先后后代之间的继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式注意：并不是所有的样式都会被继承比如：背景相关的，布局相关原创 2021-09-13 21:46:36 · 95 阅读 · 0 评论 -
00.TO THE BEGINNING
TO THE BEGINNING学习路线参考B站教程:2021年度全网最全Web前端学习路线软件以下软件皆为视频中所出现和使用的开发软件或者文档Zeal离线文档：https://zealdocs.org/NotePad下载地址：https://notepad-plus.it.softonic.com/Sublime官网：https://www.sublimetext.com/VS Code官网：https://code.visualstudio.com/具体安装插件原创 2021-09-11 11:42:19 · 68 阅读 · 0 评论 -
01 前端简介
01 前端简介1.软件分类系统软件：WindowLinuxmacOS应用类型软件：QQ等常见应用游戏软件2.客户端与服务器通常情况下，现在的软件一般由两个部分组成：客户端：用户通过客户端来使用软件。服务器：服务器负责在远程处理业务逻辑。2.1 客户端客户端的形式文字客户端：占老的方式，通过命令行来使用软件图形化界面：通过点击拖动等来使用软件。Windows中、macOS中、Android、iOS中的大部分应用。（C/S架构）网页：通过原创 2021-09-11 11:43:20 · 59 阅读 · 0 评论 -
02.字符实体和语义标签
字符实体和语义标签##字符实体 <!-- 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格 在HTML中有些时候，我们不能直接书写一些特殊符号 比如：多个连续的空格，比如字母两侧的大于和小于号 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符） 实体的语法： &实体的名字; 空原创 2021-09-11 11:44:07 · 318 阅读 · 0 评论 -
03.CSS-1简介，语法，选择器
CSS文章目录CSS1 CSS简介1.1 内联样式（行内样式）1.2 内部样式表1.3 外部样式表2 CSS语法2.1CSS注释2.2 基本语法2.2.1 选择器2.2.2 声明块3 CSS常用选择器3.1 元素选择器3.2 ID选择器3.3 类选择器3.4 通配选择器3.5 复合选择器3.5.1 交集选择器3.5.2 选择器分组（并集选择器）3.6 关系选择器3.6.1 子元素选择器3.6.2 后代元素选择器3.6.3 兄弟元素选择器3.7 属性选择器3.8 伪类选择器3.8.1关于超链接与伪类3.9原创 2021-09-12 13:24:05 · 95 阅读 · 0 评论