0、常见的行级元素和块级元素:
行级元素:div,table,form ,ul,ol,p,h1-h6,hr;
块级元素:a,select,input,textarea,img,label,br,i,b,span,strong;
1、position:absolute是根据离他最近的position:relative || sbolute || fixed 的元素定位;
Q:在IE8下使用Z-index失效,如何解决?
2、用opacity和Filter的组合替代Z-index。具体如下 :
.label-common-delete{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10;}
.label-common-delete span{
opacity: 0.2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
position: absolute;
left: 0;
top: 0;
width: 100%;
height:100%;
}
html代码:
<a href="http://mj-staples.blog.163.com/blog/javascript:;" ng-class="{'label-common-adddelete': comm.showdelete}"
class="label-common-delete" ng-show="deleteMask" ng-click="addLabelDelete(comm)">
<i></i>
扫描二维码关注公众号,回复: 1634786 查看本文章<span></span>
</a>
3、让背景图片不拉伸,可以设置他的Size:
background-size: 160px;
4、关于Z-index的使用,有时候会失效,关键是你不知道怎么用:
z-index是根据div的层级来对比,先对比div的级别,再对比Z-index的值;
1、要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:relative(定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed)样式。
2、不要给想控制“上、下”的元素设置z-index,而是对他们的父容器设置z-index样式。
3、当设置了定位与z-index的时候,有时候元素也不能浮在最上面 ,原因是你设置了当前节点的overflow:
5、适用于手机端,Css实现箭头图标:
.arrow-right:after{
content: "";width: 12px; height: 12px;border:2px solid #ccc;
border-top-color: transparent;
border-right-color: transparent; -webkit-transform:rotate(225deg);
margin-left: 8px;
position: absolute;
right: 17px; top: 17px;
}
6、Media的显示受他在Css文件 中的位置的影响
7、一般手机像素320px,white-space: nowrap;是文字在一条直线上。不换行 .
8、利用边框来实现箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>arrow</title> <style> .easytip-arrow { padding: 0px; margin: 0px; width: 0px; height: 0px; position: absolute; border-width: 10px; border-style: solid; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-color: rgb(102, 153, 204) transparent transparent; left: 25px; top: 66px; } </style> </head> <body> <!--利用Border来制作原生的箭头,把其他三个边去掉,就可以实现--> <div class="easytip-arrow"></div> </body> </html>
Q:当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同 一个层面,导致了DIV2无法把DIV1给撑开,这是一个老生常谈的问题,也是困扰很多刚接触DIV+CSS的朋友的一个问题。
那如何解决这个浮动了之后无法把容器撑开的局面呢?解决的方法这里介绍2仲。
第一种:在浮动结束的容器后面加上这段代码
<div style=”clear:both;”></div>
意思是清除浮动。
第二种:在外层DIV,也就是这里的DIV1的CSS里面加入以下CSS代码
overflow: auto;
这2种方法都可以实现DIV2把DIV1撑开。不过这里建议大家使用第一种方法,要养成一个习惯,在浮动应用完后消除浮动,这样后面的DIV就不会 继承这个浮动(就像在编程的时候,在打开数据库,操作完后,要养成个习惯在后面把数据库关闭)。也就是说浮动这个东西会被继承,除非消除这个浮动,才不会 让后面接着的DIV受到继承。其实不仅是DIV,其他的像P等其他的容器都会有继承的效应,大家要养成一个习惯记得要消除浮动。
Q:IE浏览器的样式问题,有时候背景图片的路径什么的都是对的,但是就是没有显示出来 ,调试一下,发现,是格式问题:
错误:
background: url("../../images/checkbox.png")no-repeat left center;/*no-repeat 这里没有与前面隔开,所以报错*/
正确:
background: url("../../images/checkbox.png") no-repeat left center;/*这个背景在IE中记得空格隔开。*/
10、内联元素不能包含自身
什么是内联元素?
像下面这些:
img - 图片
input - 输入框
label - 表格标签
q - 短引用
select - 项目选择
small - 小字体文本
span - 常用内联容器, 定义文本内区块
...
注:内联元素不能像这样 <span><span></span></span>
11、控制鼠标指针样式
<span style="cursor:*">文本或其它页面元素</span>
把 * 换成如下15个效果的一种:
hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。
下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧!
hand是手型
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果
12、用 em 替代 px 作为需要自适应的网页元素的单位,em的缺点是他的继承性,如果不想继承,可以用rem,它是相对文档根元素继承。
13、Css用一张背景图片撑满DIV
background:url("../img/list.png") no-repeat left center;
background-size:100% 100%;