第一周项目练习笔记

1.项目实战笔记

• 标签内如果文字不垂直居中，与行高有关系，行高与高度值相等的话，会使内容垂直居中； 如果一个标签整体不垂直居中，则通过上下margin值来调节；
• 通过行高与高度的变化，调节内容在垂直方向的位置，两者相等，则垂直居中，不等，则上下移动；
• a标签必须重新设置颜色；
• 父容器的高度是不会继承给后代，而行高会继承，所以在父容器中若高度与行高不相同，那只有行高会继承给子元素，这样子元素就默认高度与行高值相同，不会继承父元素的高度；所以必须重新设置高度；
• 在页面开发中logo一般放在h1标签中，用a链接添加图片，即达到logo可点击效果；

• 页面开发时，当前选中状态用类选择器选中，用交集选择器设置；
• 图片添加用img添加，则图片不会居中显示，会按原尺寸大小填充；用background填充背景图片；
• 透明度
  • rgba（255,255,255,0.4）；
  • opacity处理，但是兼容性问题；
    • opacity: 0.4;
    • filter:alpha(opacity=40);//兼容IE6,7浏览器；
• 居中方法
  • 设置宽度，然后margin:0 auto;
  • 设置绝对定位和宽度，然后left：50%，margin-left:-宽度/2
• line-height会实现继承
• 编写页面时，遵循由外向内，先写外部，再逐步向内部写；
• 容器内部设置padding时，宽度与高度都应该减去相应的数值；
• 项目开发中除了用无序列表（ul-li）,也可用有序列表（ol-li）；
• background-color在没有高度的时候，不能设置；
• 当设置行高为0时，内容文字会在整个区域的顶部，通过调节行高值来使内容文字在区域的右上角显示（也可以用sup标签）；

2.重置样式代码

/*重置样式start*/
/*去除所有元素的margin及padding*/
*{
    margin: 0;
    padding: 0;
}
/*去除a标签中的默认下划线及默认颜色*/
a{
    text-decoration: none;
    color: #444866;
}
/*去除li元素前的小圆点及数字序号*/
li{
    list-style: none;
}
/*去除图片的默认边框*/
img{
    border: 0;
}
/*去除文本框的聚焦边影*/
input{
    outline: none;
}
/*重置样式end*/

3.清除浮动的伪类设置

/*设置清除浮动的clear伪类元素*/
.clearfix::after{
display: block;
height: 0;
content:"";
clear: both;
}

4.遮罩层的设置

• 第一种方法代码：

这是一个遮罩层

• 第二种方法：固定定位+display:flex+margin:auto(display:flex必须配合margin:auto;才能实现上下左右同时居中)

 



       这是一个用固定定位实现的水平垂直居中
   

• 创建一个html模板
  • file-setting-Editor-Code style-live templates-点击"+"-选择live templates-填写内容及简写码-点击define-选择该模板的应用场景：比如html-点击apply-点击OK;