css样式重置以及定位

1.*{margin:0;padding:0;}
缺点：稍微影响性能
优点：不用考虑哪些标签有默认样式
ul{list-style:none}
a{text-decoration:none}
取消连接下划线
img{display:block}
问题现象：图片内容跟容器底部出现缝隙
内联元素的对齐方式是按照文本基线对齐的，而不是文字底线对齐的
2.写具体页面的时候或一个布局效果的时候
1.写结构
2.css重置样式
3.写具体样式
3.浮动
概念：脱离文档流，沿着父容器靠左或靠右进行排列
float：felt：左浮动
float：right：右浮动
float注意点
1.只会影响后面元素
2.内容默认提升半层
3.默认宽度根据内容决定
4.默认排列。主要给块元素添加，但是也可以给内元素添加
如何清清除浮动：
1.上下排列：clear 表示清除浮动的，left，right，both
2.嵌套排列：
父元素浮动：不推荐，父元素浮动会影响到后面的元素
overflow：hidden（BFC规范），如果子元素想溢出，那么会受到影响
display：line-block（BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版
4.css定位
position
static
relative
absolute
fixed
sticky
relative相对定位：
如果没有定位偏移量，对元素没有任何影响
不使用元素脱离文档
不影响其他元素
left，top，right，bottom是相对自身当前元素进行偏移的
absolute绝对定位：
使文档脱离文档流
可以使内联元素具备宽高，宽高由内容决定
如果有定位祖先元素相对定位发生偏移，没有定位元素相对于整个文档发生便宜
fixed固定定位：
是元素脱离文档流
内联元素支持宽高，使元素宽高根据内容进行决定
相对于整个浏览器窗口进行偏移，不授浏览器滚动条影响
sticky粘性定位
在指定位置，进行粘性操作
z-index定位层级
默认层级为零级
嵌套时候的层级问题
5.省略号
步骤：
width必须有一个固定的宽
white-space：nowrap不让内容折行
overflow：hidden：隐藏溢出内容
text-overflow：ellipsis添加省略号
6.css圆角
border-radius：px
可以分别设置各个角的圆角