【基础】页面开发常识

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的重叠等

 

posted @ 2016-03-15 18:40  五艺  阅读(183)  评论(0编辑  收藏  举报