前端易遗忘及细节注意杂谈

111 阅读2分钟

个人笔记

1.对页面缩小放大 边框border不会变 始终为1px 有可能导致缩小后宽度不够浮动溢出下一行,写板块需要加边框时最好用怪异盒模型

2.防止页面放大浮动元素溢出,设置最小宽度,添加样式: html{min-width:版心宽度}

3.text-indent,margin的属性允许属性值为负数,padding的属性值不可以为负数

4.瀑布流(多列布局column-count)要给子元素加break-inside: avoid; 断点才会正常

5.移动端布局要先设置meta理想视口 和 htmlbody100%自适应窗口大小

6.flex布局中用flex1对同类标签作用时,想特挑一个设置主轴方向的长度增加需加flex:none才能生效,不然会继承按照flex:1去拉伸而没有变化,不过文字的行高或者大小则能直接把尽管设置了flex:1的元素撑大。

7.i span等行内元素有定位后可以直接写大小

8.渐变 background或者background-image: linear-gradient(颜色,颜色); 注意不能写background-color,注意image没有s

9.vertical-align:子元素与父元素文本的对齐方式,vertical-align:top可用于解决div套img产生的bug底部间距

  1. class可以起两个名字,引号里空格隔开;

  2. 加手型效果 cursor:pointer

  3. 去除输入框外围凸显框 outline:none

    搜索框:表单元素一行显示,先浮动,改边框,去掉外轮廓

input,button{
            height: 30px;
            box-sizing: content-box;
            float: left;
            border: 1px solid #000;
        }

13.阴影:

文本阴影 text-shadow:1px水平 1px垂直 1px模糊度 颜色

盒子阴影 box-shadow:inset里外 0px水平右 1px垂直下 1px模糊度 1px缩放大小 颜色

14.透明:background用rgba 最后一个值0-1 只是背景透明; opacity :0-1; 但会把整个元素整体一起透明。

15.*多行显示省略号

   text-overflow: ellipsis;
   display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

16.待更