1、css选择器:详细(http://www.ruanyifeng.com/blog/2009/03/css_selectors.html)

  派生选择器:按标签

  类别选择器:按class

  ID选择器:按ID

  通用选择器:* 匹配所有

  属性选择器:按属性,属于css2,IE6不支持

  以上五个为基本选择器

    后代选择器【div span】;子元素选择器【div > span】;群组选择器【div,p,#my】;相邻元素选择器【div + span】

    伪类选择器:【div:first-child】【a:hover】css2

    css3同级元素选择器:【div ~ ul】匹配任何div元素后的同级元素ul

2、

.classA{ color:blue;}

.classB{ color:red;}

<p class='classB classA'> 123 </p>

答案:p为red,元素的属性跟class属性顺序无关,跟class样式顺序有关。谁在最后就显示谁

3、hover被访问的样式顺序:L-V-H-A  link visited hover active;

4、css的hack:详细(http://blog.csdn.net/liu_rong_fei/article/details/51555438)

  1.大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safari不支持 (opera可识别除外)。
  2.\9    :所有IE浏览器都支持
  3._和-  :仅IE6支持
  4.*     :IE6、E7支持
  5.\0    :IE8、IE9支持,opera部分支持
  6.\9\0  :IE8部分支持、IE9支持
  7.\0\9  :IE8、IE9支持

  #tip{ 
    background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/ 
    background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/ 
    *background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/ 
    _background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/ 
  }

  

  基本是:ie6(_);ie7(*)  ie8(\0) 所有ie(\9)

  ie6不识别[!important],ie7可以

5、src和href

  <link href="s.css" rel='stylesheet' /> :浏览器会识别css文件并下载,同时不会停止当前文档的加载。(故不用@import)

  <script src="j.js">:浏览器会停止加载,并加载src中的资源并执行,完成后继续加载。

6、外边框重合

  相邻的或父子元素之间的外边距margin可以结合成一个单独外边距,规则为:

     都为正或都为负,去绝对值大的一个

     一正一负的取两者和。

7、文字重叠

  水平方向:letter-spacing设置为负数,则文字会水平方向上重叠

  垂直方向:line-height设置为负数,则文字会在垂直方向上重叠

8、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

*   1.id选择器( # myid)

2.类选择器(.myclassname)

3.标签选择器(div, h1, p)

4.相邻选择器(h1 + p)

5.子选择器(ul < li)

6.后代选择器(li a)

7.通配符选择器( * )

8.属性选择器(a[rel = "external"])

9.伪类选择器(a: hover, li: nth - child)

*   可继承: font-size font-family color, UL LI DL DD DT;

*   不可继承 :border padding margin width height ;

*   优先级就近原则,样式定义最近者为准;

*   载入样式以最后载入的定位为准;

优先级为:

!important >  id > class > tag

important 比 内联优先级高

CSS3新增伪类举例:

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中

9、列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?

1. block 象块类型元素一样显示。

none 缺省值。向行内元素类型一样显示。

inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示,并添加样式列表标记。

2. position的值

*absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

*fixed (老IE不支持)

生成绝对定位的元素,相对于浏览器窗口进行定位。

* relative

生成相对定位的元素,相对于其正常位置进行定位。

* static  默认值。没有定位,元素出现在正常的流中

*(忽略 top, bottom, left, right z-index 声明)。

* inherit 规定从父元素继承 position 属性的值。

10、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?

* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto;

* png24为的图片在iE6浏览器上出现背景,解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式,从总体中逐渐排除局部。

首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。

接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。

css

.bb{

background-color:#f1ee18;/*所有识别*/

.background-color:#00deff\9; /*IE6、7、8识别*/

+background-color:#a200ff;/*IE6、7识别*/

_background-color:#1e0bd1;/*IE6识别*/

}

*  IE下,可以使用获取常规属性的方法来获取自定义属性,

也可以使用getAttribute()获取自定义属性;

Firefox下,只能使用getAttribute()获取自定义属性.

解决方法:统一通过getAttribute()获取自定义属性.

*  IE下,even对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

* (条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

11、opacity和rgba()都可以设置元素透明,区别

  opacity:可以作用到元素及所有子元素和内容

  rgba():不能作用到子元素,也不能作用到元素的文字

12、css的link和@import的区别:

  link在不阻塞浏览器加载的情况下加载css文件

  import会在页面加载完成后再加载css文件,ie5+才支持



html/css杂题的更多相关文章

  1. 正睿OI DAY3 杂题选讲

    正睿OI DAY3 杂题选讲 CodeChef MSTONES n个点,可以构造7条直线使得每个点都在直线上,找到一条直线使得上面的点最多 随机化算法,check到答案的概率为\(1/49\) \(n ...

  2. dp杂题(根据个人进度选更)

    ----19.7.30 今天又开了一个新专题,dp杂题,我依旧按照之前一样,这一个专题更在一起,根据个人进度选更题目; dp就是动态规划,本人认为,动态规划的核心就是dp状态的设立以及dp转移方程的推 ...

  3. wangkoala杂题总集(根据个人进度选更)

    CQOI2014 数三角形 首先一看题,先容斥一波,求出网格内选三个点所有的情况,也就是C(n*m,3);然后抛出行里三点共线的方案数:C(n,3)*m; 同理就有列中三点共线的方案数:n*C(m,3 ...

  4. 2019暑期金华集训 Day6 杂题选讲

    自闭集训 Day6 杂题选讲 CF round 469 E 发现一个数不可能取两次,因为1,1不如1,2. 发现不可能选一个数的正负,因为1,-1不如1,-2. hihoCoder挑战赛29 D 设\ ...

  5. Atcoder&CodeForces杂题11.7

    Preface 又自己开了场CF/Atcoder杂题,比昨天的稍难,题目也更有趣了 昨晚炉石检验血统果然是非洲人... 希望这是给NOIP2018续点rp吧 A.CF1068C-Colored Roo ...

  6. Codeforces 杂题集 2.0

      记录一些没有写在其他随笔中的 Codeforces 杂题, 以 Problemset 题号排序   1326D2 - Prefix-Suffix Palindrome (Hard version) ...

  7. 【Java面试】-- 杂题

    杂题 2019-11-03  21:09:37  by冲冲 1.类加载器的双亲委派机制 类加载器:把类通过类加载器加载到JVM中,然后转换成class对象(通过类的全路径来找到这个类). 双亲委派机制 ...

  8. 贪心/构造/DP 杂题选做Ⅱ

    由于换了台电脑,而我的贪心 & 构造能力依然很拉跨,所以决定再开一个坑( 前传: 贪心/构造/DP 杂题选做 u1s1 我预感还有Ⅲ(欸,这不是我在多项式Ⅱ中说过的原话吗) 24. P5912 ...

  9. 贪心/构造/DP 杂题选做Ⅲ

    颓!颓!颓!(bushi 前传: 贪心/构造/DP 杂题选做 贪心/构造/DP 杂题选做Ⅱ 51. CF758E Broken Tree 讲个笑话,这道题是 11.3 模拟赛的 T2,模拟赛里那道题的 ...

随机推荐

  1. 【Linux】Tomcat安装及一个服务器配置多个Tomcat

    安装环境 :Linux(Ubuntu 版) 安装软件 : apache-tomcat-9.0.0.M1.tar.gz(下载地址http://tomcat.apache.org/) 步骤一 Tomcat ...

  2. win10忘记开机密码无法进入桌面

    第一种: 电脑用微软账户登录,但密码始终不正确. 登陆这个网址    https://account.live.com/password/reset 按照提示的操作利用之前注册信息一步步重设密码 最后 ...

  3. 2.0JAVA基础复习——JAVA语言的基础组成关键字和标识符

    JAVA语言的基础组成有: 1.关键字:被赋予特殊含义的单词. 2.标识符:用来标识的符号. 3.注释:用来注释说明程序的文字. 4.常量和变量:内存存储区域的表示. 5.运算符:程序中用来运算的符号 ...

  4. Git冲突和解决冲突-测试方法

    原文链接:https://www.cnblogs.com/blogslee/p/6828659.html

  5. [pytorch修改]dataloader.py 实现darknet中的subdivision功能

    dataloader.py import random import torch import torch.multiprocessing as multiprocessing from torch. ...

  6. 【linux下查看文件路径--jdk】

    1.which java 首先输入命令行,查看结果: [root@localhost ~]# which java /usr/bin/java PS:which Java是无法定位到Java的安装路径 ...

  7. 利用JS打印质数

    我爱撸码,撸码使我感到快乐!大家好,我是Counter,今天非常愉快,没有前几天的相对比较复杂的逻辑思维在里面,今天来写写,利用JS打印质数,基本上很多面试,会很经常的考到.那废话不多说,直接上代码: ...

  8. JS基础概念

    JS基础概念 1. 算法及流程图 算法类型:1.算数算法:2.事务性算法(解决某个问题的方法和先后顺序). JS语法概述 1. 引入JS的方法 1.用<script src="&quo ...

  9. 微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt ...

  10. Eclipse的Outline功能栏调出来

    window-->Shoe View -->Outline 按住鼠标左键拖一下Outline功能栏,就可以无论开哪个项目都能够在右边显示Outline功能栏 转载地址:https://bl ...