HTML与CSS常见误区1

一.浮动与清除浮动

DIV是块状元素，会自占一行，如果想多个DIV放在同一行，使用float:left/right;进行左浮动或者右浮动

注意：1.想多个元素都靠左飘，每个盒子都设置float:left，如果一个设置左一个设置右，则会一个靠最左边，一个靠最右边

             2,.普通盒子则会被浮动的盒子挡住，如果想不被挡住则清除浮动clear:left/right/both;

二.外边距(margin)、内边距(padding)与边框(border)

1.padding是往外挤的，也就是说,一旦我们定义了盒子的宽高,写文字的地方是不会变的

2.设置了盒子的内边距、边框和背景，背景颜色默认平铺到border的边缘,只不过边框色会覆盖在背景色之上，想要设置背景色只覆盖内容区的话可设置background-clip:content-box;

3.一旦定义了宽高,实际写文字的地方就固定了,加上padding,border,margin,盒子的实际占地面积变大

4.box-sizing 设置或检索对象的盒模型组成模式。

content-box (内容盒)默认值w3c的盒子:盒子的尺寸,宽高是写内容的地方
border-box (边框盒):盒子的尺寸,宽高是包含边框在内的,那写内容的地方变小

后者适用于响应式布局，设置比例，加边框、内边距会向内扩，内容区会变小，这样便不会乱套

三.块状元素与行内元素的转换

行内元素无法设置宽高，所以在做导航标签时就会用到将内联转成块状，dispaly:block

块状转内联则为dispiay:inline

隐藏元素display: none

四.CSS规律：选中谁{控制什么属性:什么值}

如段落缩进

text-indent: 20px;

五.文字处理

font-style:italic;
font-weight:bold;
font-size:15px;
line-height:40xp;
font-family:'微软雅黑';
简写必须按顺序：font: italic bold 15px/40px '微软雅黑';

六.class选择器

1.通过id选中元素，id名唯一
#id名

2.类选中某个或某几个元素

.class名

3.标签选择器

只要是合法的标签都可以用标签选择器，比如P、div等

4.层级选择器
选中div下的 p 标签
div p {
background: green;
}

5.群组选择器
它其实算不是一种选择器,只是一种选择器的简化写法
#test1,.test2 {
width:300px;
height:200px;
}

选择器命中的越精准,越少,优先级越高

七.消除列表样式

给ul或者是ol设置list-style-type:none

有序列表：ul-li

无序列表：ol-li

八.页面居中

margin:0px auto;