偶对清除浮动的理解是这样的,
要想清除浮动,首先要知道什么是浮动,大家在做app,pc端页面的时候,它里面有这个块元素和内联元素,尤其块元素在布局的时候,文档流的形式往下刷,这种形势下呢,每一个块元素都是独占一行的,要想改变这种现状,比如说,abc 大家给ab浮动,ab并列排列,ab浮动之后呢,对c会产生影响,这时候大家就要给c加上clearboth清除浮动,这样做就是要使ab浮动产生的影响,不要影响到c,这是清除浮动的作用,那么清除浮动往往与什么有关系呢,比如说与大家的一些特效,比如图片轮播比如tab切换,这些特效的时候,往往需要大家用浮动去控制他,所以这是大家在使用浮动当中,清除浮动的工作内容,另外,清除浮动有很多种方式,比较常见的有clearboth overflowhidden,after伪类,最后,清除浮动有优势也有缺点,那么偶认为他的缺点是,有时候在某些浏览器使用的时候会不起作用,会失效,当然说这个缺点不是不可以解决的,可以通过整理上下文,或者使用其他的清除浮动方式来解决。
这就是偶对清除浮动的理解。
2. DIV CSS display (block none inline)属性的用法!
偶对DIV CSS中display的看法是这样的:
display常见的值有四个block、none、inline、inline-block,常见的用法有两种,一种是元素的隐藏与显示之间的切换,这是none和block之间的切换,另一种是块元素和行元素之间的转换;
第一种用法主要用在一些效果当中,比如说table的切换,又比如说隔行变色,它都是用到这种用法,所以说它与效果有一些关系,另外的话是display:block和display:inline的切换,因为大家知道像span、a等行标签,在默认情况下改变宽高是没有效果的,这种时候大家就要把span等行元素转换成block元素,然后再设置宽高就会行之有效,另外有时候大家需要把像div、form表单等块元素转换成inline元素,也是有效的,总之一句话,大家为了实现元素之间的切换常用这个用法。display还有一种比较常用的用法是它经常加position、z-index、overflow:hidden去实现各种各样的效果,比如说页面的手风琴效果、图片无缝轮播的效果等,都是这些属性联合起来实现的。
以上就是偶对display的看法。
3. 关于网页编码的理解!
偶对网页编码的理解是这样的:
在国内,大家常用的编码有3种,分别是utf-8,GB2312,GBK。utf-8是国际标准字符集,它里面包含了一些国际上常用的一些语言,以及一些特殊符号、字符集等;但大家国家也有这种类似的语言协会,它概括的是GBK,叫做中文字符集,它涵盖了中文,把那些多余的比如希腊文、法文就去掉了,只保留一些常用的,如中文、英文字母,还有一些日文、韩文这些常用的语言,以及一些特殊符号;GB2312大家叫做简体中文字符集,是在GBK的范围上又提炼了一些。
以上就是偶对网页编码的理解。
4. 了解外边距叠加的相关问题
偶对外边距叠加的理解是这样的:
首先,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
触发条件:a)当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。b)当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
以上就是偶对外边距叠加的理解。
5. img的title和alt的异同!
偶对img的title和alt的理解是这样的:
(1)、含义不同
alt:使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明,也就是图片显示不了的时候显示的文字。
title:图片正常显示时,鼠标悬停在图片上方显示的提示文字。
(2)、在浏览器中的表现不同
在firefox和ie8中,当鼠标经过图片时title值会显示,而alt的值不会显示;只有在ie6中,当鼠标经过图片时title和alt的值都会显示。
以上就是偶对img的title和alt的理解。
6. 请例举css中position的参数和作用?
偶对css中position的理解是这样的:
position是用来定位的,常见的值有四个,它们分别是:static、absolute、fixed、relative。
static是相对于默认位置去定位的,fixed是相对于浏览器窗口定位的,而大家最常用的有两个,一个是absolute,一个是relative,relative是相对定位,是相对于自身的原来的位置定位的,不会对文档流产生影响,也就是说A和B两个元素堆叠放置的时候,如果给A元素relative属性,加top和left值以后对B是没有影响的,但A漂移走了;absolute是绝对定位,如果父元素有position属性,这个元素相对于父元素定位的,如果父元素没有position属性,这个元素相对于body定位的,而且它这个定位会对后面的元素产生元素,它是脱离文档流的,脱离文档流以后其他元素是会来补缺的,把这个位置填充掉。总而言之,position和display一样也是常用在各种特效当中,大家常用的就是absolute和relative,它经常和overflow:hidden、z-index、left、top等属性联合使用,去实现一些图片堆叠的效果,比如说常见的折页效果,轮播图等效果都用到这个属性。
position在使用的过程中有两个问题需要注意,第一、因为大家的浏览器分为IE和非IE浏览器,在标准的W3C盒模型下和IE盒模型下像素的解释是不一样的,这就说明一个问题,在定位的时候,如果同样都是left:100px,那到了IE6、IE7下就可能不是left:100px,而变成left:102px了,这可了不得,是致命的缺点,所以要在left前加*,来解决这一问题。第二,大家在使用position时最关键的一点是,在配合其他属性的时候一定要注意position是使用相对定位还是绝对定位,包括父元素是相对定位还是绝对定位。
以上就是偶对css中position的理解。
7. css选择器的权重和优先规则!
对于优先级偶是这么理解的,
包括选择器的样式,包括调用样式的一些方式的判断,决定了样式有一些执行次序的问题,从优先级的角度来说的话,谁的优先级最高呢,当然是内联的优先级最高,在这种情况下,比如说id class派生有其他的一些优先级的排序方式,所以他的优先级一般是按照这样的排序方式来进行。当然在这个里面,执行完优先级以后,他还有一个权值的问题,内联样式的权值是1000,ID是100,class是10,标签是1,那么这些优先级包括这个权值的问题,两个结合起来,大家一般呢,在写项目的时候也有可能是这样的,一个元素又有id又有class或者又有一些其他的选择方式,那么在选中这些元素以后呢,他所有的选择方式其实是一种结合使用的方式,这个时候就要讲究优先的次序了,所以页面中写样式的时候他就会前后次序清晰,不会出现样式冲突这种现象
这就是偶对样式优先级和权值的一个理解。
8. 内联和!important哪个优先级高?
偶的理解是这样的:
首先,肯定是!important优先级高。
!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,。语法格式{ cssRule !important },即写在定义的最后面,例如:box{color:red !important;}
在CSS中,通过对某一样式声明! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级,也就是相当于写在最下面。
ie7,ie8,firefox,chrome等高端浏览器下,已经可以识别 !important属性, 但是IE 6.0仍然不能完全识别.!important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里),IE 6.0认为!important优先级较高,否则当含!important的样式属性被同一个{}里的样式覆盖时,IE 6.0认为!important较低!
以上就是偶对这个问题的理解。
9. table标签中border,cellpadding,td 标签中colspan , rowspan分别起什么作用?
偶是这样理解这个问题的:
table border:表格边框, table-cellpadding: 单元格填充
td colspan:单元格纵向合并(列与列), table-rowspan: 单元格横向合并(行与行)
以上就是偶对这个问题的理解。
10. 实现三列布局的三种方法,具体描述?
偶是这样理解这个问题的:
(1)、绝对定位法
这或许是三种方法里最直观,最容易理解的:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
(2)、margin负值法
首先,中间的主体要使用双层标签。外层div宽度100%显示,并且浮动(本例左浮动,下面所述依次为基础),内层div为真正的主体内容,含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的,左栏左浮动,margin-left为-100%,由于前面的div宽度100%与浏览器,所以这里的-100%margin值正好使左栏div定位到了页面的左侧;右侧栏也是左浮动,其margin-left也是负值,大小为其本身的宽度即200像素。
(3)自身浮动法
应用了标签浮动跟随的特性。左栏左浮动,右栏右浮动,主体直接放后面,就实现了自适应。
以上就是偶对这个问题的理解。
11. IE与宽度和高度的问题
偶是这样理解这个问题的:
IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
以上就是偶对这个问题的理解。
12. 页面的最小宽度
偶是这样理解这个问题的:
min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类,
以上就是偶对这个问题的理解。
13. DIV浮动IE文本产生3象素的bug
偶是这样理解这个问题的:
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
*html #left{ margin-right:-3px; //这句是关键}
以上就是偶对这个问题的理解。
14. 高度不适应
偶是这样理解这个问题的:
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或padding 时。
解决方法2个:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}
为DIV加上border属性。
以上就是偶对这个问题的理解。
15. 如何对齐文本与文本输入框
偶是这样理解这个问题的:
加上 vertical-align:middle;
以上就是偶对这个问题的理解。
16. web标准中定义id与class有什么区别吗
偶是这样理解这个问题的:
id和class都是元素中的属性,这也是每个元素都有的属性,他们是应用的很多领域中的,第一个应用的领域是css领域,在css领域中,有id选择器和class选择器,id的优先级要高于class,id选择器是#加id,class选择器是 . 加class,此外id的权重是100,class的权重是10,id要大于class;除了这个领域外在原生js中也是有使用的,而且使用的范围还是很大的,一个是getElementById,一个是getElementsByClassName,而且在封装像jQuery等其他语言中,也是有封装类似于id、类似于class这种选择器的,另外他们最核心的区别是用id选择器只能选择单个元素,而用class选择器可以选择多个元素,在js中,如果用class选择的元素,往往是要遍历元素才有效,才能在页面渲染到这些数据,这就是他们俩之间的一些区别。所以在做项目的时候id和class偶都用,但是偶用的更多的是class,因为页面上雷同的元素太多了,所以class用的更多一些。
以上就是偶对这个问题的理解。
17. LI中内容超过长度后以省略号显示的方法
偶是这样理解这个问题的:
此方法适用与IE与OP浏览器
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
以上就是偶对这个问题的理解。
18. 为什么web标准中IE无法设置滚动条颜色了
偶是这样理解这个问题的:
解决办法是将body换成html
以上就是偶对这个问题的理解。
19. 怎么样才能让层显示在FLASH之上呢
偶是这样理解这个问题的:
解决的办法是给FLASH设置透明
<param name=”wmode” value=”transparent” />
以上就是偶对这个问题的理解。
20. 怎样使一个层垂直居中于浏览器中
偶是这样理解这个问题的:
要使一个层垂直居中于浏览器中,有4种方法
1. 行高,缺点,需要高度,只能文字
2. 定位+margin负值,缺点,需要高度
3. 弹性盒子,缺点,css3新增属性,不太兼容
4. 转table,缺点,ie6不支持,利用table垂直居中的特性,配合vertical-align,垂直居中
5. Css+定位
以上就是偶对这个问题的理解。
21. Div居中问题
偶是这样理解这个问题的:
div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
以上就是偶对这个问题的理解。
22. 链接(a标签)的边框与背景
偶是这样理解这个问题的:
a 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
以上就是偶对这个问题的理解。
23. 超链接访问过后hover样式就不出现的问题
偶是这样理解这个问题的:
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
Code:
<style type=”text/css”>
<!–
a:link {}
a:visited {}
a:hover {}
a:active {}
–>
</style>
以上就是偶对这个问题的理解。
24. 游标手指cursor
偶是这样理解这个问题的:
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
以上就是偶对这个问题的理解。
25. UL的padding与margin
偶是这样理解这个问题的:
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
以上就是偶对这个问题的理解。
26. FORM标签
偶是这样理解这个问题的:
这 个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,偶的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后 面就不会为这个头疼了.
以上就是偶对这个问题的理解。
字体渐变css,css无法修饰,ui.theme.css,css鼠标滑过的文字,css浏览器属性,css去除文本框focus,什么是js和css的压缩
@ css层次选择器有哪些?
选择器body > div 只操作body下级的div。div1 + div2 只选择div1 同级 随后 相邻最近 的div2div1 ~ p 选择div1下所有的p属性选择器
@ CSS选择器权重如何计算?
很古老的话题了
id=100
class=10
tag(标签)=1
按照这个规律去计算,比如
#qietu div{}
100+1 = 101
.qietu .box{}
10+10=20
可以得出第一个的权重要比第二个要高。另外关于权重的扩展知识面,偶推荐了解下BEM命名规则,这个观念很好,可以从侧面杜绝权重问题的产生,还有一个就是提高权重的方法 !important;
@ css分类?
css 样式表分类
一,样式表分类
(1)内联样式【优先级最高】【常用】【代码重复使用性最差】
(当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。)
(2)内嵌样式表【优先级第二】【最不常用】【代码重复使用性一般】
(当单个文件需要特别样式时,就可以使用内嵌样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。)
(3)外部样式表【优先级最低】【最常用】【代码重复使用性最好】
(当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。)
I。先创建一个样式表
II。写入样式表内容,调整样式表位置
二。选择器
每一条css样式定义由两部分组成,形式如下:
选择器
{样式}
在{}之前的部分就是“选择器”。
“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
选择器是选择器,外部样式表只是代码位置
(1)类别选择器( class选择器)【第二优先级】【最常用】
前面以"." 来标志,如:
.d1
{
color:red;
}
在HTML页中:
【1】<div class="d1";>文字</div> 文字颜色为红色
【2】<p class="d1";>文字</p > 文字颜色为红色
定义了一个class类,将样式应用到了元素中。
(2)id选择器【第一优先级】【最常用】
前面以"#"来标志,如:
#d2
{
color:blue;
}
在HTML页中:
<div class="d1" id="d2">文字</div> 文字颜色变为蓝色 【id选择器优先级高于类别选择器】
(3)标签选择器(根据标签名选择)【第三优先级】【如果同时出现类别选择器和id选择器,按照优先级来及执行】【最不常用】
前面以"标签名"来标志,如:
div
{
color:red;
}
在HTML页中:
<div>文字<div> 文字颜色变为红色
(4)复合选择器【有id第一优先级/都是类别选择器第二优先级】【最最常用】
[1]群组选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。
.d1,#d2
{
color:red;
}
在HTML页中:
【1】<div class="d1";>文字</div> 文字颜色为红色
【2】<p id="d2";>文字</p > 文字颜色为红色
使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。
[2]后代选择器
后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。
.d1 #d2
{
color:blue;
}
在HTML页中:
<div class="d1" id="d2">文字</div> 文字颜色变为蓝色
后代选择器是一种很有用的选择器,使用后代选择器可以更加精确的定位元素。