CSS的常见问题

  1.css的编码风格

 多行式:可读性越强,但是CSS文件的行数过多,影响开发速度,增大CSS文件的大小

 一行式:可读性稍差,有效减少CSS文件的行数,有利于提高开发速度,减小CSS文件的大小

2.id和class

区别:1)同一个网页,相同的id只能出现一次,不可重复,而class可以任意出现多次

   2)id的权重选择符权重为100,而class的选择符权重为10

   3)原生JS提供getElementById()方法,支持通过id对应到相关的HTMLLIElement,但原生JS不支持通过class对应到相关的HTMLLIElement

建议:尽量使用class,少用id

3.CSS hack:使CSS代码兼容不同的浏览器

1.IE条件注释法

只在IE下生效

<!--[if IE]>

<link type="text/css" href="test.css" rel="stylesheet">

<![endif]-->

只在IE 6下生效

<!--[if IE 6]>

<link type="text/css" href="test.css" rel="stylesheet">

<![endif]-->

缺点:将同一CSS选择符下的样式分散到三个文件夹去控制,增加开发和维护成本

2.选择符前缀法

原理:在CSS选择符前加一些只有特定浏览器才能识别的前缀,从而某些样式只有特定浏览器才能识别

例如"*html"前缀只对IE6生效,“*+html"前缀只对IE7生效

<style type="text/css>

.test{width:80px;}              /*IE6,IE7,IE8*/

*html .test{width:60px;}           /*only for IE6*/

*+html .test{width:70px;}           /*only for IE7*/

</style>

选择符前缀法不能用于内联样式

缺点:向后兼容存在风险

3.样式属性前缀法

原理:在样式的属性名前加前缀,这些前缀只在特定的浏览器下才生效

例如"_"只在IE6下生效,"*"在IE6 和IE7下生效

<style type="text/css>

.test{width:80px;*width:70px;_width:60px;}

</style>

优点:比选择符前缀法聚合程度更高,代码更精简,可维护性很强

缺点:向后兼容存在风险

总结:IE条件注释法在理论上是首推的hack方法,但是它不利于开发和维护,所以事实上最流行的hack方式是选择符前缀法和样式属性前缀法,可以根据需要选择使用

4.解决超链接访问后hover样式不出现的问题

关于a标签的四种状态的排序问题,love hate原则:即l(link)ov(visited)e   h(hover)a(active)te

5.hasLayout

是IE浏览器专有的属性,用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置解析起来会出现Bug,其原因可能与hasLayout没有被自动触发有关,我们通过一些技巧,手动触发hasLayout属性就可以解决Bug了。

6.块级元素和行内元素的区别

块级元素:1.独占一行

     2.宽度自动填满其父级元素宽度

     3.支持所有CSS命令

行内元素:1.不会独占一行

     2.相邻的行内元素会排列在同一行里,直到一行排不下,才会换行

     3.宽度随元素的内容而变化

     4.设置宽高属性无效

     5.不支持上下的margin

7.display:inline-block和hasLayout

   Inline-block的特点

    1. 块在一行显示;
    2. 行内属性标签支持宽高;
    3. 没有宽度的时候内容撑开宽度

1. 对于p标签设置display:inline-block,Firefox和IE 8都可以正常解析display:inline-block,而IE6和IE7不支持,考虑兼容性,必须舍弃这种用法

2.对于span,img,button标签,IE8和Firefox正常显示,IE6和IE7中span标签也有长宽,并且显示在一行内,display:inline-block并不是真的在IE6和IE7下生效,只是令span触发了hasLayout属性,其效果和设置zoom:1是一模一样的

实现IE6、IE7、IE8和Firefox都兼容的display:inline-block的应用,存在一些问题:

   1.它只对行内元素实现display:inline-block;如果是块级元素就不行,限制我们只能使用行内元素的标签。

           2.用到针对IE的hack,*vertical-align,这是不好的,能不使用hack就不要使用。

8.relative、absolute和float

文档流:z-index:0

relative特点:1.脱离文档流(z-index值大于0),但是会保留自己在z-index:0层的占位

      2.如果没有定位偏移量,对元素本身没有任何影响

      3.不影响元素本身的特性

      4.提升层级

      5.相对于自己在z-index:0层的位置进行定位

