![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML/CSS
文章平均质量分 50
HTML/CSS学习总结
weixin_45070265
个人的前端学习记录
展开
-
如何理解BFC(块级格式化上下文)
一、什么是BFC?BFC是(Block Formatting Context)块级格式化上下文,BFC是css布局的一个概念,是一个环境,创建了BFC的元素的子元素不会受外面其他元素的影响。二、如何创建BFC?html根元素默认会创建BFCoverflow:非visibledisplay:inline-blockposition: absolute/fixedfloat: 非nonedisplay: table-cell、flex、inline-flex三、开启BFC的作用1.解决使原创 2021-12-20 14:16:46 · 363 阅读 · 0 评论 -
css的预编译器less的使用
安装npm install -g less功能嵌套:模仿html的结构,使得代码更加简洁清晰变量:将常用的值定义为变量,使用@符号定义混合(mixins):将一组属性集合在多处使用映射(map)html代码 <div class="lessBox"> <section class="top"> <div class="top_left">文字颜色top_left</div>原创 2021-02-18 17:07:01 · 93 阅读 · 0 评论 -
css3动画animation应用(弹跳小球)
效果一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>来回滚动</title> <style> * { m原创 2020-09-09 15:53:17 · 556 阅读 · 0 评论 -
css3渐变(文字颜色渐变),变形与过渡
背景颜色渐变background:linear-gradient(45deg,rgb(241, 227, 99) ,rgb(243, 160, 6), rgb(243, 121, 6))文字渐变色background:linear-gradient(45deg,rgb(238, 217, 32) , rgb(243, 6, 6),rgb(46, 243, 6),rgb(6, 148, 243)); -webkit-background-clip: text; color: transparent原创 2020-09-09 11:37:23 · 642 阅读 · 0 评论 -
H5本地存储与会话存储-希望清单
本地存储与会话存储介绍1.本地存储(localStorage)和会话存储(sessionStorage)是HTML5的Web存储提供的客户端存储技术.2.会话存储(sessionStorage),顾名思义"对话过程中的数据", 数据是存在会话过程,会话结束数据也就销毁. 会话存储的生命周期从一个页面打开开始,到这个页面关闭结束.会话存储中的主要方法:①添加会话:sessionStorage.setItem(key,val)②修改:sessionStorage.setItem(key,newVal)原创 2020-08-24 22:40:42 · 961 阅读 · 0 评论 -
模拟音乐播放时图片旋转效果(css3)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ .原创 2020-08-15 13:18:01 · 1429 阅读 · 3 评论 -
js原生VS jQuery实现分享到功能
HTML结构和css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2020-08-13 13:21:29 · 238 阅读 · 0 评论 -
实现元素垂直居中的几种方法
一、flex弹性布局方式 实现居中HTML结构 <div class="wrap"> <div class="content"></div> </div>CSS样式一 <style> .wrap{ width: 400px; height: 400px; background-color: beige; /* 实现垂直居中-flex */ display:原创 2020-06-27 11:56:10 · 127 阅读 · 0 评论 -
相对定位、绝对定位,固定定位的对比
原创 2020-06-18 15:42:04 · 132 阅读 · 0 评论 -
浮动造成元素脱离文档流的问题如何解决??BFC
原创 2020-06-18 15:37:11 · 575 阅读 · 0 评论 -
CSS-盒模型笔记
原创 2020-06-18 15:31:40 · 51 阅读 · 0 评论 -
CSS3—2D转换transform属性的主要方法
一、2D转换能做什么?通过转换(transform),能对元素进行移动、缩放、转动、拉伸。也就是改变元素的形状、尺寸和位置。二、2D转换方法水平和垂直移动translate(x,y),水平移动translateX(n),垂直移动translateY(n),通过translate()方法,可以根据给定的left和top位置,相对移动当前元素。例如:translate(50px,100...原创 2020-04-26 10:50:47 · 280 阅读 · 0 评论 -
三列布局(左右固定,中间自适应)四种方式
效果图一、flex弹性布局 <style> .container{ display: flex; } .left{ /* flex:0 0 100px; 不扩展、不收缩、固定宽度100px*/ height: 400px; back...原创 2020-04-24 23:12:03 · 3353 阅读 · 3 评论