前端小结2-CSS和HTML

目前将CSS/HTML教程学完了一遍，现在边学习JS，边对之前学习的CSS/HTML进行一些总结。此篇文章主要是小米网站首页相关的。

1、用纯CSS方法生成向上的白色小三角形

/* 用before或者after都可以 */
.app::after{
    /* before和after伪元素选择器，必须结合content属性使用 */
    content: '';
    /* 
    设置成块元素才能设置宽、高
    其实个人觉得不设置成块元素，不设置宽、高，也可生成向上的白色小三角形，即：
    display: block; 
    width: 0;
    height: 0;
    这三行代码不是必须的
    */
    display: block; 
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color: #fff;
}

2、设置了line-height的块元素，可以不设置height，因为当该块元素中有内容时，line-height会撑起该块元素height

3、text-align：center 设置文本水平对齐，只对行内元素生效，对行内块元素没有作用，其中img元素就属于行内块元素。

4、商业网站的logo：一般来说商业网站的logo的都比较重要，放在h1中，一般会包含文字对此对此网站进行描述，如小米官网的logo说明文字就是“小米官网”，方便搜索引擎检索，但是这个文字说明在网页中是不展示出来的，因此要对此文字说明进行隐藏，对应代码如下：

text-indent: -9999px;

5、表单form是块元素，其中input、button等都属于行内块元素，如果这两个元素之间有换行，则这两个元素之间会有空隙，可以给input和button都设置浮动，来清除二者之间的空隙。

6、input、button等元素都有默认的自带样式，如外边距、内边距、、轮廓线等等，为这些元素设置样式的时候，要注意清除其默认样式。

7、像在input框中输入文字，input边框颜色要改变的这种情况，属于获取焦点的情况，具体代码如下：

/* 点进去，这种情况属于获取焦点的情况 */
.search-ipt:focus,
.search-ipt:focus+.search-btn{
    border-color:#ff6700;
}

8、对input元素设置的font-size设置的是input框中输入文字的大小

9、当小米网站页面放大得比较大的时候，小米网站右侧边栏位置设置问题，该问题具体如下图所示：

使图中右侧黄色导航条始终在视口中 垂直方向上：上下居中，水平方向上：如图中所示。位置不随网页放大缩小而改变。
具体代码如下：

.back-top{
    width: 26px;
    height: 206px;
    background-color: orange;
    position: fixed;
    top: 0;
    bottom: 0;
    /* 
    关键在于将right设置为视口宽度的50%，则此时元素右边框到视口右边界的距离是视口宽度的50%
    right值可以不是50%，只要是百分比即可，只是50%比较好计算
     */
    right: 50%;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: -639px;
}
/* 
left(auto)+margin-left(0)+width+margin-right(0)+right(auto)=包含块的宽度，其中left和margin-left影响的是自身的定位，right和margin-right影响的是其它元素的定位
*/

10、注意点：如果多个元素设置的样式一样，则注意使用选择器分组设置样式，这样会使得代码更简洁。

11、一个网站往往会有多个网页，这个时候设置网页样式和进行网页布局时，也要兼顾相同内容在其他网页中的样式。

12、隐藏一个元素的几种方式：

12.1 元素不占据页面位置

display:none;

12.2 元素占据页面位置

visibility:hidden;

12.3 元素占据页面位置

/*opacity设置元素不透明级别，0表示完全透明，1表示完全不透明*/
opacity:0;