hf html与css读书笔记整理2

1.class只能是字母开头，id可以是数字开头

2.样式用link引入的时候顺序也非常的重要，下面的样式可能会覆盖上面的样式，最下面的优先级最高

3.样式表

利用media属性

4.如果名称中包含空格我们需要加上“”

5.auto允许填充所有可用空间，会自动考虑内边距，边框和外边距

6.text-align如何工作

7.padding，margin：上 右 下 左
margin ：（上下） （左右）
background：任意顺序

8.链接颜色以及点击改变

a:link{ color :green; }
a:visited{ color :red ;}
a:hover{ color :blue ;}

a{ color :red ;}这会导致点不点都是红色

9.伪类
a:link{ color :green; }a:visited{ color :red ;}a:hover{ color :blue ;}这三个就是伪类，我们把鼠标放上面的时候我们浏览器会将这个链接丢到hover伪类中，拿开的话就会给他从里面拽出来。浏览器会在后台向这些类增加和删除元素

10.叠层性本质

1.相同标签就近原则

2.权重id选择器>class选择器>标签选择器

3.如果想要实现某种效果就提高优先级！！！！！！！

11.浮动中内联元素的上下外边距和左右外边距

12.如果一个元素被嵌套在另一个元素中，他们都有外边距怎么办，会折叠吗
两个垂直外面距在一起会折叠，如果元素外面有一个边框！！！！！那么就不会折叠，将边框去掉后就会折叠了。

13.内联元素和浮动定位的问题

内联元素定位的时候会考虑元素的边界，因此会围绕着浮动元素

14.浮动的使用场景

1.浮动一般是套在一个盒子里面的，浮动位置不会超过padding，浮动的距离都是被围在父盒子里面里面

2.给行级元素增加宽度不会显示

但是转化为浮动会进行显示

3.我们使用浮动之后，我们如果想要盒子里面的浮动根据盒子大小来自动改变怎么办？？

方法1

设置一个类，用这个类清除浮动

清除浮动后我们就不需要设置盒子的大小了，

方法2：

方法3：触发bfc

使用after也可以清除浮动

浮动布局问题

1.两个都浮动的话，如果空间大小允许我们浮动的元素会站在同一排

2.浮动不会影响上面元素的排列问题。

冻结布局与凝胶布局

在所有元的的最外面设置一个大小就是冻结布局！！，并不会随着浏览器的改变而改变，当浏览器拉升的时候这个冻结布局也不会改变。

凝胶布局就是让我们的布局根据浏览器的拉开从而一直位于最中间，凝胶布局如何设置。上面我们不是添加了一个整体框架吗，我们只需要在那个框架里面加上

magrin-left:auot
margin-right:auto