前端计划——面试题总结-CSS篇
前端面试之CSS篇
1、三种基本引入方式
外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">内部样式表
<head>
<style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
</style>
</head>
内联
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
2、CSS的引入方式中link和@import的区别
link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
link支持使用Javascript控制DOM去改变样式;而@import不支持。
3、CSS选择器
选择器优先级为!important >内联 > id > 伪类 = 类class > 属性 > tag >通配
3.1 基本选择器
类选择器 .className
ID选择器 #idName
元素选择器 elementName
通配选择器 * (效率最低,不推荐用)
属性选择器 element[attr=value]
3.2 权重计算
内联样式表的权值最高 1000;
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
3.3 计算法则
选择器都有一个权值,权值越大越优先;
当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
继承的CSS 样式不如后来指定的CSS 样式;
在同一组属性设置中标有"!important"规则的优先级最大;示例如下:
3.4组合选择符
后代选择器(空格符)选取所有后代 A B
子元素选择器 (大于号)选择某一类型 A>B
相邻兄弟选择器 (加号)A+B
普通兄弟选择器 (波浪号)A~B
4、伪元素与伪类
4.1 伪类
CSS伪类匹配被用户激活的元素,接伪类先后顺序被称为LVHA顺序:
:link
:visited
:hover
:active
4.2 伪元素
伪元素添加到选择器,但不是描述特殊状态,它们允许您为元素的某些部分设置样式(CSS3使用双冒号)
::after
::before
::first-letter
::first-line
::selection
5、盒式模型
margin/border/padding/content
margin:a,b,c,d 上/右/下/左
margin:a,b,c 上/左右/下
margin:a,b 上下/左右
margin:a 上下左右
6、定位的几种方式:absolute/relative/fixed/static/sticky
absolute
绝对定位的元素的位置相对于最近的已定位父元素(也就是非static定位),如果元素没有已定位的父元素,那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关,因此不占据空间。relative
相对定位是相对其正常位置。相对于其在普通流中的位置进行定位。可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。经常被用来做绝对定位的容器块。fixed
元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关,因此不占据空间。static
HTML元素的默认值,即没有定位,元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left, right影响。sticky
position属性中最有意思的就是sticky了,设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。
可以知道sticky属性有以下几个特点:
该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量
7、清除浮动
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
额外标签
添加<div style="clear:both;"></div>使用overflow
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。使用after伪对象
#parent:after{/*注意content要有内容*/content:".";height:0;visibility:hidden;display:block;clear:both;
}
8、display: none;和visibility: hidden;的区别
都是隐藏元素,但是前者文档布局中不占用空间,后者仍占用空间
display:none隐藏产生reflow和repaint(回流与重绘)
前者有株连性,即父元素设置display: none后子元素不管怎样设置都不能显示,而后者的子元素通过设置visibility: visible后还是能显示出来的
9、float和absolute的异同
相同点:都使元素脱离文档流,可以设置宽高
不同点:float仍然占用空间,absolute可以覆盖
10、box-sizing
属性作用:主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box
元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/高border-box
让元素维持IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。设置width/height属性指的是border + padding + contentinherit
继承父元素的box-sizing属性
11、左右布局:左边定宽、右边自适应,不少于3种方法
//方法一(使用CSS3的flex布局)
.container {width: 100%;display: flex;flex-flow: row nowrap;
}
.left {width: 200px;height: 200px;background: green;
}
.right {flex: 1;height: 200px;background: red;
}
//方法二(使用CSS3的calc(),注意clac表达式中的减号前后有空格)
.left {float: left;width: 200px;height: 200px;background: green;
}
.right {float: left;width: calc(100% - 200px);height: 200px;background: red;
}
//方法三(不设置宽度,默认填充满)
.left {float: left;width: 200px;height: 200px;background: green;
}
.right {margin-left: 200px;height: 200px;background: red;
}
//方法四(绝对定位,注意right部分)
.left {position: absolute;width: 200px;height: 200px;background: green;
}
.right {position: absolute;left: 200px;right: 0px;height: 200px;background: red;
}
//方法五(百分比width,这个方法不是很好使,百分比不好确定)
.left {float: left;width: 200px;height: 200px;background: green;
}
.right {float: left;width: 85%;height: 200px;background: red;
}
//方法六(表格方式,不推荐使用)
12、div水平垂直居中实现方式
/*方法一:使用flex布局*/
/*加入边框和宽高便于浏览器测试*/
.parent {border: 1px solid black;display:flex;justify-content: center;align-items: center;
}
.child {border: 1px solid black;width: 400px;height: 400px;
}
/*方法二:绝对定位,左右都是50%,margin-left和top分别为自身一半值的负数*/
.parent {position: relative;
}
.child {border: 1px solid black;width: 400px;height: 200px;position: absolute;left: 50%;top: 50%;margin-left: -200px;margin-top: -100px;
}
/*方法三:还是绝对定位,但使用transform*/
.parent{position: relative;
}
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
前端计划——面试题总结-CSS篇相关推荐
- 2020前端最新面试题(vue篇)
2020前端最新面试题(vue篇) 由于疫情原因,原本每年的"金三银四"仿佛消失,随之而来的是找工作的压力,这里给要面试的小伙伴们总结了到目前为止我遇到的前端面试题,仅供参考哦,第 ...
- 2023前端大厂面试题之JavaScript篇(4)
系列文章: 2023前端大厂面试题之JavaScript篇(1) 2023前端大厂面试题之JavaScript篇(2) 2023前端大厂面试题之JavaScript篇(3) 2023前端大厂面试题之J ...
- 2022前端大厂面试题之JavaScript篇(1)
系列文章: 2022前端大厂面试题之JavaScript篇(1) 2022前端大厂面试题之JavaScript篇(2) 2022前端大厂面试题之JavaScript篇(3) 2022前端大厂高频面试题 ...
- 前端面试题之CSS篇
前端面试题之CSS篇 一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和in ...
- 前端基础面试题(HTML + CSS)
前端基础面试题(HTML + CSS) 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变 ...
- 纯福利 | 前端新人面试题汇总-基础篇
近来,由于我的公众号粉丝越来越多,当然留言和各种问题也越来越多,虽说近来一段 因为产品接近收尾上线阶段,确实略忙,我有时候甚至回到我温暖的家 都将近深夜11点(我也不知道为何这么拼,后面我会写篇文章专 ...
- 前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
- 前端开发实习面试题(CSS篇)
目录 1.CSS3有哪些新特性? 2.介绍一下盒子模型(由什么组成)? 3.定位有哪些值,分别是相对谁定位? 4.如果我想给table表格的第一列内容添加样式,如何做? 5.浮动的作用,如何清除浮动? ...
- 前端知识点回顾——HTML,CSS篇
前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...
最新文章
- 2019微生物组—宏基因组分析专题研讨会
- docker安装mysql指定_Docker安装MySql,并且使用外部客户端链接
- Eigen教程(2)之Matrix,Vectors, Dynamic介绍
- EventBus实现 - 发布订阅 - XML加载
- 利用HTML+CSS,写出一个正方体并实现透视效果
- 网站漏洞修复 XSS漏洞的修复办法
- 现有的DoS(DDoS)防御技术整理
- mysql 事件计划区别_【转】mysql 计划事件
- C++读书笔记:多态
- 友善串口助手使用教程_友善串口调试助手基本功能怎么使用-友善串口调试助手使用教程...
- 上海居住证积分全流程
- layui 自定义表格行高,自适应
- Mybatis数据库表字段有关键字
- OneNote 找回误删除笔记
- 单元格等于计算机日期,Excel相邻单元格快速填入相同日期的几种方法
- [生命科学] 生物基础实验之DNA提取
- PSTN 与 PBX 业务
- mybatis从入门到精通(刘增辉著)-读书笔记第四章
- 麒麟Kylin-V10-arm64-操作系统永久修改分辨率——趟坑
- Direct2D 1.1 开发笔记 特效篇(一) 使用D2D特效