HTML+CSS应用中总结

115 阅读1分钟

1、清除元素默认的内外边距

/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}

2、清除列表样式

/*清除列表样式*/
li {
	list-style: none;
}

3、行内元素没有大小,需要转化为块级元素

a {
	display: block;
}

4、去掉button默认自带边框

/*去掉button默认自带边框*/
button {
	border: none;
}

5、行内块中间的空白缝隙(图片、表单、单元格)

用浮动解决。

6、行高=高度只能让单行文本垂直居中

height: 42px;
line-height: 42px;

7、外边距塌陷问题:浮动可以解决;

8、有宽度的盒子,用padding会撑开盒子

9、以font-,line-,text-,color-开头的可以继承父级元素

10、行内元素只有左右内外边距

11、父盒子的宽度是可以大于子盒子(版心)的

12、位置相对盒子不发生改变的固定定位

在这里插入图片描述

13、改变display属性的几种方法:

块级元素不给width默认通栏显示
1、利用display: inline-block转化为行内块元素(行内块元素不给width,默认的宽度就是内容的宽度)
2、float: left浮动也能转化
3、绝对定位(固定定位)也能转化

14、定位的盒子如果需要通栏:

宽度给100%

15、浮动元素、绝对定位(固定定位)元素都不会触发垂直外边距合并的问题

16、隐藏元素:

display: none ——隐藏元素不保留位置
visibility: visible ——隐藏元素并保留位置
overflow: hidden——隐藏超出盒子的部分