关于html-css设置的一些问题

css样式的权重等级

下列是一份优先级逐级增加的选择器列表：

1. 通用选择器
2. 元素（类型）选择器
3. 类选择器
4. 属性选择器
5. 伪类
6. ID 选择器
7. 内联样式
8. !important

CSS 优先级规则：

• 选择器都有一个权值，权值越大越优先。
• 当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
• 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
• 继承的CSS 样式不如后来指定的CSS 样式
• 在同一组属性设置中标有“!important”规则的优先级最大。

解决margin外边框塌陷问题

1.超出隐藏
overflow:hidden;
2.写个边框
border: 1px white solid;
3.在父级类属性那里多写一个clearfix，然后在css里写
.clearfix:before{
/在子级的开头位置加一个盒子，内容不要为空/
content:‘hhh’
}

解决padding内间距撑大盒子的问题

当你正常写padding就会撑大实际空间,则盒子被撑大
1.自己修改盒子大小使得一致,需要计算
2.加一个属性则会自动计算启用内减模式,保证盒子占位大小不变:
box-sizing: border-box;

a标签的css设置

/*以下顺序是点击之前，之后，鼠标划过，划过且点击不动*/
        a:link{
            
        }
        a:visited{
            
        }
        a:hover{
            
        }
        a:active{
            
        }

ol ul的css设置

需要去掉li前面的点或者1，2，3，在css的代码为：

	<style type="text/css">
		ul,ol{
			/*清楚列表的样式，即点和数字*/
			list-style:none
		}
	</style>

创建一个基础设置css文件

将所有标签的属性先置为0

/*也可以就写一个*  */
body,h1,h2,h3,h4,h5,div,span,ul,li,ol,dl,dd,img,a{
            margin: 0;
            padding: 0;
            border: 0;
        }
a:hover{color: red}

块元素、内联元素、内联块元素

块元素：div、h1-h6、ol、p、ul
1、支持全部的样式
2、如果没有设置宽度，默认父级宽度
3、独占一行，设置宽高也是一行，总是在新行上开始

内联元素：span、a、em、b、strong等
1、支持部分样式span
2、高度由内容，字体大小决定
3、可以一行共存多个
4、换行之后，标签直接有间隙
5、使间隙不存在一是直接写在一行，二是父级设置font-size=0,
行内元素的font-size自己设置

内联块元素：
特点：
1、支持所有样式
2、宽高如果不设置，由内容决定
3、元素之间可以一行共存
4、如果代码换行，盒子之间有间隙

浮动float

能让块级标签一行共存并且没有间隙

浮动的特点：
1、浮动之后的元素或者说标签，浏览器默认不存在
2、浮动之后的盒子具有行内块标签的特点，一行共存，宽高生效

解决浮动被覆盖问题：

1、父级div设定高度，则不会被覆盖
2、父级写溢出检查overflow：hidden;
3、父级身上添加额外的伪类class加 clearfix(名字自取)
这种写法比添加标签好。
.clearfix:after{
content: ‘’;
display: block;
visibility: hidden;
clear: both;
}
4、添加兄弟标签class=clear,里面不需要写，只是清除浮动影响
.clear{
clear:both;
}