收集CSS琐碎的知识点

最新推荐文章于 2021-10-20 12:58:47 发布

阿婷学编程

最新推荐文章于 2021-10-20 12:58:47 发布

阅读量223

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_42247274/article/details/109250967

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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对数据的描述比XML差

4.传输速度方面
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’