结构-行为-样式-Css笔记

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>

<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%;

结构-行为-样式-Css笔记

猜你喜欢