个人笔记
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底部间距
-
class可以起两个名字,引号里空格隔开;
-
加手型效果 cursor:pointer
-
去除输入框外围凸显框 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.待更