媒体查询类型（没有优先级） /* 只有在打印机或打印预览才会应用的样式 */ @media print { /* 这里写正常样式 */ } /* 只有在屏幕上才会应用的样式 */ @media screen { /* 这里写正常样式 */ } /* 一直应用的样式 */ @media all { /* 这里写正常样式 */ } 媒体查询特性（没有优…

元素设置为伸缩容器（开启flex布局）（父容器写样式） /* 父容器开启flex布局，只有直接子元素是伸缩项目（应该是受影响的意思） */ /* 子元素成为伸缩项目会变成块元素（不管以前是块，行内块，行内） */ div { /* 将该元素变成伸缩容器（开启flex布局） */ display: flex; display: inline-flex…

z-index和透明度 div { z-index: 999;/*此div显示在其他元素的上层*/ opacity: 0.5;/*背景透明度*/ } /*由于文字基线问题导致的元素上下不对齐解决办法使用vertical-align: top;*/ /*input和button需要对齐*/ /*button>background-repeat:背景重…

穷举法 <div class="other-nav"> <ul class="other-nav-list clearfix"> <li> <div class="picture"></div> <span>话费</span> </li> <li> <div class="picture"…

相对定位：相对于原来的位置进行指定的偏移，仍在标准文档流中，原来的位置会被保留 /* top,bottom,left,right:距离某方向偏移多少 比如top: -20px;距离顶部偏移-20px，就是向上移动20px */ div { position: relative;/*相对定位*/ top: -20px;/*向上偏移20px*/ lef…

右浮动但是另起一行 /* clear:left:左侧不允许浮动 clear:right:右侧不允许浮动 clear:both:两侧不允许浮动 */ div { float: left; clear: both; } 父边框塌陷解决办法 1、增加父元素高度（不推荐） div { border: 1px #000 solid; height: 800p…

resize resize调整元素大小，必须跟overflow配合使用 background-origin div { /* border-box:从border区域开始显示背景图片（从边框开始） */ background-origin: border-box; /* content-box:从content区域开始显示背景图片（padding内…