css小技巧 （持续更新）

这两天做项目 遇到的一些css问题记录一下

问题1 关于设置高度100%，然后又设置了padding或者margin ，这样高度就是超出了100%

以前的解决办法都是用calc(100% - padding或者margin 的数值),但是css3出了个新属性

box-sizing: border-box;

margin不在属性范围内

意思为 元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

问题2 父级设置了透明度，子级一块跟着透明的解决办法

把opacity替换成下面代码

background-color: rgba(250, 250, 250, 0.8);

问题3 flex布局的属性常用

flex-direction: row /*主轴方向从左到右*/ 
flex-direction: column /*主轴方向从上到下*/ 

flex-wrap : wrap /* wrap换行   nowrap 不换行*/

justify-content : flex-start /*flex-start贴在左边对齐    
							center居中对齐  
							space-around平均分  
							space-between  */

align-item : flex /*设置侧轴的对齐方式（单行）   center  */

align-content:flex-start /*设置侧轴的对齐方式(多行)
							center 
							space-around 
							space-between*/

属性选择符

div[arr]{}   // 选择具有arr属性的div  

div[arr='hi']{}   // 选择具有arr属性且属性值=hi的div  

div[arr~='hi']{}   // 选择具有arr属性且属性值包含单词hi的div  

div[arr*='hi']{}   // 选择具有arr属性且属性值包含hi字母的div  

sticky定位

position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置

使用条件：

1. 父元素不能overflow:hidden或者overflow:auto属性。
2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3. 父元素的高度不能低于sticky元素的高度
4. sticky元素仅在其父元素内生效