前端小技巧

梦里梦外; 2022-04-10 02:40 278阅读 0赞

ps快捷键:  
ctrl+r标尺 ctrl+:隐藏辅助基线 ctrl+d取消选区 F7图层

css 书写顺序  
正确的书写顺序可以减少浏览器的reflow回流,提升浏览器渲染dom的性能  
(1)定位属性:position display float left top right bottom overflow z-index  
(2)自身属性:width height padding border margin background  
(3)文字样式 font-family font-size font-style font-weight color  
(4)文本属性:text-align vertical-align text-indent text-decoration

`<a href=”javascript:;”><a> 伪协议 不跳转`  
或者  
`<a herf=###""><a>`

背景图片模糊:background-size:100%

干掉横向滚动条

Overflow-x:hidden
    }

默认行为: a便签跳转;button点击, form表单submit;  
a标签不继承父元素的颜色文字/浏览器默认是blue  
line\_height 约等于1.1-1.3px默认值  
默认字体是16px; 1.1\*16=17.6  
行高与容器高度一致,垂直居中,一行文字,且只对一行文字有效  
继承权重为0,权重可以叠加但是不能进位  
背景图像不能撑起一个盒子  
margin:0 auto;只对块级元素居中有效  
text-align:center;文本居中有效/文字,图片  
文字默认是顶对齐；  
li的高度是从上往下量的，从本行文字顶到下一行文字顶端；  
form可以嵌套任意标签但是table不能嵌套table标签  
文字不参与浮动,不会跑到盒子底下去  
list-style:none解决的padding40px  
table默认宽高是0  
box-shadow可以设置两组属性:  
行内元素浮动转换成行内块的显示模式  
如果给元素span设置宽高:  
1转换行内块/快 2 float 脱标 3 absolute/fixed 都脱标  
通栏是不定义宽度的和浏览器保持一致  
代码换行会产生空格-缝隙  
行内块换行有缝  
outline:none/0;清除轮廓线  
resize:none;防止文本域拖拽  
图片跟文字是基线对齐的,所以有缝,就是怪异模式,三像素  
vertical-align:middle  
行高比高大的时候,文字下面显示  
input type=’hidden’ 隐藏域的应用通常用于传值和保存值  
表单提交的实际上是每个域的value值  
checkbox特殊name=’hobby\[\]’ 数组

**vscode/subline 快捷使用**  
table>tr*10>td*5  
span\{呵呵\} + i\{么么\}+em\{内容\}+img\[属性值\]\{内容\}  
span\{ KaTeX parse error: Expected 'EOF', got '\}' at position 1: \}̲这里面的就是数字  
.nac>a\[href=”\#”’\]\*8  
a\[\#\]\{导航栏\}\*几个 ----tab 快捷方式

常用插件: 懒加载

常用库: Jquery zepto less sass art-template template underscore node php axios jsonp fetch swiper iscroll fullpage  
mui bootstrap element-ui