-
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);
-