CSS篇
CSS的选择器
元素选择器:* 、E、 E#id、 E.class
关系选择器:E、F、E>F、E+F、E~F
属性选择器:E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]
伪类选择器:E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
伪对象选择器:E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
如何让一段文本中的所有英文单词的首字母大写
text-transform:none/capitalize(将每个单词的第一个字母转换成大写)
uppercase(将每个单词转换成大写 )
lowercase(将每个单词转换成小写 )
实现一个div在不同分辨率下的水平垂直居中
//方法一:使用百分比
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
//方法二:使用flex布局
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}
方法一:先使用了绝对定位,使用top:50%;left:50%是以左上角为原点,故不处于中心位置,translate(-50%,-50%)作用是往上(x轴),左(y轴)移动自身长宽的50%,以使其居于中心位置
方法二:使用了flex布局,以body为父元素,使用父元素属性进行垂直水平居中
左右固定,中间自适应样式
<style>
//方法一:设置子元素属性
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
//方法二:运用父元素属性
.box {
display: flex;
height: 200px;
justify-content: space-between;
}
.left {
width: 100px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
width: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
两个方法都使用了flex布局,但是方法一针对子元素的flex子项目占的份数,flex:flex-grow,flex-shrink,flex-basis,分别表示放大比例(值大的放大)、缩小比例(为0不缩小,为1缩小)、占据固定空间,因此方法一只有center是方法缩小,其他都是固定大小。方法二,是先使用父元素属性,先两边贴边 再平分剩余空间,并且center进行中间的填充
阐述清楚浮动的几种方式(常见问题)
1、浮动的产生
float: left/right(设置后产生浮动)
初衷:浮动原先的设计初衷是为了实现文字环绕效果
结果:父元素高度塌陷,理解起来就是元素浮动飘起来了,失去高度,下面的元素会顶上来,就造成了原有的元素背景不见了,margin/padding也不能正常显示2、解决浮动的方法
(1)clear: both在元素最后下加一个元素设置clear:both属性,缺点是会增加多余无用的html元素
<div class="container">
<div class="left">left浮动</div>
<div class="right">right浮动</div>
<div style="clear:both;"></div>
</div>
(2)使用after伪元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
(3)给父元素设置明确的高度,缺点是并不是所有元素的高度都是固定
(4)给父级元素设置overflow:hidden, 缺点:不能和position配合使用
解释css sprites ,如何使用?
1、什么是精灵图
将一些小图标放在一张图上2、精灵图的优点
减少图片的总大小
减少下载图片资源请求,减小建立连接的消耗3、精灵图的使用方式
.icon1 {
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
background-position: 20px 20px;
}
// 第一个数是x轴, 第二个数是y轴
box-sizing常用的属性有哪些?分别有什么作用?
(1)content-box
宽高是元素本身的宽高 不包含border+padding(2)border-box
元素的宽高已经包含了border+padding(3)inherit
从父元素继承box-sizing属性
CSS样式覆盖规则
!important > 内联样式 > id选择 > (class选择 = 伪类选择) > (标签选择 = 伪元素选择)
请简要描述margin重合问题,及解决方式
问题:相邻两个盒子垂直方向上的margin会发生重叠,只会取比较大的margin
解决:
(1)设置padding代替margin
(2)设置float
(3)设置overflow
(4)设置position:absolute 绝对定位
(5)设置display: inline-block
对<meta></meta>标签有什么理解
1、meta是html文档头部的一个标签,这个标签对用户不可见,是给搜索引擎看的。
2、meta标签属性用法分成两大类
3、<meta charset="UTF-8"> 使用的编码格式,大部分是utf-8
display none visibility hidden区别?
重绘和回流(哪些情况重绘,哪些回流)
说说你对语义化的理解?
为什么要初始化css样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值不同,如果不初始化css,会导致不同浏览器页面间的显示差异。
移动端适配1px问题
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
居中为什么要使用transform(为什么不使用marginLeft/Top)
transform 属于合成属性,不会引起整个页面的回流重绘,节省性能消耗,但是占用内存会大些
top/left属于布局属性,会引起页面layout回流和repaint重绘。
对BFC规范的理解
BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。
BFC是页面CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。
BFC的一个最重要的效果是,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
利用BFC可以闭合浮动,防止与浮动元素重叠。
CSS伪类与CSS伪对象的区别
CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西
根本区别在于:它们是否创造了新的元素(抽象)
伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中
position的absolute与fixed共同点与不同点
相同:
a. 改变行内元素的呈现方式,display被置为block
b. 让元素脱离普通流,不占据空间
c. 默认会覆盖到非定位元素上
区别:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。
CSS3有哪些新特性?
CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)
增加了更多的CSS选择器 多背景 rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局
rgba()和opacity的透明效果有什么不同?
a. opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色。
b. 设置rgba透明的元素的子元素不会继承透明效果!
常见的页面布局
- 水平居中布局
- 左侧固定 右侧自适应
- 流式布局
- 弹性布局
- 圣杯布局
- 双飞翼布局
常见单位
1. px:绝对单位,页面按精确像素展示
2. em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值
3. rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持
4. vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%
5. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%
6. vmin:vw和vh中较小的那个
7. vmax:vw和vh中较大的那个
8. %:百分比
移动端视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
initial-scale:初始的缩放比例
minimum-scale:允许用户缩放到的最小比例
maximum-scale:允许用户缩放到的最大比例
user-scalable:用户是否可以手动缩放
Sass、Less、Stylus区别
Sass 变量必须是以$开头的,然后变量和值之间使用冒号(:)隔开,和css属性是一样的。
Less 变量是以@开头的,其余sass都是一样的。
Stylus 对变量是没有任何设定的,可以是以$开头或者任意字符,而且变量之间可以冒号,空格隔开,但是在stylus中不能用@开头