分类 css 下的文章

button是一个行内块级元素
display:inline-block;

所以处理方式很简单，可以用以下两种方式：
方式一：

 <div style="text-align:center">
   <button>按钮居中</button>                     
 </div>

方式二：

<div>   
   <button  style="display:block;margin:0 auto">按钮居中</button>                      
</div>

原生button按钮css去掉默认样式

button{
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    border-radius: 0;
    background-color: transparent;
    line-height: normal;
}
button::after {
   border: none;
}

CSS代码：
position: fixed;bottom: 0;z-index: 100

1、position: fixed 相对定位的元素，相关于浏览器窗口进行定位。元素(例如DIV)的位子经由 "left", "top", "right" 以及 "bottom" 属性发展规定。
2、bottom: 0 ——设置对象距离底边为0，定位在浏览器底部。
3、z-index: 100——浮动值为100，如果网页另有绝对定位有浮动为90，那么100将浮动最基层。

实例CSS代码：

.box_btn{position: fixed;bottom: 0;left:0;z-index:100;width:100%;height:80px}

.box_btn a{display:block;border-radius:3px;height:60px; width:90%;margin:0 auto;line-height:60px;font-size:18px;color: #fff;background:#ff425a;text-align: center;}

.container { position: relative; } / 设置相对定位 /
.footer { position: absolute; bottom: 0; width: 100%; text-align: center; padding: 1px; } / 设置绝对定位 /

<div class="topRight">
         <a class="layui-btn" href="javascript:;" style="float:right;">右上角</a>
    </div>
    <div class="topLeft">
         <a class="layui-btn" href="javascript:;" style="float:right;">左上角</a>
    </div>
    <div class="bottomRight">
         <a class="layui-btn" href="javascript:;" style="float:right;">右下角</a>
    </div>
    <div class="bottomLeft">
         <a class="layui-btn" href="javascript:;" style="float:right;">左下角</a>
    </div>
    <div class="center">
         <a class="layui-btn" href="javascript:;" style="float:right;">当中央</a>
    </div>

</div>

<style type="text/css">
    /*DIV样式*/
    div{
    overflow:hidden;
    z-index:9999;
        width:100%;
        height:50px;
        border:0px;
        padding:5px 5px 5px 50px;
        position:fixed;
    }
    /*右上角*/
    .topRight{
        top:0;
        right:0;
    }
    /*左上角*/
    .topLeft{
        top:0;
        left:0;
    }
    /*右下角*/
    .bottomRight{
        bottom:0px;
        right:0px;
    }
    /*左下角*/
    .bottomLeft{
        bottom:0px;
        right:0px;
    }
    /*屏幕中间，实际应用中留出DIV的大小来*/
    .center{
        right:50%;
        top: 50%;
    }
</style>

*{
    padding: 0px;
    margin: 0px;
}
.test{
    border: 1px solid red;
    width: 600px;
}
<div class="test">
    <img src="test.jpg" />
</div>

img与div之间存在着一个间隙，这个间隙是怎么产生的？应该怎么解决？下面我们一点点的探寻这个问题背后的一些原理：
请输入图片描述

baseline只是在内联元素中才有的概念，在块元素中并没有这种概念，也就是说只有在ifc下才会有这一概念，并且内联元素的vertical-align的默认值就为baseline，也就是根据基线对齐。
对应着baseline还有两条标准线，分别为bottom和top，下面这张图说明了三条线所处的位置：
请输入图片描述
img是一内联元素，其根据baseline对齐，那条间隙就是baseline到bottom的距离，既然现在问题搞清楚了，下面就来解决它：

解决问题：
解决这个问题有4种方法（欢迎大家补充，我只想到这4种）：
.line-height
给div.test添加样式line-height: 0px;就可以解决这个问题，这个原理很简单，因为line-height指的是bottom到top的距离，将其设置为0也就是代表着baseline与bottom之间的距离为0，自然那条间隙就消失啦；同理我们可以得出的就是指定font-size: 0px;也是可以解决，因为line-height在不指定时值默认为font-size * 一个系数(1.2 or other)，但是这种情况下不能有文字出现。
.img变成块元素
文章前部分讲到了baseline只是对于内联元素而言，自己的给img添加样式display: block;将其转为块元素自然间隙就会消失，不过这样也会产生一些副作用。
.给div.test添加height
这种方式比较简单那就让div.test只有图片那么高，这样也会有副作用，文字可能会移除
.改变vertical-align
改变垂直对齐方式，比如指定vertical-align: bottomorvertical-align: toporvertical-align: middle，可以很完美的解决这个问题。

其他解决方法 找到上面的div中的图片代码所在位置，为其设定属性style="display:block"，问题解决。
或者img下边有div（中有图片）设置img（div上面的object）‍其设定属性style="display:block"，问题ok。
display:block 意思是：让对象成为块级元素(比如a，span等)。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列 表<uL><ol><dl> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。
而内联元素 则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........
块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。