1/11

居中问题

1.文字在一行上下居中

可通过设置行高line-height实现

2.文字在一行水平居中

text-align：center //定义在盒子中而非超链接a中

position:relative与absolute（浏览器不同可能导致错位）

在父元素的css中定义---->position:relative (底层)
子元素 ---->position：absolute （上面的一层）

position：fixed 相对于浏览器窗口的位置

overflow：hidden的作用

1.定义在父元素css中，使子元素定义margin后，父元素不随着子元素而动
2.定义在含有图片的框框中，使图片超出框框的部分被截掉

1/14

制作头像时

.tx{								//定义头像区域
    width: 173px;
    height: 173px;
    border: 1px ;
    background-color: white;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

.tx img{
	width:100%
	}								//使图片充满头像区域

弹性盒子：

.dahezi{
		width: 1200px;
    	height: auto;
    	display: flex;							    //弹性盒子
    	flex-wrap: wrap;							//自动换行
    	justify-content: space-between;    
}

.xiaohezi{
		width: 568px;
    	height: 292px;
    	margin-top: 48px;
    	background: url("../image/cardbg.png") no-repeat;
    	float: left;
  }

显示结果：

在这里插入图片描述

webstorm常用快捷键

查找 Ctrl+F
整理代码 Ctrl+Alt+L
检查元素并选择页面中的某部分 Ctrl+shift+C
选择备选项 Tab

1/16

代码修改中的问题

background：url( …) no-repeat center/top/left ;

margin：165px

1/18

透明背景：

backgrounde-color：rgba（）
设置背景色的时候，可以调节背景色的透明度，注意是背景哦，所以不会存在遮罩问题。

   #test .cover{
       height: 100px;
       /* background-color: red;   */
       /* opacity: 0.8;      */
       background-color: rgba(255,0,0,0.8) 
       }

因为background-color:ｒｇｂａ（）中的透明度是控制背景色的透明度，而opacity是控制当前元素的透明度。

而下面这种情形会存在遮罩问题！

  #test .cover{
    height: 100px;
    background-color: red;   
    opacity: 0.8;      
   /*  background-color: rgba(255,0,0,0.8)  */
  }

前端小知识点（二）