css样式选择
同一级别
同一级别中后写的会覆盖先写的样式
不同级别
不同优先级，相同属性最后显示优先级高的属性
两种优先级排序
（1）!important > 行内样式 >id>(伪)类>元素标签> 通配符选择器 > 继承 > 浏览器默认属性
（2） css引入方式不同，优先级不同
总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。
内联：<span id="s" style="background:yellow">
内部：<style> #s{background:blue} </style>
外部：<link rel="stylesheet">
margin属性
当上下相邻的兄弟元素的外边距相遇时，它们的外边距会合并为一个较大的外边距。合并的结果是两个外边距中的较大值，而不是简单相加。（不管怎样都要取较大值）
灵活点：当没有兄弟元素就相对于父元素定位，有兄弟元素就像对于兄弟元素定位
position属性
（1）默认：static
（2）absolute （必须有父元素 必须与父元素的除static搭配使用(常用position:relative) )
常用top来规定在页面中的位置
（3）relative
常用margin来规定在页面中的位置
（4）fixed
页面无论怎么滑动，永远在当前页面上的固定位置
（5）sticky
例如联系人首字母，碰到就粘连到页面顶部
position:sticky;
top:0
display属性
（1）block 块元素，强制换行，可受width,height影响
（2）inlilne 行元素，不受width,height影响
结合：
（1）inline-block 行内块元素 ：整体是块，可受width,height影响，但可放在行内
（2）inline-flex 行内弹性容器
visibility属性
（1）visible :可见 （2）hidden:隐藏但占位置
float属性
缺点：会脱离文档流，乱跑
特点：对于inline元素，会形成文字环绕float的效果
可以隐形修改display属性
总结
CSS布局是Web前端开发不可或缺的重要元素，学会CSS的布局技巧可以优化代码的结构，提高网页的性能和效果。在使用CSS进行网页布局时，要充分考虑不同的设备尺寸和所实现的效果，以满足用户的需求。