absolute的特点:1.完全脱离文档流,不会保留自己在z-index:0层的占位

        2.相对于自己最近的一个设置了position:relative和position:absolute的祖先元素,如果祖先元素都没有设置position:relative和position:absolute,那么就                                相对于body元素进行定位

float的特点:1.元素在z-index:0层排列

      2.改变正常的文档流排列,影响到周围元素

注意position:absolute和float会隐式的改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute和float:left或者float:right中的任意一个,都会让元素以display:inline-block的方式显示:可以设置宽高,块在一行显示,没有宽度的时候内容撑开宽度。就算我们显式地设置display:inline 或者display:block,也仍然无效,(float在IE6 下的双边距bug就是利用添加display:inline来解决)。position:relative不会隐式改变display类型

 

 

 

  


转载于:https://www.cnblogs.com/15fj/p/7457303.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369442.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux 磁盘科隆,Linux中ln命令用法详解(硬链接)

硬连接指向的是节点(inode),是已存在文件的另一个名字,修改其中一个,与其连接的文件同时被修改;对硬链接文件进行读写和删除操作时候&#xff0c;效果和符号链接相同。但如果我们删除硬链接文件的源文件&#xff0c;硬链接文件仍然存在&#xff0c;而且保留了原有的内容。这时&…

Web前端开发学习误区,你掉进去了没?

从接触网站开发以来到现在&#xff0c;已经有五个年头了吧&#xff0c;今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时&#xff0c;勾起了在这网站开发道路上的一串串回忆&#xff0c;成功与喜悦、烦恼与纠结都历历在目&#xff0c;感慨颇多。 先从大家学…

Oracle Database 11g DBA手册pdf

下载地址&#xff1a;网盘下载内容简介编辑《Oracle Database 11g DBA手册》所提供的专业知识可以帮助读者管理灵活的、高可用性的Oracle数据库。《Oracle Database 11g DBA手册》对上一版本进行了全面的修订&#xff0c;涵盖了每个新特性和实用工具&#xff0c;展示了如何实施…

link-cut-tree 简单介绍

目录 概念辨析辅助树轻边和重边操作介绍accessmake_rootfind_rootsplitlinkcut细节问题代码前言:这个算法似乎机房全都会,就我不会了TAT...强行搞了很久,勉强照着别人代码抄了一遍qwq 这个本人看论文实在看不懂,太菜了啊!!! 只好直接看如何实现...可是实现也看不太懂... 但直到…

linux svn 看不到文件,SVN更新时不能打开新文件svn-base系统找不到指定的文件

svn服务器架设在linux系统上&#xff0c;svn客户端在windows上&#xff0c;在update的时候可能会出现“Can’t open file.XXXX/tmp/text-base/XX.svn-base 系统找不到指定的文件”的错误。这是由于Linux服务器上的目标文件中存在两个相同文件名的文件。因为linux系统的文件名区…

C++primer 13.2.1节练习

练习13.23 1 #include <iostream>2 #include <string>3 #include <memory>4 5 using namespace std;6 7 8 class HasPtr {9 friend ostream &print(ostream &os, HasPtr &h); 10 public: 11 HasPtr(const string &s string()) : ps…

编年史与微云

总览 我面临的一个常见问题是&#xff1a; 如果是单个作者&#xff0c;多个读者&#xff0c;您如何扩展基于Chronicle的系统。 尽管有解决此问题的方法&#xff0c;但很有可能根本不会出现问题。 微云 这是我用来描述单个线程来完成当前由多个服务器完成的工作的术语。 &#…

去除IE10自带的清除按钮

最近在工作中碰到了一个问题&#xff0c;原本在IE8&#xff0c;IE9下正常的input表单&#xff0c;在IE10下会出现清除按钮&#xff0c;即表单右侧会出现一个可以清除该表单内容的小叉。由于之前一直没有兼容过IE10&#xff0c;所以我专门搜了下原因。发现&#xff0c;该功能是微…

Linux/CentOS7install PackageError: Loaded plugins: fastestmirror

Centons7 其大概意思是fastestmirror不能使用&#xff0c;fastestmirror是yum的一个加速插件&#xff0c;具体我也没有仔细了解过&#xff0c;可能是系统不支持或者缺少组件导致的。 处理办法就是禁用这个插件&#xff0c;方法如下&#xff1a; [rootlocalhost ~]# vim /etc/yu…

