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. php连接sql server 2008数据库

    原文:php连接sql server 2008数据库 关于php连接sql server 2008的问题,2000的版本可以直接通过php中的配置文件修改,2005以上的版本就不行了,需要使用微软公司 ...

  2. PHP 17： MySQL的简单介绍

    原文:PHP 17: MySQL的简单介绍 这一章将简单介绍MySQL的基本知识. 本文来自http://lib.hackbase.com/html/8/35125.htm. MySQL是最受欢迎的开 ...

  3. Java 多线程之内存一致性错误

    当不同的线程针对相同的数据却读到了不同的值时就发生了内存一致性错误.内存一致性错误的原因是非常复杂的.幸运的是我们程序员不需要详细的理解这些原因,我们需要做的事情就是使用策略来规避这些. 避免内存一致 ...

  4. IntelliJ IDEA 发布13版本——创造java奇迹

    IntelliJ IDEA被公认为业界最好的Java开发平台.此次发布的了13版本,更是集合了与Java EE.Android.Spring.Scala和Gradle最新合作与支持. Java EE  ...

  5. ubuntu phone/touch的源码从哪里下载？

    这里有人在问ubuntu phone的源码从哪里下载? http://askubuntu.com/questions/237321/where-can-i-get-the-source-code-fo ...

  6. 【转】【Android应用开发详解】第01期：第三方授权认证（一）实现第三方授权登录、分享以及获取用户资料

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9057257 由于公司项目的需要,要实现在项目中使用第三方授权登录以及分享文字 ...

  7. android的版本控制

    在一个团队项目中,项目的版本控制,一方面促进团队的协同能力,另一方面提高项目的进度 即使一个人的项目也最好使用SVN这样的版本控制,可以清楚的知道自己的修改的代码,和项目进度等.合理的托管,也让优秀的 ...

  8. webapp 开发调试测试方法总结

    好久都没有发表过日志了,反正近期项目也已经接近尾声了,那么是时候该总结一下在项目中用到的技术了,请看:这里先废话几句,我们现在的开发模式是这样子的:先把本地的网页上传到远程服务器(因为好多设备都要去访 ...

  9. .net创建并安装windows服务案例

    1. 创建windows服务[引用博文]: 1. 将这个服务程序切换到设计视图2. 右击设计视图选择“添加安装程序”3. 切换到刚被添加的ProjectInstaller的设计视图4. 设置servi ...

  10. 使用ServletContext读取properties配置文件

    创建配置文件: 1.在项目的任意地方,右键->New->File->FileName->输入->名称.properties(比如:config.properties) 2 ...