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：最终用途cat命令查看不可见的字符

    常,的程序或软件,并没有语法错误,你检查其内容没有发现相关问题.这是时间,因为你用普通的文本编辑软件来查看,有很多的字符显示不出来的,但在最终用途cat命令可以很easy地检測出是否存在这些字符. ~ ...

  2. 工欲善其事：编辑器之神Vim（一）

    本篇文章收集了Vim最常用和实用的一些命令,掌握这些命令就可以使用Vim了 本文仅列举个人认为常用的命令,本系列文章更像是自己的学习笔记,而不是VIM使用教程. 如果你想了解vim的更多,可以看看Co ...

  3. Spring Resource之作为依赖的资源

    如果一个bean自己能够通过一些动态的过程来决定和提供一些资源路径,那么通过ResourceLoader接口来加载资源会是更有效的.考虑作为一个例子的加载模板,需要的指定的资源取决于用户的角色.如果资 ...

  4. weblogic生产、开发模式互转

    生产模式与开发模式转换: 1.生产模式-->开发模式     将%DOMAIN_HOME%\config\config.xml文件中<production-mode-enabled> ...

  5. 安装Windows操作系统的驱动程序(驱动精灵版) - 进阶者系列 - 学习者系列文章

    安装完操作系统之后,就需要安装对应的驱动程序了.下面就简要介绍下驱动程序的安装.以驱动精灵驱动安装软件为例. 1.  下载驱动精灵. 从http://www.drivergenius.com/网站下载 ...

  6. [ext/iconv/iconv.lo] Error 1

    办法1: wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.1.tar.gz tar -zxvf libiconv-1.13.1.tar.g ...

  7. Katana介绍以及使用

    Katana介绍以及使用 接上篇OWIN产生的背景以及简单介绍,在了解了OWIN规范的来龙去脉后,接下来看一下Katana这个OWIN规范的实现,并看看如何使用在我们的Web开发中. 阅读目录: 一. ...

  8. 如何使用SetTimer MFC 不够具体

    转会:http://blog.csdn.net/ellor/article/details/1714741 Timer事件,即定时器事件,是在游戏编程中.常常使用的一个事件.借助它能够产生定时运行动作 ...

  9. html5学习(一)--canvas画时钟

    利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...

  10. NServiceBus 概况

    NServiceBus 概况 NServiceBus 概况 NServiceBus 被设计用来组合面向业务的服务,它并不是用来替代诸如 WCF 一类的RPC技术. NServiceBus 不只包含通信 ...