不要仅仅依靠单元测试

当您构建一个复杂的系统时&#xff0c;仅仅测试组件是不够的。 这很关键&#xff0c;但还不够。 想象一下一家汽车厂生产并进口最高质量的零件&#xff0c;但组装好之后再也不会启动发动机了。 如果您的测试用例套件几乎不包含单元测试&#xff0c;则您将永远无法确保系统整体正…

spring mvc的工作原理

该文转载自&#xff1a;http://blog.csdn.net/u012191627/article/details/41943393 SpringMVC框架介绍 1) spring MVC属于SpringFrameWork的后续产品&#xff0c;已经融合在Spring Web Flow里面。 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的…

oracle快速插入大量数据

方法一&#xff1a;循环 declare -- Local variables here m integer; begin -- Test statements here--输出开始时间 dbms_output.put_line(start:||sysdate); m:0;--循环插入的数据量 for i in 1..4000 loop m:m1; --插入语句&#xff0c;其中admintest||m, 为admintest后面…

春天遇见Apache Hadoop

SpringSource 刚刚宣布了适用于Apache Hadoop的Spring的第一个GA版本 。 该项目的目的是简化基于Hadoop的应用程序的开发。 您可以下载该项目在这里 &#xff0c;并检查了Maven的文物在这里 。 Apache Hadoop的Spring诞生是为了解决Hadoop应用程序构建不良的问题&#xff0c;…

linux 模拟时序,stm32GPIO模拟时序读写nandflash(K9F1G08U0B)问题

我使用的STM32F103VBT6这款芯片,K9F1G08U0B和 STM32F103VBT6连接接口有如下对应关系:ALE——PA1WE——PA2WP——PA3R\B——PC0RE——PC1CE——PC2CLE——PC38位IO口对应PE0——PE7下面4个函数&#xff0c;对应的是读取设备的ID&#xff0c;我在main函数里调用函数Nand_Flash_Re…

pat 甲级 1072. Gas Station (30)

1072. Gas Station (30) 时间限制200 ms内存限制65536 kB代码长度限制16000 B判题程序Standard作者CHEN, YueA gas station has to be built at such a location that the minimum distance between the station and any of the residential housing is as far away as possibl…

骑士周游问题

骑士周游问题 问题&#xff1a;在一个 8*8 的棋盘上&#xff0c;马按照“日”字走&#xff0c;给定一个起点&#xff0c;打印出马不重复的走完棋盘64个格子的路径。 解答&#xff1a;递归 回溯 &#xff08;对于任一步&#xff0c;马能走的下一步有8个方向&#xff0c;但是需要…

那些容易遗忘的web前端问题

背景&#xff1a; 年底将至&#xff0c;本人这只才出门的前端菜鸟&#xff0c;终于有空闲的时间来整理一下最近投简历时出现的问题。有的是经常使用但是没有仔细留意造成的&#xff1b;有的是个人认为根本没人使用而忽略的。为了下次不出现这种错误&#xff0c;进行一下总结。…

使用IntelliJ IDEA的原因

介绍 我经常遇到一个问题&#xff0c;为什么我使用Intellij来支持另一个IDE&#xff08;在本例中为Eclipse&#xff09;。 大多数时候&#xff0c;我会通过演示IntelliJ的某些功能并展示一切的集成程度来回答这个问题。 这让我开始思考使用它的真正原因是什么。 这篇文章将试图…

linux光标美化包,使用 [ powerlevel10k ] 美化你的WSL (Linux)

使用 [ powerlevel10k ] 美化你的WSL (Linux)使用 [ powerlevel10k ] 美化你的WSL (Linux)前言关于linux终端的美化&#xff0c;网上的教程有很多&#xff0c;但对于国内的用户来说&#xff0c;效果往往是这样的&#xff1a;教程中通过以下命令安装 oh-my-zshsh -c "$(cur…

HashMap实现原理分析

1 HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储&#xff0c;但这两者基本上是两个极端。 数组 数组存储区间是连续的&#xff0c;占用内存严重&#xff0c;故空间复杂的很大。但数组的二分查找时间复杂度小&#xff0c;为O(1)&#xff1b;数组的特点是&#xf…