1、实现一个div在不同分辨率下的水平垂直居中
.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid pink; width: 100px; height: 100px; }
2、左右固定,中间自适应样式
<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; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body>
3、阐述清楚浮动的几种方式(常见问题)
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配合使用
4、解释css sprites ,如何使用?
1、什么是精灵图 将一些小图标放在一张图上 2、精灵图的优点 减少图片的总大小 减少下载图片资源请求,减小建立连接的消耗 3、精灵图的使用方式 .icon1 { background-image: url(css/img/sidebar.png); background-repeat: no-repeat; background-position: 20px 20px; } // 第一个数是x轴, 第二个数是y轴
5、box-sizing常用的属性有哪些?分别有什么作用?
(1)content-box 宽高是元素本身的宽高 不包含border+padding (2)border-box 元素的宽高已经包含了border+padding (3)inherit 从父元素继承box-sizing属性
6、CSS样式覆盖规则
!important > 内联样式 > id选择 > (class选择 = 伪类选择) > (标签选择 = 伪元素选择)
7、请简要描述margin重合问题,及解决方式
问题:相邻两个盒子垂直方向上的margin会发生重叠,只会取比较大的margin 解决:(1)设置padding代替margin (2)设置float (3)设置overflow (4)设置position:absolute 绝对定位 (5)设置display: inline-block
8、对<meta></meta>标签有什么理解
1、meta是html文档头部的一个标签,这个标签对用户不可见,是给搜索引擎看的。 2、meta标签属性用法分成两大类
3、<meta charset="UTF-8"> 使用的编码格式,大部分是utf-8
9、display none visibility hidden区别?
10、重绘和回流(哪些情况重绘,哪些回流)
11、说说你对语义化的理解?
12、为什么要初始化css样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值不同,如果不初始化css,会导致不同浏览器页面间的显示差异。
13、移动端适配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; }
14、居中为什么要使用transform(为什么不使用marginLeft/Top)
transform 属于合成属性,不会引起整个页面的回流重绘,节省性能消耗,但是占用内存会大些
top/left属于布局属性,会引起页面layout回流和repaint重绘。