备注:margin:0 auto:做网页常用的居中方式(会解决元素的居中/前提是给这个元素设计宽度)
一、CSS层叠样式表
1.继承性
2.层叠性:选择器的一种选择能力,谁的权重大就选谁。
A、选不中,走继承性(font-color-text)继承性的权重为0
a、有多少父级都设置了这样的样式,走就近原则。
B、选中
a、权重的问题,权重大,就选谁的样式。class的权重为10 ,ID为100,普通标签为1,所以在同一标签多种起名属性的样式中,选权重最大的标签样式。
b、权重相同,谁在后选谁的样式。比如:在同种标签属性的多种样式中,谁离所想改变的内容最近就选谁。
c、纯标签与类无可比性、纯类与ID也无可比性。
二、标准文档流
1.浏览器的排版是根据元素的特征(块和行级)以上往下,从左往右排版。
2.浮动(float:left、right)
A、效果:元素都加浮动,后面的元素紧跟前面的元素并排排列。只要加了float,这个元素就会脱离标准文档流。
备注:a、第一个加了float,脱离标准文档流,对于浏览器来说第二个元素就变成了标准文档流中的第一个,于是就会把他们排在第一位,而第一个依然存在,所以会叠加。
b、 行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,能并排排列,dispaly就没意义了。
B、浮动的元素会紧紧的贴靠在一起。
C、浮动的元素会文字环绕。
拓展:使元素脱离标准流的方法。
1.浮动:float
2.绝对定位:position:absolute;
3.固定定位:position:fixed;
浮动带来的坏处
1.给元素加了浮动,撑不起父级的高度。
清除浮动
1.给浮动父级元素添加高度
2.给父级元素添加overflow:hidden;
3.给最后的浮动元素后面添加一个空的div添加样式为<div style="clear:both;"></div>
4.常用的方法(伪类选择器)
给浮动元素的父级添加一个class=“clearfix”,这个类的样式属性有:
clearfix:after{ <ul class="clearfix">
content:"'; li*7
display:block;
clear:both;
height:0;
visibility:hidden;
伪类选择器:只要选择器后面带;都可以叫伪类选择器。
a:link{}----正常的属性
a:visited{}-----访问过后的样式
a:hover{}---鼠标悬浮
a:active{}-----激活鼠标点击的那一刻
p:after{}-----属性值
a:before{}----属性值
伪元素与伪类选择器的区别
伪元素有两个冒号如:p::after{}
伪类选择器有一个冒号:p:hover{}
---恢复内容结束---