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笔记的更多相关文章

  1. 结构-行为-样式-css&html横纵居中最佳实践

    最近在做手机端的H5项目,有个标题是在一根横线中的,就是水平居中加垂直居中(如图一).这应该是前端开发中经常遇到的一个场景了,做的次数多了就有一些体会,我今天就总结了下这种结构的实现思路:首先,用元素 ...

  2. 结构-行为-样式-Javascript笔记

    一.console.dir()可以显示一个对象所有的属性和方法. 二.递归遍历一个数据集合: A.数据: {  "menu": [    {      "menuId&q ...

  3. 结构-行为-样式-angularJs笔记

    0.关于Ng-app   通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况.在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs ...

  4. 结构-行为-样式-Css Div 居中的一个最佳实践

    最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class=" ...

  5. 结构-行为-样式-PS笔记

    1.矩形选框,按住Shift就可以成为正圆或者正方形.按住ALt就可以控制圆心的位置: 2.美颜:滤镜--模糊--回到开始--历史记录工具,去掉不要的地方. 3.套索工具双击闭合:4.钢笔工具是做选区 ...

  6. 结构-行为-样式-Bootstrap笔记

    1.自上而下的内容布局,中间内容可变,应该用: <div class=" container-fluid"> <div class=" row" ...

  7. html+css笔记

    文档结构 1.html文档结构 ①文档类型声明 严格型(标准模式):    <!DOCTYpE HTML>   HTML5 XHTML 1.0:<!DOCTYpE html pUbL ...

  8. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  9. css笔记详解（1）

    css讲解 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 首先在我们学习css之前先来思考一个问题,为什么html标签上不直接 ...

随机推荐

  1. Linux分配给该用户没有权限登陆

    Linux分配给该用户没有权限登陆 sudo visudo username ALL=(ALL) NOPASSWD:ALL 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  2. NHibernate中使用memcache二级缓存

    在NHibernate中使用memcache二级缓存 一.Windows下安装Memcache  1. 下载   http://jehiah.cz/projects/memcached-win32/  ...

  3. Windows下MYSQL自动备份批处理

    windows下MYSQL自动备份批处理 2011-05-04 09:16:45|  分类: mysql|举报|字号 订阅     按系统时间进行备份 注意mysql安装路径中如果有空格.就要把,.b ...

  4. 【分享】史上最全的Python电子书教程资源下载

    网上搜集的,点击即可下载,希望提供给有需要的人^_^   O'Reilly.Python.And.XML.pdf 2.02 MB   OReilly - Programming Python 2nd. ...

  5. C#继承关系中【方发表】的创建和调用

    —C#继承关系中[方发表]的创建和调用 Insus.NET实现一个最炫最原创的验证码.你可以从下面的一步一步的演译. 实现一个验证码,需要了解的是,它最基本是随机产生字符串:<在ASP.NET ...

  6. HOJ:2031 进制转换

    进制转换 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  7. twobin博客样式

    twobin博客样式—“蓝白之风”   自暑假以来,囫囵吞枣一般蒙头栽入前端自学中,且不说是否窥探其道,却不自觉中提高了对网页版面设计的要求,乃至挑剔.一个设计清爽美观的网页能让读者心旷神怡,甚至没有 ...

  8. RPC（Remote Procedure Call Protocol）

    远程过程调用协议: 1.调用客户端句柄:执行传送参数 2.调用本地系统内核发送网络消息 3.消息传送到远程主机 4.服务器句柄得到消息并取得参数 5.执行远程过程 6.执行的过程将结果返回服务器句柄 ...

  9. UVA 141 The Spot Game 斑点游戏。。

     The Spot Game  The game of Spot is played on an NxN board as shown below for N = 4. During the game ...

  10. ASP.NET MVC 使用MSBuild部署的几个注意事项

    ASP.NET MVC 使用MSBuild部署的几个注意事项 做新项目,当时参考NopCommerce的结构,后台Nop.Admin是一个独立的Area Web Site,但部署的时候发现,使用一键发 ...