html与css常用技巧

对于静态页面我们首先要分析整体页面的布局，需要用怎么样的布局方式，从上而下进行页面的分析和样式的编写，对于公共的页面可以写在一个组件里，需要时直接调用。

html简述

名称	特点	是否可以改变宽高等	常用元素
块级元素	独占一行	可以	div，p，h1-h6，ul，ol，li
行内块元素	一行可以显示多个	可以	input，img，textarea，select，option
行内元素	一行可以显示多个	不可以，由本身内容大小决定	span，a，strong，em，del，ins
行内元素的padding-top，padding-bottom，margin-top，margin-bottom设置无效，其他正常。
padding上下有显示效果，但设置无效，margin上下无显示效果，设置也无效。

css简述

1.设置居中

1.1水平居中

1.1.1 块级元素的水平居中，需设置块级元素的宽度，来实现整体的水平居中

width:100px;
margin:0 auto

1.1.2 行内元素，行内块元素的水平居中，给其父元素添加

text-align：center

1.2.垂直居中

1.2.1 line-height与height值相同实现垂直居中

height:100px;
line-height:100px

1.2.2 通过vertical-align:middle配合设为行内块实现垂直居中

display:inline-block;
vertical-align:middle

图片和文字在垂直方向上不对齐，需给图片和文字都加上vertical-align:middle，因为图片基线在图片底部，而文字基线却在文字中点偏下的位置。

2.浮动（float）

一个大盒子（ul）里装了多个小盒子（li）的常用写法

ul {
  width:500px;
  /*若父元素没有高度，要清除浮动*/
  overflow：hidden;
}
li {
    float: left;
    margin-right: 20px;
    /*动态计算每个盒子的宽度*/
    width: calc((100% - 100px) / 5)
}
/*同一级所有的li*/
li:last-child {
    margin-right: 0;
}
/*或者使用:not选择器*/
li:not(:last-child){
	margin-right: 20px;
}

但通常有很多的小盒子，假如一行放5个，则需要设置

.li:nth-child(5n) {
    margin-right: 0;
}

还有更简单的方法，使用gap属性

gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap,column-gap的简写形式。

li{
	gap: 20px;
}

3.定位（position）

3.1固定定位

弹框弹起时遮罩层样式，千万不要忘记写left:0，否则会出现左边有块是白色

position: fixed;
top: 0;
bottom:0;
left: 0;
right:0;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;

顶部的元素固定

position: fixed;
left:0;
top: 0;
background: #fff;
height: 88px;
width: 100%;
z-index: 999;

下面的div的padding-top为上面固定定位元素的高度

3.2绝对定位与相对定位

相对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素进行定位，若所有父元素都没有定位，则依据body根元素(浏览器窗口)进行定位。
比较常用的是子绝父相
子：position: absolute
父：position: relative
结合margin：auto实现垂直水平居中

<div class="box">
    <div class="ele"></div>
</div>

.box{
    width: 200px;
    height: 200px;
    background: #ccc;
    border-radius: 100px;
    position: relative;
}
.ele{
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: red;
}

结合动画使用（animation）

li {
    position: relative;
    .rotate {
      position: absolute;
   }
   &:hover .turntable {
       animation: spin 2s linear 2;
   }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

transform多属性连写顺序为1.translate 2.rotate 3.scale 4.skew
1、transform 多个属性分开写的话，后面的属性会覆盖前面的，一定要合并起来写。
2、会出问题，因为旋转会将坐标系旋转，所以先移动再旋转。

4.flex布局