前端布局CSS样式的一些吐血总结耐用的设置知识

A 盒子模型的一些处理

如果你想要调整标签与标签之间的距离 你就可以调整margin,你想填充内部大小可以使用padding.

浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除,所以一般会有万精油去边距的写法:

*{
margin: 0;
padding: 0;
}

A-1 border边框

border:1px solid #fff;  (border/margin/padding  都有四边属性,默认顺序是上右下左)

A-2 overflow盒子内容溢出处理

溢出,一般是指内容大小,如宽度超出盒子本身的大小产生溢出

overflow:hidden;   //超出隐藏;
overflow:auto;     //超出部分通过下拉滚动条显示,不超出则无滚动条;
overflow:scroll;   //无论是否超出,滚动条会一直显示
// 同时还有overflow-x/y 可以分别对水平垂直分别做处理

B Position位置

用于指定当前元素和父元素之间的位置关系,有top/right/bottom/left四个属性,这四个属性也是padding/margin属性四个方向的属性.

例如,我们可以通过top属性表示它距离父元素边界的距离,其他三个属性同理;

但是,但是我们只设置top属性是不会直接生效的,我们需要和position配合使用.即元素的位置属性除了受四个方向的影响外,还受position影响,默认是static,在static下top/right/bottom/left等下都不会生效(这个上面吧不生效的原因)

position:static;(默认),此时top/right/bottom/left不生效

position:relative;相对位置,相对自己原来的位置top/bottom/right/left后位置的变化情况;但是通过relative挪出的空间不会别其他元素填充(占着茅坑不拉屎)

position:absolute;绝对位置.相对于第一个除static外的父元素的上下左右的位置偏移情况(注意一定是一层层往外找到第一个非static的父元素后,相对它的位置偏移)

position:fix;固定位置,一般在网站看到不同的元素,如常见的一键到顶部的按钮;

Tips:所以一般为了防止设置有误,我们会给当前子元素的父元素设置position:relative;然后再给子元素设置absolute,这样他就可以直接相对于它的父级节点的位置操作了.

C 内容居中

平常工作使用的非常多,已div为例:

C1 div内部的文字居中:     text-align:center;

C2 div本身水平居中:  (必须同时指定当前容器的宽度!!!!!)

margin:0 auto;  (其实就是margin-right:auto和margin-left:auto;左右边距自动,还要同时制定下当前容器的宽度,如width:200px)

C3 div本身水平居中:指定当前容器的高度,然后line-height等于高度

height:20px;

line-height:20px;

D 浮动 float

左浮动:   float:left; width:60px;

Tips:对于块级元素,如果不指定width则html会尝试自动占满整行这样可能右边就放不下内容了,所以块级元素一般都要记得设置宽度,有浮动同理;

右浮动:  float:right;width:60px;

Tips:上述两个实现了左右浮动,如果下面我们下面行没有浮动了,即只浮动当前行,那效果非常好,但是如果后面依次跟了几个浮动,这个时候可能会出现下方的浮动叠加到上面的内容上,造成错版,解决方法就是,让下一个元素重头开始浮动,即需要设置清除浮动的属性;

清除浮动: clear:both;  (both,左右都清除)

清除浮动万精油

.clearfix:after {
    content: ''; /* 内容为空 */
    display: block; /* 将伪元素变成块级元素 */
    clear:both; /* 阻止该块级伪元素左右两边存在浮动框 */
}

E display 规定元素应该生成的框的类型

display 属性规定元素应该生成的框的类型。

display:inline;行级元素

display:block; 块级元素

display:inline-block;本身依旧是块级元素,但是已行级元素显示

display:table;随内容伸缩扩张

display:none;隐藏;

F z-index元素的堆叠顺序

我们在使用浮动,定位等属性,时,经常可能出现元素堆叠重复的情况,解决方法就是z-index;

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute/relative/fix;）

G flex弹性布局

传统的布局方式都是基于盒模型的 ,利用display、position、float来布局实现了一定效果也具有一定局限性;

响应式布局的流行，CSS3引入了更加灵活的弹性布局模型flex布局.

使用弹性布局可以有效的分配一个容器的空间,即使我们的容器元素尺寸改变,它内部的元素也可以调整它的尺寸来适应空间 .

G1 让一个元素变成弹性盒,利益display:flex即可

display: flex;块级元素

display: inline-flex;行级元素

Tips:设置了flex布局后，子元素的float、clear和vertical-align属性就会失效

设置了flex布局的元素，称为“flex容器”，简称“容器” 
它的子元素，称为“flex项目”，简称“项目”

参考文献:

响应式布局：CSS3弹性盒flex布局模型

前端基础（五）：CSS基础布局