随笔分类 - 前端
后端程序员学的前端
摘要：浮动实现 前面放置的两个div进行浮动，后面一个让其margin auto 居中 <style> /* 浮动三栏 */ .father div { width: 200px; height: 200px; } .left { background-color: red; float: left; }
阅读全文
摘要：设置在父元素的属性 设置在子元素的属性 justify-content 定义的是主轴方向的排列方式 flex-direction 定义主轴的方向 align-content 适用于多行的排列方式 align-items 适用于单行的排列方式 flex-grow 将剩余的部分作为增长的空间，值是增长占
阅读全文
摘要：相对位置和绝对位置 现有3个div如下 <style> .brother { width: 200px; height: 200px; background-color: yellow; } .father { width: 200px; height: 200px; background-colo
阅读全文
摘要：引出问题 这是一个正常的排版 代码如下 <style> .father { width: 200px; border: 1px solid red; } .son { width: 100px; height: 100px; background-color: blue; } </style> <d
阅读全文
摘要：盒⼦的位置和⼤⼩ 尺寸 宽度 width: ⻓度|百分⽐|auto ⾼度 height 边界 margin padding 上右下左|上下左右 padding与margin padding:10px 10px 10px 10px //上左下右 padding:5px 10px //上下边距5px、左
阅读全文
摘要：上下两个盒子边距合并问题 <style> * { margin: 0px; padding: 0px; } div { width: 100px; height: 100px; } .top { background-color: red; margin-bottom: 20px; } .botto
阅读全文
摘要：<style> * { margin: 0; padding: 0; } div { /* 宽高改变的是内容大小 */ width: 200px; height: 200px; } /* w3c标准盒子：盒子的总大小=内容+内边距+边框+外边距 */ /* 只要改变 内容，内边距，外边距，边框，盒子
阅读全文
摘要：<style> p::before { content: "当不想添加元素又想在其前面插入文字时使用"; } p::after { content: "当不想添加元素又想在其后面插入文字时使用"; } /* 当鼠标选择时发生 */ p::selection { color: red; } /* 选择
阅读全文
摘要：伪类选择器 选择第几个元素 <style> /* 类num后代li的第1个 */ .num li:first-child { color: red; } /* 类num后代li的最后一个 */ .num li:last-child { color: red; } /* 类num后代li的第3个 */
阅读全文
摘要：基础选择器 前端页面结构如下 <h1>h1:标签选择器对选定的所有的标签都生效</h1> <p>p:标签选择器对选定的所有的标签都生效</p> <div class="green">div:类选择器测试</div> <div id="myid">id选择器测试，id是唯一的</div> 效果展示如下
阅读全文
摘要：jQuery的基本使用 选择器 $('选择器') <p>我是p标签</p> <div class="div"> <p>我是div中的p</p> <div> <p>我是div下的div的p</p> </div> </div> <script src="./jquery-3.5.1.min.js"></
阅读全文
