一,a标签的特殊性
二,margin-top不能正常显示的解决方法
- 给父元素添加border,但会撑大父元素的总体宽高
- 给父元素添加padding
- 给父元素添加float,会破坏正常文档流,margin:0不生效
- 给父元素添加overflow:hidden(子元素被裁减)
- 给元素本身写float
三,link与import的不同
link是html提供,可以引用css文件还可以引用其他文件
link与html一起加载
link没有版本要求
link支持控制dom
@import是由css提供,只能引用css文件
@import是在所有html加载之后再加载css文件
@import在IE5以上支持
@import不支持控制dom
四,文本溢出显示省略号的必要条件
- 有一定的宽度
width
- 强制在一排显示
white-space:nowrap;
- 溢出裁切
overflow:hidden;
- 显示省略号:
text-overflow:ellipsis;
五,块状元素与内联元素的区别
- 块状元素可以设置宽度和高度,内联元素的宽高是其内容的宽高
- 块状元素自上而下独占一行显示,内联元素自左向右在一排显示,直到遇到边界才会换行
- 块状元素和内联元素都遵循盒模型的设置,但是内联元素有些属性不能正常显示
- 块状元素一般做内联元素的盒子使用
常用的块状元素div、 p、h1、form、ul 、 li、 ol dt 、dd 、table(li是特殊的块状元素,有列表符号)
常用的内联元素span、a、b、i、label、input、 img、 strong 、em(img input textarea select特殊的内联元素,可以设置宽高)
如果元素设置float属性时相当于给元素添加display:block;
inline-block:行内块,可以设置宽高,也在一排显示
img input textarea select 只有此值的标签支持 vertical-align属性
大多数块状元素的display属性的默认值为block,li的默认值为list-item
大多数内联元素的属性的默认值为inline
img的display属性值为inline-block
置换元素:通过属性值决定其在页面的显示效果
img input textarea select
置换元素可以设置宽高是因为在渲染(浏览器解析)时会生成一个框
六,固定宽高的div如何实现水平垂直居中
{
width:100px;
height:100px;
position:fixed;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
或者(不推荐,浏览器计算量大)
{
height: 100px;
width:100px;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background: red;
}
七,定位属性position
relative 相对于自身原来位置的偏移,不会影响正常文档流。
absolute 绝对定位根据离其最近的有定位的父元素去定。如果父元素都没有定位,则根据浏览器窗口去定。如果使用定位,即使宽度为100%,也要添加。会脱离正常文档流。
fixed固定定位,根据浏览器窗口去定,无论是否出现滚动条,都固定。
如果子元素根据父元素去定位,那么父元素一定要有定位属性值,父元素的定位属性值不能为static。
如果父元素有margin:0 auto;属性设置此时父元素的position属性值使用相对定位比较好。
子绝对,父相对。
子元素相对父元素定位,一般子元素绝对定位,父元素相对定位。
定位的元素会层叠在一起,谁在后边谁在上边。z-index值越大,越靠上。(z-index必须与定位连用才能生效,定位的属性值不能static默认值)
绝对定位与相对定位的区别
参照物不同:相对定位的参照物是自身原来的位置,绝对定位是离其最近的有定位的父元素,如果父元素没有则根据其浏览器窗口定位。
包含块是绝对定位的参照物,为绝对定位提供坐标。
八,最小高度自适应解决方法
{
min-height:value;
_height:value;/*{两个值相同}*/
}
{
min-height:value;
height:auto !important;
height:value;/*{两个值相同}*/
}
九,高度塌陷的解决方法
(父元素未设置高度或者高度auto,子元素float)
-
给父元素添加:overflow:hidden;
优点:简单容易记
缺点:如果有溢出会被裁切 -
给浮动的元素下边添加一个定位
div{
clear:both;
height:0;
overflow:hidden;
}
优点:不会裁切
缺点:div的增加会导致结构复杂,不利于SEO(搜索引擎的优化)
- 万能清除法设置父元素
:after{
content:".";
height:0;
overflow:hidden;
display:block;
clear:both;
visibility:hidden;
}
优点:有利于SEO,溢出不会被裁切
缺点:复杂不易记
4.父元素设置高度
为什么overflow可以解决高度塌陷?
答:overflow会触发bfc,浮动元素也参与计算,所以可以解决高度塌陷
十,元素的宽高自适应窗口的宽高
Html,body{height:100%;}
元素本身{height:100%; width:100%;}