前端样式知识整理

块级元素居中

块级元素：就是占据页面整行的，如 div/ul/li/p/section/header/footer 等

选择器 {
    width: 1200px; // 一定要设置宽度
    margin: 0 auto; // 居中
    text-align: center; // 文字居中
}

内联元素居中

内联元素：不占据页面整行，可以拼接在一起，如 span/a/em/i/b 等

选择器 {
    text-align: center; // 居中
}

float、clearfix 浮动常见 bug

最常见的 bug，浮动问题：float: left、float: right

造成严重的问题：
当 “子级” 元素使用 float 时，无法撑开 “父级” 元素高度，后续的布局越来越乱。

解决方式：
当 “子级” 元素使用 float 时，父级一定要清除浮动（clearfix）。

常见三种：

1. 添加新的元素 、应用 clear：both；不好之外：额外增加了一个无意义的标签，有点占用资源。

2. 父级上增加属性 overflow：hidden；不好之外就在于超出的元素会被隐藏，看不见

3. 定义一个伪类的 css 样式，把 clearfix 添加到父元素。

注：当子级使用了 float 时，父级务必清浮动

.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{ display: inline-block; }
* html .clearfix{ height: 1%; }
.clearfix { display: block; }

图片无法完全撑开时

修改图片的 display 值为 block

img{
    display: block;
}

内联元素使用 float 浮动后自动转换为块级元素

span{
    float: left; //span 自动转换为块级元素
}

奇异盒模型

div 长宽固定，忽略 border 和 padding 导致的 div 变大

Padding 的值会累加到元素本身

如：元素本身的值 为 100px，设置 padding-left: 50px；
那么：元素本身的值就变为了 150px

-webkit-box-sizing: border-box;

sass 封装方法的定义与使用

定义

@mixin webkit($type,$value){
    -webkit-#{$type}: $value;
    -moz-#{$type}: $value;
    -ms-#{$type}: $value;
    -o-#{$type}: $value;
    #{$type}: $value;
}

使用

@include webkit(box-sizing,border-box)

Position 定位、脱离文档

绝对定位：position: absolute;
相对定位：position: relative;

记住一个重要的概念：绝对定位元素，居于“相对定位” 或 “绝对定位”的元素进行定位
简单的理解就是：绝对定位元素，需要一个参考对象（父级元素），
参考对象的属性是 “相对定位” 或 “绝对定位”

通过设置 top、right 、bottom 、left 进行定位，常使用的值为 px、%

绝对定位元素水平、垂直居中

设置 50% 后需要拉回元素宽高的一半

选择器 {
    position:absolute;
    top:50%;
    left:50%;
    width:50px;
    width:50px;
    margin-top:-25px;
    margin-left:-25px;
}