HTML和CSS中的小问题

一，a标签的特殊性

二，margin-top不能正常显示的解决方法

1. 给父元素添加border,但会撑大父元素的总体宽高
2. 给父元素添加padding
3. 给父元素添加float，会破坏正常文档流，margin:0不生效
4. 给父元素添加overflow:hidden（子元素被裁减）
5. 给元素本身写float

三，link与import的不同

link是html提供，可以引用css文件还可以引用其他文件
link与html一起加载
link没有版本要求
link支持控制dom

@import是由css提供，只能引用css文件
@import是在所有html加载之后再加载css文件
@import在IE5以上支持
@import不支持控制dom

四，文本溢出显示省略号的必要条件

1. 有一定的宽度width
2. 强制在一排显示 white-space:nowrap;
3. 溢出裁切overflow:hidden;
4. 显示省略号：text-overflow:ellipsis；

五，块状元素与内联元素的区别

1. 块状元素可以设置宽度和高度，内联元素的宽高是其内容的宽高
2. 块状元素自上而下独占一行显示，内联元素自左向右在一排显示，直到遇到边界才会换行
3. 块状元素和内联元素都遵循盒模型的设置，但是内联元素有些属性不能正常显示
4. 块状元素一般做内联元素的盒子使用

常用的块状元素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）

1. 给父元素添加：overflow:hidden;
   优点：简单容易记
   缺点：如果有溢出会被裁切

2. 给浮动的元素下边添加一个定位

div{
	clear:both;
	height:0;
	overflow:hidden;
}

优点：不会裁切
缺点：div的增加会导致结构复杂，不利于SEO(搜索引擎的优化)

3. 万能清除法设置父元素

: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%;}