收集CSS琐碎的知识点

1.display:none和visibility:hidden的区别?

display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。

2. position:absolute和float的异同?

同:对内联元素设置“float”和“absolute”属性,可以让元素脱离文档流,并且可以设置其宽高
异:float仍会占据位置,position会覆盖文档流中的其他元素

3.盒模型:

盒模型分为标准盒模型和IE盒模型(怪异盒模型)
box-sizing:content-box 表示标准的盒子模型(默认值)
box-sizing:border-box 表示IE盒模型

标准盒模型:width(content)+padding+border+margin
IE盒模型:width(content+padding+border)+margin

4.css选择器有哪些?哪些属性可以继承?优先级算法如何计算?css新增伪类有哪些?

1.id选择器(#)
2.类选择器(.3.标签选择器(div,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 text-indent
不可继承的样式:border  padding  margin width height
优先级就近原则,同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准

优先级为:
!important > id > class > tag
important比内联优先级高,但内联比id更高

css新增伪类举例:
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        单选框或复选框被选中。

5.position的值,relative和absolute分别是相对于谁定位的?

absolute
生成绝对定位的元素,相对于最近一级的定位不是static的元素来进行定位。

fixed (老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位的

relative
生成相对定位的元素怒,相对于其在普通流中的位置进行定位

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

6.css3有哪些新特性?

css3实现圆角(border-radius),阴影(box-shadow)
对文字加特效(text-shadow),线性渐变(gradient),旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba 
在CSS3中唯一引入的伪元素是::selection.
媒体查询,多栏布局
border-image

7.XML和JSON的区别?

1.数据体积方面
JSON相对于XML来讲,数据的体积小,传递的速度更快些

2.数据交互方面
json与JavaScript的交互更加方便,更容易解析处理,更好的数据交互

3.数据描述方面
json对数据的描述比XML4.传输速度方面
json的速度要远远快于XML

8.对BFC规范的理解?

BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生重叠。

9.解释下css sprites,以及你要如何在页面或网站中使用它

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是也有限制,一般浏览器都是6个。对于未来而言,就不需要这样做了,因为有了http2

10.解释下浮动和它的工作原理?清除浮动的技巧?

浮动元素脱离文档流,不占据空间,浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both 弊端就是增加了无意义的标签
2.使用overflow
给包含浮动元素的父标签添加css属性 overflow:auto;zoom:1;zoom:1用于兼容ie6
3.使用after伪元素清除浮动
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意该方法必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素。

11.浮动元素引起的问题和解决办法?

浮动元素引起的问题:
1.父元素的高度无法被撑开,影响与父元素同级的元素
2.与浮动元素同级的非浮动元素(内联元素)会跟随其后
3.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。

解决方法:
使用css中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式
.clearfix:after{ content:’.’;display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;} /* for IE/Mac */

12.清除浮动的几种方法:

1.额外标签法:<div style="clear:both"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁)
2.使用伪类after

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }
3.浮动外部元素
4.设置overflow为‘hidden’或者‘auto’
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页