【基础】页面开发常识
8、box-sizing:content-box | border-box border-box即使定义了border和padding也不会改变对象的实际宽度
7、background-clip:padding-box; 背景绘制区域
6、ul li 内容只设置font-size 行高用padding代替 距上面高度
5、消除ul 前的点 可以设置font-size:0;
4、white-space: nowrap 段落中的文本不进行换行:
3、float漂浮的元素,设置vertical-align: middle;垂直居中
2、autofocus
查看鼠标焦点目标位置
1、适配 水平垂直居中
initial-scale 页面初始缩放
minimum-scale=1 最小缩放
maximum-scale=1 最大缩放
user-scale=no 用户缩放
布局viewport = 设备宽度 = 度量viewpor
.mid {/*不等宽的水平垂直居中*/
position:absolute;
top:50%;
left:50%;
z-index:3;
transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
.mid2 {
justify-content: center;/*子元素水平居中*/
align-items: center;/*子元素垂直居中*/
display:-webkit-flex;
}
.intwoline {/*多行文本溢出*/
display:box !important;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-box-lines-clamp: 2;
}
1、怎么撑开float div元素 外部的包裹div 1、外部div css设置overflow:hidden 2、底部<div class="clear"></div> 清除浮动
2、div 内容均匀分布 如果元素不是灵活的项目,则 flex 属性不起作用。
外部div display:flex; 内部
如:#main div
{
flex:1;
}
其中,ltr
是初始值,表示left-to-right,就是从左往右的意思,再具体描述下,就是内联内容是从左往右依次排布的,我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边。
rtl
则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个CSS声明,则前后两个图片,默认情况下,DOM在前的就显示在右侧;而且是在容器的右端。
html body 默认的高宽是0 由内容给撑开。 采取绝对定位是:宽度 高度用100%
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 以ie,谷歌内核解析
<meta name="format-detection" content="telephone=no"> 手机上数字不可以拨号
png和jpg 作为背景时,png图片在上。
background-size:100%; 背景随着div变化
对ol列表 排序标记
list-style-position: inside; 数字排序
list-style-position: inside; 左对齐
px em rem 定义比较:
px :像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em :是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了
rem :是CSS3新增的一个相对单位(root em,根em) 相对浏览器 根目录
zoom
:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等