CSS——常见的问题

hover 之后闪动问题：https://blog.csdn.net/qq_37542501/article/details/78618524
```
div1:hover div2, div2:hover{
    display:block;
}
```

css 构建三角形：https://www.cnblogs.com/blosaa/p/3823695.html

<div class="triangle_border_up">
    <span></span>
</div>

.triangle_border_up{
    0;
    height:0;
    border-0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}

padding
- 行内元素 span 、i 等左右 padding 可以设置并且有效，上下 padding 设置无效
margin
- 上下分布盒子会有外边距合并的现象，float 水平分布的盒子不会合并
- 行内元素有margin-left margin-right，但是没有 margin-top margin-bottom
- 盒子内套盒子，子盒子在没有明确设置 100%，对其设置 margin-left 或者 margin-right ，子盒子将会随着 margin 值变大而减小其宽度
flex 只能兼容到 ie11，ie10 就挂了：https://blog.csdn.net/m0_37142141/article/details/79709747

背景图位置：https://blog.csdn.net/Cloud_Lion/article/details/80563192

/*
	1. 背景图宽度与div宽度一致，设置background-size即可，此时y不能设置具体值，否则变形
	2. 背景图位置可以用background中位置表示
*/
.parent {
     500px;
    height: 300px;
    background: url("./images/logo.png") center center;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

上下左右居中：https://blog.csdn.net/freshlover/article/details/11579669

<style>
/*
	1. 兼容到ie8，ie7就挂了
*/
.parent {
     600px;
    height: 400px;
    background-color: red;
    position: relative
}

.son {
     100px;
    height: 100px;
    background-color: yellow;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
</style>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>

<style>
/*
	1. 兼容到ie9，ie8就挂了
*/
.parent {
     600px;
    height: 400px;
    background-color: red;
    text-align: center;
    border: 1px solid #000;
    position: relative;
}

.son {
     100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%)
}
</style>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>

<style>
/*
	1. 兼容性非常好，但是最后的偏移修正是需要具体数值，上面的translate直接百分比就行了
*/
.parent {
     600px;
    height: 400px;
    background-color: red;
    text-align: center;
    border: 1px solid #000;
    position: relative;
    padding-left: 50px;
    padding-bottom: 10px;
}

.son {
     100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
</style>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>

视口是浏览器内部可视区域大小，具体数值可通过 window.innerWidth/window.innerHeight，目前只兼容到ie9，ie8就挂了：https://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

多列布局

<style>
/*
	1. 这种写法至少兼容ie8，ie7就挂了
*/
.parent {
     200px;
    height: 50px;
    background-color: #ccc;
    line-height: 50px
}

.son {
    float: left;
     33.33%;
    text-align: center;
}
</style>
<body>
    <div class="parent">
        <div class="son">
            <span class="sonson">hello</span>
        </div>
        <div class="son">
            <span>world</span>
        </div>
        <div class="son">
            <span>hoho</span>
        </div>
    </div>
</body>

兼容写法选型
- 大前提是从分辨率考量，所以我们以视口兼容性为准来选择兼容技术
- flex 技术在布局上十分方便，但是只是兼容到 ie11
- 背景图技术上面提到的已经满足
- 居中技术最好才有 positon、translate 混合，基本上满足 ie9 兼容
- 多列分布：上面提到技术已经基本满足

基本布局

考虑到 flex 兼容问题，基本上 pass 掉
positon 兼容性特别强，可以兼容到 ie7
https://segmentfault.com/a/1190000004105774

<style>
html,
body,
.parent {
    height: 100%;
    overflow: hidden;
    background-color: #ccc;
}

.top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: red
}

.left {
    position: absolute;
    left: 0;
    top: 100px;
    bottom: 50px;
     200px;
    background-color: yellow;
}

.right {
    position: absolute;
    left: 200px;
    right: 0;
    top: 100px;
    bottom: 50px;
    background-color: pink;
}

.bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background-color: green;
}
</style>
<body>
    <div class="parent">
        <div class="top"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>

float
- 浮动元素，会造成父盒子塌陷
- 浮动元素，会遮盖未浮动元素
- 浮动元素，自身会变的更加像一个行内块元素，会被内部子元素撑开，例如文字设置行高，那么浮动元素就高将会与行高一致，宽将会与文字宽度一致
- 实际操作中，布局盒子设置浮动之后可以不用设置宽高，内部元素自然会将其撑开
  - 但是要设置内部元素垂直居中，往往又需要设置一个高，然后设置一个行高，使内部元素垂直居中
  - 还有要设置内部元素左右分布，所以还需要设置宽度，内部元素再此左右浮动，当然也可以让内部元素用 padding 或者 margin 挤出左右分布的样式
calc
- calc可以将长度进行计算分配，需要注意的是中间的减号左右需要两个空格
- flex布局可以平均分，但是flex布局只能兼容到ie11，ie10就挂了
```
 -moz-calc(100%/5 - 10px);
 -webkit-calc(100%/5 - 10px);
 calc(100%/5 - 10px);
```