![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML/CSS
文章平均质量分 73
秃如其来的秃头
种一棵树最佳时间是十年前,其次是现在!
如果一直躲在舒适区,最终一定会进入恐慌区。
展开
-
前端代码规范插件 vscode eslint stylelint
前端代码规范编辑器格式统一然后项目根目录添加文件 .editorconfig,编写以下配置:# http://editorconfig.orgroot = true[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true[*.md]insert_final_newline = f原创 2021-02-25 14:13:27 · 919 阅读 · 0 评论 -
HTML5中<section>和<article>的区别
HTML5中和的区别HTML5带出了一系列新元素,被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:和。最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素?一、section元素 从字面理解就是区块、部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单、文章正文、文章的评论等。 1、sect...转载 2019-12-21 21:38:08 · 868 阅读 · 0 评论 -
前端插入图片(img)和背景图片(background)应用区别
前端插入图片(img)和背景图片(background)应用区别img1、会占用资源数background 背景图1、图片的尺寸非常好控制 css3中 的 background-sizediv{ background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat;}...原创 2019-12-21 20:48:35 · 3299 阅读 · 0 评论 -
css flex 弹性盒子布局
css flex 弹性盒子布局前言CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强。其强大的伸缩性和自适应性,在网页开中可以发挥极大的作用。flex 布局 是加在父元素上面得,然后主轴和侧轴,相当于 x , y 轴(这句话要注意),但是有属性可以控制其转换,下面会有说明,所以 才会有 主轴 和 侧轴 得说法,并没有用 ...原创 2019-11-25 14:52:33 · 524 阅读 · 0 评论 -
响应式 Web 设计(一)布局 及其 标签语义化
响应式 Web 设计响应式Web弹性网格布局、弹性图片/媒体、媒体查询所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。设计思路即先为小屏幕设计内容、样式,然后再向大屏幕扩展为什么不用 width:100% ?要实现图片的自动缩放,也可以使用更通用的 width 属性,比如width:100% 。然而,这条规则在这里的效果不同。如...原创 2019-11-24 23:51:17 · 415 阅读 · 0 评论 -
Vue2.x ElementUI登录表单中加入验证码倒计时功能
Vue2.x ElementUI登录表单中加入验证码倒计时功能部分Vue代码如下:<el-form ref="loginForm" :model="loginForm" status-icon :rules="rules" class="login-form"> <el-form-item label="" prop="code" class="pr"> ...原创 2019-11-13 14:20:27 · 2079 阅读 · 6 评论 -
Vue
使用JQ 和 使用框架的区别数据和视图得分离,解耦(开放封闭原则 )以数据驱动视图,只关心数据变化,DOM 操作被封装对MVVM的理解及三大要素MVCVue 的三要素响应式:vue 如何监听到data 得每个属性变化?模板引擎:vue 的模板如何被解析,指令如何处理渲染:vue的模板如何被渲染成html?以及渲染过程Vue中怎么实现响应式什么是响应式修改da...原创 2019-10-28 20:49:35 · 102 阅读 · 0 评论 -
BFC的作用及使用场景
BFC的作用及原理常见布局模式1、流动模型(Flow)自上而下按顺序垂直延伸分布从左到右水平分布显示2、浮动模型3、层模型层模型有三种形式:1、相对定位(position: relative)2、绝对定位(position: absolute)3、固定定位(position: fixed)BFC的基本概念BFC(Block formatting...原创 2019-10-19 15:26:06 · 375 阅读 · 0 评论 -
JS多种方法实现动态选择选项卡
JS多种方法实现动态选择选项卡首先贴出HTML 和 CSS 这个不是重点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2019-08-20 22:27:08 · 1351 阅读 · 0 评论 -
CSS相对定位和绝对定位详解
CSS相对定位和绝对定位详解如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道。不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦!元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1、边偏移边偏移属...原创 2019-08-15 17:12:27 · 1495 阅读 · 0 评论 -
css浮动以及清除浮动
css浮动以及清除浮动CSS的定位机制有3种:普通流(标准流)、浮动和定位。一、什么是浮动?元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。选择器{float:属性值;} 属性值有三个 : left right none(元素不浮动 默认值)1、浮动详细内幕特性浮动脱离标准流,不会占位置,但是会影响标准流。浮动只有左右浮动。...原创 2019-08-14 20:25:46 · 184 阅读 · 0 评论 -
行内元素、块级元素和行内块元素区别
行内元素、块级元素和行内块元素区别1、块级元素的特点(1)每个块级元素都从新的一行开始,并且其后得元素也另起一行(2)元素的 高 宽 行高顶和底边距离都可以设置(3)元素宽度在不设置得情况下,是它本身父级元素得100% (和父元素得宽度一致),除非设定一个宽度。(4)可以容纳内联元素和其他块元素2、行内元素的特点(1)和其他元素都在一行上(2)元素的 高 宽 行高顶和底边距离都...原创 2019-08-14 17:43:35 · 306 阅读 · 0 评论