随笔分类 - web前端
摘要：JS的组成 1.ECMAScript javascript语法 2.DOM 页面文档对象模型 3.BOM 浏览器对象模型 JS的引入方式 ⚠️注意： js 可以在页面的任何地方使用 1.内嵌JS：通过 script 标签引入：在页面的任何地方 2.外链JS：通过 script 标签的src 属性引入
阅读全文
摘要：介绍： Sass (Syntactically Awesome StyleSheets) ，Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高
阅读全文
摘要：CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需
阅读全文
摘要：元素默认是基线对齐 vertical-aligin: 图片和文本的垂直方向的对齐方式 设置对齐方式时，要把所需要对齐的元素都添加该属性，并且取值保持一致 适用场景： 适用于行内块元素和行内元素，以及表格单元格（table-cell）元素垂直方向对齐方式，不能用于块级元素 取值： baseline 基
阅读全文
摘要：一、过渡transition 特点： 过渡是两个状态之间的过渡，只能从一种状态过渡到另一种状态 过渡需要事件触发，不能自动执行 综合属性: 可以同时控制多个属性进行过渡，多个属性之间用逗号隔开 CSS transition: width 2s linear 1s,height 2s linear 1
阅读全文
摘要：1.单行文本水平居中 说明： 只针对块元素中的行内元素，或者 行内块元素，使用text-align:center; 属性 HTML： <div class="box"> <span> 我是文字 </span> </div> CSS: .box { background-color: pink; he
阅读全文
摘要：1.上下margin重叠问题 HTML: <div class="box1"></div> <div class="box2"></div> CSS: * { margin: 0; padding: 0; } .box1 { height: 100px; width: 100px; backgrou
阅读全文
摘要：1.影响 让子元素默认横向排列 （默认主轴：水平方向；相反侧轴：垂直方向） 弹性盒子会把行内元素，变成块元素 只有一个元素时，使用margin:auto 自动居中 2.修改主轴方向 属性：flex-direction 属性值： row (默认:水平排列) row-reverse 水平取反排列 col
阅读全文
摘要：1.单行文本溢出显示省略号 HTML: <div> Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码 编辑器,编辑器中内置了扩展程序管理的功能。 </div> CSS: div{ he
阅读全文
摘要：以阿里矢量图标库为例: 1.添加图标 1.登录网站 2.找到自己需要的图标，点击加入购物车 3.点击左上角购物车图标，讲刚刚选中的图标添加到项目，选中要加入的项目，点击确定 2.使用方式（下载后使用） 1.在项目设置里面，勾选这几个选项，保存 2.将该项目的图标下载到本地，会得到一个压缩包 3.下载
阅读全文
摘要：1.怪异盒模型 语法：box-sizing:border-box; padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度。 HTML : <div> 怪异盒模型 </div> C
阅读全文
摘要：CSS伪类 1.链接伪类 :link 未访问链接 :visited 已访问链接 :hover 鼠标划过链接 :active 已选中的链接 2.结构伪类 first-child 选择父元素的第一个子元素。 last-child 选择父元素的最后一个子元素。 nth-child(n) n取值：数字，ev
阅读全文
摘要：字体模块（@font-face） 语法： font-family:你的字体名称 src:url(你的字体文件路径) font-weight：你的字体粗细 font-style:你的字体样式 HTML Code: <div>天道酬勤</div> CSS Code: @font-face { font-
阅读全文
摘要：文本阴影（text-shadow） 属性: 水平阴影位置 垂直阴影位置 阴影模糊距离 阴影颜色 ; HTML Code: <div class="box1"> 文本阴影 </div> CSS Code: .box1{ width: 100px; height: 100px; line-height:
阅读全文
摘要：radio单选框，默认样式小圆圈，默认不会互斥，想要互斥有需要给一组单选框添加相同的name属性 <div>1.你对京东首页满意度如何</div> <div> <input type="radio" name="aaa" id="">非常满意 </div> <div> <input type="ra
阅读全文
摘要：父元素不写高度时，子元素写了浮动之后，父元素会发生高度塌陷 示例代码: HTML代码: <div class="box"> <div class="box-l">left浮动</div> <div class="box-r">right浮动</div> </div> CSS代码: .box{ wid
阅读全文
摘要：缝隙未解决前缝隙解决后 1. 方案一 给父元素设置font-size:0;然后给子元素重新设置font-size style="font-size:0;" <style> <!--父元素设置font-size:0;--> .bg{ font-size: 0; } .box1{ height: 100
阅读全文
摘要：一、盒子模型 1.内边距padding 1个值，4个方向一样 padding：10px; 2个值，上下，左右 padding：10px 10px ; 3个值，上 左右 下 padding：10px 10px 10px; 4个值，上 右 下 左 padding：10px 10px 10px 10px;
阅读全文
摘要：1.背景属性 background background-color 背景颜色 background-color: red ; background-image 背景图片 background-image: url() ; background-repeat 背景图片的平铺 background-r
阅读全文
摘要：CSS属性 1.文本属性 font-size 字体大小 单位是px，浏览器默认是16px，设计图常用字号是12px font-family 字体 多个字体中间用逗号连接，先解析第一个字体，如果没有解析第二个人字体 color 字体颜色 color:red; color:rgb(255,0,0)取值在
阅读全文
浙公网安备 33010602011771号