display: none; 与 visibility: hidden; 的区别
display:none
;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden
;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见display: none
;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility:hidden
;是继承属性,子孙节点消失由于继承了hidden
,通过设置visibility: visible
;可以让子孙节点显式display
通常会造成文档重排。修改visibility
属性只会造成本元素的重绘display: none;
元素内容;会读取visibility: hidden
元素内容css hack原理及常用hack
link 与 @import 的区别
link
是HTML
方式, @import
是CSS
方式link
最大限度支持并行下载, @import
过多嵌套导致串行下载,出现FOUClink
可以通过 rel="alternate stylesheet"
指定候选样式link
支持早于 @import
,可以使用 @import
对老浏览器隐藏样式@import
必须在样式规则之前,可以在css
文件中引用其他文件link
优于@import
CSS有哪些继承属性
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor
外边距折叠(collapsing margins)
margin
会合并成一个margin
,叫做外边距折叠。规则如下:
margin
会折叠inline-block
元素或绝对定位元素的margin
不会和垂直方向上的其他元素的margin折叠margin-bottom
和margin-top
相邻时也会折介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
CSS选择符有哪些?哪些属性可以继承?
font-size font-family color, UL LI DL DD DT
border padding margin width height
CSS优先级算法如何计算?
!important > id > class > tag
important 比 内联优先级高CSS3新增伪类有那些?
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> 元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
div
设置一个宽度,然后添加margin:0 auto
属性div{
width:200px;
margin:0 auto;
}
//确定容器的宽高 宽500 高 300 的层
//设置层的外边距
.div {
width:500px ; height:300px;//高度可以不设
margin: -150px 0 0 -250px;
position:relative; //相对定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display有哪些值?说明他们的作用
position的值relative和absolute定位原点是?
CSS3有哪些新特性?
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
用纯CSS创建一个三角形的原理是什么?
// 把上、左、右三条边隐藏掉(颜色设为 transparent)
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一个满屏 品 字布局 如何设计?
经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
为什么要初始化CSS样式
对BFC规范(块级格式化上下文:block formatting context)的理解?
css定义的权重
// 以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下/// 例子是演示各种定义的权重值:
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
// 如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现
display:inline-block 什么时候会显示间隙?(携程)
谈谈浮动和清除浮动
介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
box-sizing 常用的属性有哪些?分别有什么作用?
CSS选择器有哪些?
CSS哪些属性可以继承?哪些属性不可以继承?
CSS如何计算选择器优先?
CSS3新增伪类有哪些?
请列举几种隐藏元素的方法
<div hidden="hidden">
HTML5属性,效果和display:none;相同,但这个属性用于记录一个元素的状态rgba() 和 opacity 的透明效果有什么不同?
css 属性 content 有什么作用?
CSS3有哪些新特性?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型)以及适用场景?
经常遇到的浏览器的JS兼容性有哪些?解决方法是什么?
请写出多种等高布局
css垂直居中的方法有哪些?
.vertical {
height: 100px;
line-height: 100px;
}
.container {
position: relative;
}
.vertical {
height: 300px; /*子元素高度*/
position: absolute;
top:50%; /*父元素高度50%*/
margin-top: -150px; /*自身高度一半*/
}
.container {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
}
.container {
height: 100%;/*定义父级高度,作为参考*/
}
.extra .vertical{
display: inline-block; /*行内块显示*/
vertical-align: middle; /*垂直居中*/
}
.extra {
height: 100%; /*设置新增元素高度为100%*/
}
.vertical {
position: absolute;
top:50%; /*父元素高度50%*/
transform:translateY(-50%, -50%);
}
.container {
display:flex;
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
}
圣杯布局的实现原理?
.container {
padding-left: 150px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -150px;
}
.right {
float: left;
width: 190px;
margin-left: -190px;
position: relative;
right: -190px;
}
什么是双飞翼布局?实现原理?
.container {
/*padding-left:150px;*/
/*padding-right:190px;*/
}
.main-wrap {
width: 100%;
float: left;
}
.main {
margin-left: 150px;
margin-right: 190px;
}
.left {
float: left;
width: 150px;
margin-left: -100%;
/*position: relative;*/
/*left:-150px;*/
}
.right {
float: left;
width: 190px;
margin-left: -190px;
/*position:relative;*/
/*right:-190px;*/
}
在CSS样式中常使用 px、em 在表现上有什么区别?
解释下什么是浮动和它的工作原理?
此时,内容会溢出到容器外面而影响布局。这种现象被称为浮动(溢出)。
浮动元素引起的问题?
列举几种清除浮动的方式?
<div style="clear:both"></div>
<br clear="all" />
清除浮动最佳实践(after伪元素闭合浮动):
.clearfix:after{
content: "\200B";
display: table;
height: 0;
clear: both;
}
.clearfix{
*zoom: 1;
}
什么是 FOUC(Flash of Unstyled Content)? 如何来避免 FOUC?
没有样式的页面内容显示瞬间闪烁,这种现象称为“文档样式短暂失效”,简称为FOUC
介绍使用过的 CSS 预处理器?
CSS优化、提高性能的方法有哪些?
浏览器是怎样解析CSS选择器的?
在网页中的应该使用奇数还是偶数的字体?
margin和padding分别适合什么场景使用?
抽离样式模块怎么写,说出思路?
元素竖向的百分比设定是相对于容器的高度吗?
全屏滚动的原理是什么? 用到了CSS的那些属性?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
$(window).resize(function () {
screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
$("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
$("body").attr("class", "w1400");
}
if(screenWidth > 1800){
$("body").attr("class", "");
}
}
什么是视差滚动效果,如何给每页做不同的动画?
a标签上四个伪类的执行顺序是怎么样的?
link > visited > hover > active
伪元素和伪类的区别和作用?
p::before {content:"第一章:";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
a:hover {color: #FF00FF}
p:first-child {color: red}
::before 和 :after 中双冒号和单冒号有什么区别?
如何修改Chrome记住密码后自动填充表单的黄色背景?
input [type=search] 搜索框右侧小图标如何美化?
input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance: none;
height: 15px;
width: 15px;
border-radius: 8px;
background:url("images/searchicon.png") no-repeat 0 0;
background-size: 15px 15px;
}
网站图片文件,如何点击下载?而非点击预览?
<a href="logo.jpg" download>下载</a>
<a href="logo.jpg" download="网站LOGO" >下载</a>
iOS safari 如何阻止“橡皮筋效果”?
$(document).ready(function(){
var stopScrolling = function(event) {
event.preventDefault();
}
document.addEventListener('touchstart', stopScrolling, false);
document.addEventListener('touchmove', stopScrolling, false);
});
你对 line-height 是如何理解的?
line-height 三种赋值方式有何区别?(带单位、纯数字、百分比)
设置元素浮动后,该元素的 display 值会如何变化?
怎么让Chrome支持小于12px 的文字?
.shrink{
-webkit-transform:scale(0.8);
-o-transform:scale(1);
display:inline-block;
}
让页面里的字体变清晰,变细用CSS怎么做?(IOS手机浏览器字体齿轮设置)
-webkit-font-smoothing: antialiased;
font-style 属性 oblique 是什么意思?
如果需要手动写动画,你认为最小时间间隔是多久?
display:inline-block 什么时候会显示间隙?
overflow: scroll 时不能平滑滚动的问题怎么处理?
一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度
.sub { height: calc(100%-100px); }
.container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; }
.container { display:flex; flex-direction:column; }
.sub { flex:1; }