随笔分类 - 前端学习笔记
摘要：空间旋转 目标:使用rotate实现元素空间旋转效果 语法 transform:rotateZ(值); transform:rotateX(值); transform:rotate(值); 拓展 rotate3d(x,y,z,角度度数) 用来设置自定义旋转轴的位置及旋转的角度 x,y,z取值为0-1
阅读全文
摘要：空间转换 目标:使用transform属性实现元素在空间内的位移,旋转,缩放等效果 空间:是从坐标轴角度定义的.x,y,z三条坐标轴构成了一个立体空间,z轴是视线方向 空间转换也叫3D转换 属性:transform 空间位移 目标:使用translate实现元素空间位移效果 语法 transform
阅读全文
摘要：渐变 目标:使用background-image属性实现渐变背景效果 渐变是多个颜色逐渐变化的视觉效果 一般用于设置盒子的背景 语法 线性渐变(从一个方向到另外一个方向) background-image:linear-gradient(transparent,rgba(0,0,0 .6)) 径向渐
阅读全文
摘要：旋转 **目标:**使用rotate实现元素旋转效果 语法 transform:rotate(角度) 注意:角度单位是deg 默认参照元素几何中心进行旋转 **技巧:**取值正负均可 取值为正,则顺时针旋转 取值为负,则逆时针旋转 转换原点 **目标:**使用transform-
阅读全文
摘要：平面转换 目标:使用transform属性实现元素的位移、旋转、缩放等效果 平面转换 改变盒子在平面内的位置形态(位移、旋转、缩放) 2D转换 平面转换属性 transform 位移 语法 transform:teanslate(水平移动距离,垂直移动距离) 取值(正负均可) 参照元素的原始坐标进行
阅读全文
摘要：上传矢量图: 问:如果图标库没有项目所需的图标怎么办? 答:IconFont网站上传矢量图生成字体图标 与设计师沟通,得到SVG矢量图 IconFont网站上传图标,下载使用 使用字体图标技巧实现网页中简洁的图标效果 <!DOCTYPE html> <html lang="en"> <head> <
阅读全文
摘要：字体图标 **目标:**使用字体图标技巧实现网页中简洁的图标效果 字体图标的的优点: **灵活性:**灵活地修改样式,例如:尺寸,颜色等 **轻量级:**体积小,渲染快,降低服务器请求次数 **兼容性:**几乎兼容所有主流浏览器 使用方便: 下载字体包 使用字体图标 图标库 Iconfont: ht
阅读全文
摘要：元素本身隐藏 场景:让元素本身在屏幕中不可见,如:鼠标hover之后元素隐藏 常见属性: visibility:hidden disolay:none 区别: visibility:hidden隐藏元素本身,并且在网页占位置 display:none隐藏元素本身,并且在网页中不占位置 注意点: 开发
阅读全文
摘要：光标类型 场景:设置鼠标光标在元素上时显示的样式 属性名:cursor 常见属性值: 属性值 效果 default 默认值,通常是箭头 pointer 小手效果,提示用户可以点击 text 工字型,提示用户可以选择文字 move 十字光标,提示用户可以移动 not-allowed 禁止点击 wait
阅读全文
摘要：定位层级 定位方式 属性值 相对谁移动 是否占位置 静态定位 static 不能通过方位属性移动 占位置 相对定位 relative 相对于自己原来的位置 占位置 绝对定位 absolute 相对于最近的且有定位的祖先元素移动 不占位置(脱标) 固定定位 fixed 相对浏览器可视区域 不占位置(脱
阅读全文
摘要：子绝父相 场景:让子元素相对父元素进行移动 含义: 子元素:绝对定位 父元素:相对定位 优点: 父元素是相对定位,则对网页布局影响最小 子绝父绝 场景:父元素已经通过绝对定位摆放好了位置 案例: <!DOCTYPE html> <html lang="en"> <head> <meta ch
阅读全文
摘要：定位 常见应用场景 解决盒子与盒子之间的层叠问题 定位之后的元素层级最高,可以层叠在其他盒子上面 可以让盒子始终固定在屏幕中的某个位置,不随滚动条滚动 设置定位的方式 定位方式 属性值 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed 定位的默认值
阅读全文
摘要：清除浮动 清除浮动带来的负面影响 因为子元素浮动了,脱离标准流,不再占用之前的位置导致无法撑开没有设置高度的父元素 父元素的高度为0 进而导致后续结构直接跑上来,所以我们要清除掉这种负面影响 额外标签法 在最后一个盒子下创建一个块级元素并设置样式clear:both 单伪元素清除浮动 .clearf
阅读全文
摘要：常见的网页布局 通栏布局:div不设置宽度,让盒子和浏览器等宽的布局 版心布局:网页主体内容放在一个有具体宽度并居中的孩子的布局,整体结构始终处于网页版面的中心 常用类名 .w .main .container .view .content 通栏嵌套版心布局:通栏盒子不设置宽度仅设置高并且添加一个背
阅读全文
摘要：浮动 浮动元素会脱离标准流,不占用之前的位置 浮动的元素(脱标)具有行内会元素的特点(一行显示多个,可以设置宽高) 找到边缘才会停止,顶部对齐 浮动的元素只会影响下面的标准流 一浮全浮:兄弟元素只要有一个浮动了,其他兄弟都要添加浮动 <!DOCTYPE html> <html lang="en">
阅读全文
摘要：结构伪类选择器 选中单个 选中第n个 :nth-child(n){} 选中第一个 :first-child{} 选中最后一个 :last-child{} 选中多个 选中从a个开始 :nth-child(n+a) 选中前a个 :nth-child(-n+a) 选中第a个到第b个 :nth-child(
阅读全文
摘要：padding 取值从上开始顺时针,没有值看对面 margin 取值从上开始顺时针,没有值看对面 margin:auto 盒子居中 必须设置width属性 元素必须是块级元素 行内元素设置垂直方向内外边距无效 上下块级元素同时设置了垂直外边距,中间的距离只会取大值 互相嵌套的块级元素,给子元素设置外
阅读全文
摘要：优先级 继承(永远都是0 )＜通配符选择器＜标签选择器＜id选择器＜行内样式＜!important 权重叠加计算 第一级 第二级 第三级 第四级 行内样式个数 id选择器的个数 类选择器个数 标签选择器个数 先比较第一级数字,如果比较出来了,之后统统不看 如果第一级数字相同,此时再去比较第二级数字,
阅读全文
摘要：元素显示模式相互转换 display:block 常用于增大a标签的相应区域 display:inline-block 转换成行块元素 HTML嵌套规则 块级元素可以存放任何元素,p标签除外 p标签中不要嵌套div,p,h等块级元素 行内元素最好只用来存放其他行内元素或者文字,a标签可以存放块级元素
阅读全文
摘要：背景颜色 background-color 颜色取值 关键字 rgb表示法 rgba表示法 十六进制 背景颜色默认值是透明:rgba(0,0,0,0),transparent 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色 背景图片 backgroun
阅读全文
