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. Java 之JavaBean 、EJB 和POJO

    由于是创业公司,开发人员较少,所以公司临时决定让几个C的程序猿临时客串Java.所以避免不了有很多基础问题,今天就有两个人都问我,JavaBean和POJO的区别,我可按照自己的理解给他们大致说了下, ...

  2. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  3. 树莓派学习笔记 1 -- 硬件的需求以及raspbian系统的安装

    树莓派(Raspberry Pi) --  基于Linux系统的大小只有信用卡大小的卡片式机器.  按照发明者的想法,他是想降低学习程序开发的成本而设计制作的这款产品.你可以理解为一个简陋版的电脑.树 ...

  4. DTD

    DTD(文档类型定义)的作用是定义 XML 文档的合法构建模块. 它使用一系列的合法元素来定义文档结构. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. 内部的 DOCTYPE 声明 ...

  5. IOS开发小功能1：引导页的开发

    效果图如上,实现的是一个页面引导页,最后跳到主页面,主页面是一个navigationController,但是导航栏给我隐藏了. 文件目录:自己定制的viewcontroller以及navigatio ...

  6. 随机函数Surprising

    之前写了个用来抽取1-54号的随机函数,发现30-40出现的情况很大,就在果壳上提问了一下//听取了某个大神的建议循环了10000次之后惊喜的发现这样写出现了一大堆相同的数字! 之后有个很神大牛解答了 ...

  7. 基于.NET打造IP智能网络视频监控系统

    开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码   开源倾情奉献系列链接 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码 开源倾情奉献:基于.NET打造 ...

  8. Leetcode::Longest Common Prefix && Search for a Range

    一次总结两道题,两道题目都比较基础 Description:Write a function to find the longest common prefix string amongst an a ...

  9. [原]逆向iOS SDK -- “添加本地通知”的流程分析

    观点: 代码面前没有秘密 添加通知的 Demo 代码 - (void)scheduleOneLocalNotification { [[UIApplication sharedApplication] ...

  10. Sublime和Codeblocks支持C++11

    Sublime和Codeblocks支持C++11 闲来没事看了一下C++11,比起C++0x多了很多新功能,像auto变量,智能指针等,g++4.7以上版本也提供了对C++11的支持,但是,如何在你 ...