关于学习html和css的一些总结

1.定位

position定位中top 和 left的优先级最高（在设置了元素的width，height之后）

html中的定位position有属性：

                 固定定位fixed:它的参照物是windows 即窗口大小（windows和body的区别就是body是当前窗口能看到的部分和当前窗口没有展示完全的滚动的部分） ，使用这个属性时即使滚动内容，使用fixed的内容也并不会随之滚动。

                 相对定位relative：参照物是没有定位之前的自己 ，不会脱离文档流，margin还有效，内部有浮动，但不用清浮动。

                  绝对定位absolute：参照物是已定位的父级，在向上找父级的过程中若没有已定位的父级，那它的参照物就是body，而且它脱离了文档流 margin是不起作用的。这里要说一下，relative和absolute通常是配合使用的。

2.内联元素

我们常使用的内联元素有img 、a、br 他们的特点：

1. 既有块级元素的属性又有行级元素的属性
2. 块级元素的属性是支持设置宽、高 ；行级元素的属性是不再独占一行。
3. 在使用display:inline-block时，内联元素之间的换行空隙可设置父元素的font-size=0来消除。但设置了这个属性之后，还得单独对 里面的子元素设置font-size 否则显示不出来字体。
4. 对于img标签来说，可设置它的基线对齐:vertical-align:top来消除空隙。

 3.浮动

1. 浮动与定位很像 都是脱离文档流，但是一个是定位流，一个是浮动流。在使用时不能同时使用。
2. 浮动float有以下几个属性：right、left。
3. 清除浮动分两种：一种是清除兄弟元素之间的浮动：clear:both 即可。另一种是清除父子之间的浮动通常使用伪元素法：.

4. .clear::after{
         content:'';
         display:block;
         clear:both;
         width:0;
         height:0;
         visibility:hidden;
   }

5. 还可以手动给父元素设置宽高。
6. 与定位一样因为脱离了文档流，margin就不再起作用了。但是清完浮动之后还是起作用的。
7. overflow:hidden代表当子元素溢出父元素时，就裁剪隐藏掉溢出的部分，但他为什么能解决浮动问题，因为这个属性出现时就出发了BFC，BFC能识别到这个父元素是应该包括子元素，所以就重构了父元素的高。

4.选择器样式的优先级

优先级从低到高排：

1. 默认样式 
2. *（代表全部样式）1
3. element(元素样式)  10
4. class、伪类选择器、属性选择器  100
5. #(id选择器)  1000
6. ! important（优先级最高）

当有后代样式时 如：class1 class2 class3{}它的优先级为他们单个之和：100+100+100=300，所以此时还是比#要小，其他的依次类推。

5.页面布局方式

    百分比布局：

1.   流式页面通常使用这种布局方式。它通过父元素的大小来确定本元素的尺寸，也就是看本元  素占据父元素的百分比。其中margin、padding的值是根据父元素的width来计算百分比，本元素的height还是根据父元素的height。
2.   其中响应式布局需要css属性 @media 需要监控的设备 and (条件){ },响应式布局和流式布局通常搭配使用。

    rem布局：

1. rem布局通常用在移动设备中来适应不同的设备尺寸。
2. 主要用法是

   html{
      font-size:50px;
   }

   如上图所示：如果屏幕 尺寸是750px（显示的可能是375px），找一个能整除750的数，将font-size的值设为整除的结果，这里我设为50px，也就是把750分成了15份，一份是50。将来我们在调整尺寸时直接除以原来尺寸的份数15。在移动端时，需要将得到的结果乘以2，例如：750px调整为32px的 需要将320/15=21.33px，这里需要将21.33*2=42.67px，此时的html{font-size:42.67px},这个尺寸是正确的。

3. 在监控屏幕尺寸大小变化时，是有大小变化顺序的，要么从小到大，要么从大到小，否侧有可能出不来效果。

 弹性布局：

1. 这种布局方式可以省去了浮动与清浮动的步骤，直接设置父元素就可以达到对子元素布局的效果。
2. 父元素只管子元素，这里的子元素指的是亲子元素，孙子元素以及后代都不管。父元素在设置了flex之后，会让子元素的float、clear、vertical-align失效；其中align-content:是针对有多条主轴的情况设置的属性；交叉轴随着主轴方向的变化而变化；当我们设置了元素的宽高时，basis的 权重最高，设置的宽高也失效了。若要单独对某一个子元素设置，可使用align-self：单独设置,它可抵消align-items的属性。