介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
css盒子模型由4部分构成,margin、border、padding、content。标准盒子模型和IE盒子模型的主要区别是在于width的计算,标准盒子模型中,width = content的宽度,IE盒子模型中width包括content、padding、border。
- CSS选择符有哪些?哪些属性可以继承?
ID选择器、类选择器、标签选择器、属性选择器、后代选择器等。优先级:ID > 类 = 伪类 = 属性 > 元素 = 伪元素。内联样式优先级比ID高,!important优先级最高。
可继承的属性:visibility. cursor - CSS3新增伪类有那些?
之前整理过h5、css3新增的一些属性。 - 如何居中div?如何居中div中的内容?
居中div
//适用于宽高已知的元素。
.item{
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
<div class="item"></div>
//利用flex布局,不限制宽高
.parent{
display: flex;
justify-content: center;
align-items: center;
height: 500px;
width: 500px;
background:red;
}
.item{
width: 100px;
height: 100px;
border: 1px solid #000;
}
<div class="parent">
<div class="item"></div>
</div>
//
.item{
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
<div class="item"></div>
居中div中的内容
//缺点是如果div宽度设置不够,内容会自动换行超出容器。只有当div的宽度足够容纳文字时,才会达到想要的效果,适用于单行文字居中。
.item{
width: 200px;
height: 100px;
border: 1px solid #000;
line-height: 100px; //行高与div等高,实现垂直居中
text-align: center; //实现水平居中
}
<div class="item">垂直水平我都居中了。</div>
//利用table布局。适用于多行居中。
.parent{
display: table;
}
.item{
display: table-cell;
width: 200px;
height: 200px;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
}
<div class="parent">
<div class="item">垂直水平我都居中了。</div>
</div>
- 用纯CSS创建一个三角形的原理是什么?
- 满屏 品 字布局 ?非满屏品字布局?三列布局,左右定宽,中间自适应?
<div class="content">
<div class="top">p1</div>
<div class="left">p2</div>
<div class="right">p3</div>
</div>
//满屏品字布局
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 100px;
background: pink;
}
.left,.right{
float: left;
width: 50%;
height: 100px;
background: yellow;
}
.right{
background:blue;
}
//非满屏品字布局
*{
margin: 0;
padding: 0;
}
.top{
width: 100px;
height: 100px;
margin: 0 auto;
background: pink;
}
.left,.right{
float: left;
width: 100px;
height: 100px;
}
.left{
margin-left: 50%;
background:red;
}
.right{
background:blue;
margin-left: -200px;
}
//三列布局,左右定宽中间自适应。本文采用的方法注意center放在最后面一个div
<div class="content">
<div class="left">p1</div>
<div class="right">p3</div>
<div class="center">p2</div>
</div>
*{
margin: 0;
padding: 0;
}
.center{
width: auto;
background:pink;
height: 100%;
margin-left: 150px;
margin-right: 200px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
}
.right{
background: #77BBDD;
width:200px;
float:right;
}
//三列布局,利用flex布局
<div class="content">
<div class="left">p1</div>
<div class="center">p2</div>
<div class="right">p3</div>
</div>
*{
margin: 0;
padding: 0;
height: 100%
}
.content{
display: flex;
}
.left,.right{
width: 120px;
height: 100%;
background: green;
}
.center{
height: 100%;
background: pink;
width: 100%;
}
常见兼容性问题?
1.不同浏览器的标签默认的margin和padding不同:*{margin:0;padding:0}
2.块级元素float后,又存在margin-left/right时,IE6中显示margin比设置的大:只要在float的标签样式中加入 display:inline;将其转化为行内属性即可
3.设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度:设置overflow:hidden或者是将line-height设置为更小的高度。
4.图片默认有间距:使用float属性为img布局。li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
li标签之间的空白间隔是由于换行符导致的。所以最简单的办法是写li标签的时候不换行,但是不美观。
CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?
当在表格元素中使用时,设置visibility:collapse可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden”。- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
1.首先看display、position、float之间的关系。
display:none,则positon/float不起作用。
display不为none,看position是否是absolute/fixed,如果是的话,float不起作用,display按照block/table展示;如果不是的话,再看float的值,如果float为none,display同设置值。如果float不是none或者元素为根元素的时候,调整diaplay的值。
2.再看margin-collapse:两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠 - 对BFC规范(块级格式化上下文:block formatting context)的理解?
* BFC主要有这样3个特性:*
1.属于不同BFC的元素不会发生margin-collapse
2.BFC相当于一个隔离的盒子,不影响外部元素的布局,外部元素也不会影响内部盒子的布局。
3.块级格式化上下文不会重叠浮动元素,
触发BFC的条件:
1.float不为none
2.position为absolute/fixed的元素
3.display为table/table-cell/table-caption/inline-block
4.overflow不为visible - 清除浮动的方式
1.在浮动元素末尾添加一个空的标签,设置 clear:both
2.父元素设置overflow:hidden/auto
3.利用after伪元素:这里我们使用::after。添加一个类clear,在需要清除浮动时,只需要给父元素追加clear类即可
.clear::after {
content:"";
display:table;
clear:both;
}
::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
双冒号表示伪元素,单冒号表示伪类。
::before将会在内容之前“添加”一个元素,而::after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性如果需要手动写动画,你认为最小时间间隔是多久,为什么?
**多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
**- 有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。
<div class="content">
<div class="top"></div>
<div class="bottom"></div>
</div>
//绝对布局
*{
margin: 0;
padding: 0;
}
.content{
width: auto;
height: 200px;//演示方便,所以设置了一个高度
border: 5px solid #000;
position: relative;
}
.top{
height: 100px;
background: red;
}
.bottom{
position: absolute;
top: 100px;
right: 0px;
left: 0px;
bottom: 0px;
background: green;
}
//flex
.content{
display: flex;
flex-flow: column wrap;
border: 1px solid blue;
}
.top{
height: 100px;
background: red;
}
.bottom{
background: green;
}
- 什么是Cookie 隔离?(或者说:请求资源的时候不要让它带cookie怎么做)
因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据 - style标签写在body后与body前有什么区别?
写在body后面会重新渲染