CSS 面试总结

1、 插入样式表的三种方法

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式 优先级+作用域+书写顺序

2、 盒子

标准盒子:Margin(外边距) - Border(边框) - Padding(内边距) - Content(内容)
margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。
怪异盒子:width指的是内容、边框、内边距总的宽度(content + border + padding);width + margin

3、visibility and display

隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

4、选择符

id选择器(#myid) 类选择器(.myclassName) 标签选择器(div,h1,p)
CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器
子代选择器(ul>li 以大于号分隔) 后代选择器(li a 以空格分隔)
相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔)
通配符选择器(*) 属性选择器(a[rel=“external”]) 伪类选择器(a:hover,li:nth-child)
可继承的样式: font-size font-family color
不可继承的样式: border padding margin height width

5、Position

Static:
该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效
Relative:
生成相对定位的元素,相对于其正常位置进行定位
Absolute:
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
Fixed:
生成绝对的元素,相对于浏览器窗口进行定位
Sticky:
基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换
Inherit:
规定应该从父元素继承 position 属性的值。

6、Flex布局

Justify-content: flex-start | flex-end | center | space-between | space-around

Align-items: flex-start | flex-end | center | baseline | stretch

7、浏览器

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性

8、图片加载优化

CSSSprite 减少对服务器请求 将小icon合并成一张图片,只需要加载一次这样就可以节约大量请求
SVGSprite 体积小,矢量
Iconfont 体积小,矢量,集成度高
Base64减少http请求,也不占用服务器的内存资源,缺点在于base64格式的图片比原图大,占用了更多的存储空间,而且浏览器不会对该资源进行缓存。
图片懒加载使图片仅在浏览器当前视窗内出现时才加载该图片,达到减少首屏图片请求数的技术就被称为“图片懒加载”。

9、清浮动

清浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使页面后面的布局不能正常显示:1、父级div定义height 2、最后一个浮动元素后加空div标签 并添加样式clear:both。3、包含浮动元素的父标签添加样式overflow为hidden或auto。 4、父级div定义zoom

10、CSS特性

过渡、动画、形状转换、选择器、阴影、边框图片、边框圆角、反射、文字、换行、超出省略号、多行省略号、文字阴影、颜色、渐变、滤镜、弹性布局

11、居中

12、常见的兼容性问题

不同浏览器的标签默认的margin和padding不一样。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序

13、@import 和 link

link引入的css在加载页面时同时加载,而@import中的css要在页面加载完毕后加载
link是html提供的标签,不仅可以加载css文件,还能定义 RSS、rel 连接属性等。而@import是css中的语法规则
link属于XHTML标签,而@import是CSS提供的。
import只在IE 5以上才能识别,而link是XHTML标签,无兼容问题。
link方式的样式权重高于@import的权重。
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

14、BFC规范(块级格式化上下文 block formatting context)

Block-level box + Formatting Context
它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。
触发条件(满足一个):

  • 根元素,即HTML元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption
  • position的值为absolute或fixed
    特性:阻止垂直外边距折叠 包含浮动元素

15、行内元素 块状元素 行内块状元素

(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素

16、居中大汇总

  • 元素居中对齐水平居中对齐一个元素(如
    ), 可以使用 margin: auto;设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度,并将两边的空外边距平均分配。
    .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
  • 文本居中对齐
    如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center;
    .center { text-align: center; border: 3px solid green; }
  • 图片居中对齐
    要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
    img { display: block; margin: auto; width: 40%; }
  • 垂直居中对齐 - 使用 padding
    .center { padding: 70px 0; border: 3px solid green; }
    如果要水平和垂直都居中,可以使用 padding 和 text-align: center:
    .center { padding: 70px 0; border: 3px solid green; text-align: center; }
  • 垂直居中 - 使用 line-height
    .center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; }
    /* 如果文本有多行,添加以下代码: */
    .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }
  • 垂直居中 - 使用 position 和 transform
    .center { height: 200px; position: relative; border: 3px solid green; }
    .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

17、隐藏页面元素

  • opacity:0:本质上是将元素的透明度将为0,就看起来隐藏了,但是依然占据空间且可以交互
  • visibility:hidden: 与上一个方法类似的效果,占据空间,但是不可以交互了
  • overflow:hidden: 这个只隐藏元素溢出的部分,但是占据空间且不可交互
  • display:none: 这个是彻底隐藏了元素,元素从文档流中消失,既不占据空间也不交互,也不影响布局
  • z-index:-9999: 原理是将层级放到底部,这样就被覆盖了,看起来隐藏了
  • transform: scale(0,0): 平面变换,将元素缩放为0,但是依然占据空间,但不可交互

18、em\px\rem

px:绝对单位,页面按精确像素展示。
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持

19、Css Sprites

是什么 ?
雪碧图也叫CSS精灵, 是一CSS图像合成技术,开发人员往往将小图标合并在一起之后的图片称作雪碧图。
如何操作?
使用工具(PS之类的)将多张图片打包成一张雪碧图,并为其生成合适的 CSS。 每张图片都有相应的 CSS 类,该类定义了background-image、background-position和background-size属性。 使用图片时,将相应的类添加到你的元素中。
好处:
减少加载多张图片的 HTTP 请求数(一张雪碧图只需要一个请求)
提前加载资源
不足:
CSS Sprite维护成本较高,如果页面背景有少许改动,一般就要改这张合并的图片
加载速度优势在http2开启后荡然无存,HTTP2多路复用,多张图片也可以重复利用一个连接通道搞定

发布了107 篇原创文章 · 获赞 51 · 访问量 1万+
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览