在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常 ...
分类:
其他好文 时间:
2020-06-30 17:42:29
阅读次数:
57
本文仅供参考:首先你要掌握的基础知识:row 行概念 <el-row></el-row>col 列概念 <el-col></el-col>col组件的:span属性的布局调整,一共分为24栏: 代码示例: <el-row> <el-col :span="24"><div class="grid-co ...
分类:
其他好文 时间:
2020-06-30 17:35:46
阅读次数:
125
每个HTML标签都会生成一个盒模型,盒模型是正常流布局非常重要的概念。盒模型由内边距(padding)+长度(width)+高度(height)+边框(border)+外边距(margin)组成。 1. 宽度(width)和高度(height) 盒模型有2种类型,怪异盒模型和标准盒模型,在不同盒模型 ...
分类:
Web程序 时间:
2020-06-29 21:30:24
阅读次数:
71
定位布局(Position)指元素可以脱离原来的位置,定位到页面中的任意位置。 定位布局以内边距(padding)区域的左上角为定位原点,分为相对定位(包括static及relative)和绝对定位(包括absolute及fixed)。 1. 静态定位(static) 静态定位是默认的文档布局方式, ...
分类:
Web程序 时间:
2020-06-29 21:26:45
阅读次数:
78
一、实现效果 1、当 input 输入框不符合要求且在 input 失焦时显示提示词,符合要求隐藏提示词 2、实现 input 组件基本功能 二、组件实现代码 1、HTML <template> <div class="labelInput"> <span class="title">{{title ...
分类:
其他好文 时间:
2020-06-29 17:05:52
阅读次数:
56
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试模板</tit ...
分类:
其他好文 时间:
2020-06-29 15:28:43
阅读次数:
40
按钮: {position: 'fixed',bottom: 0;} 如果 按钮覆盖了容器的内容,容器加个padding-bottom就行了 容器: {padding-bottom: 100px;} 这样的话,按钮会固定在手机屏幕的底部,如果要居中的话要设置 按钮{ margin:auto; lef ...
分类:
其他好文 时间:
2020-06-29 09:54:03
阅读次数:
103
1. 使用CSS选择器选择元素 基本选择器 $("h1").css("color", "blue"); //标签选择器 $(".price").css({"background":"#efefef","padding":"5px"}); //类选择器 $("#author").css("clor", ...
分类:
Web程序 时间:
2020-06-28 22:30:33
阅读次数:
75
参考文章: 1. 电路设计中用0欧电阻还是磁珠来隔离数字地和模拟地?:http://murata.eetrend.com/article/2020-06/1003615.html 电路设计中用0欧电阻还是磁珠来隔离数字地和模拟地? ...
分类:
其他好文 时间:
2020-06-28 19:01:58
阅读次数:
43
基本选择器 标签选择器$("h1").css("color","blue") 类选择器$(".price").css({"background":"颜色","padding":"5px"}) id选择器$("#author").css("color","颜色"); 并集选择器$(".intro,标签 ...
分类:
Web程序 时间:
2020-06-27 20:15:22
阅读次数:
82