一些csss属性

padding 内边距

margin 外边距

例子：水平居中：margin: 0px auto;

border 边框

box-sizing 属性 默认为向外延展，设置为 border-box为向内侵占

overflow 属性 规定当内容溢出元素框时发生的事情。

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

display 属性很重要

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

block会占用一整行。

block和inline-block 可以调整大小。

 

例子,将li 从默认的list-item改为 行内块元素,实现横向菜单栏。

li{
    display: inline-block;

    background: rgb(1 ,136 ,204);
    /*外边距*/
    margin: 1px;
    /*高度*/
    height: 50px;
    /*内边距*/
    padding: 15px;
    text-align: center;
    color: white;
    /*vertical-align: middle;*/
    line-height: 20px;
    /*float:left;*/
    box-sizing: border-box;
}
li:hover{
    background: yellowgreen;
}

<div>
    <ul>
        <li>首页</li><li>IT资产</li><li>E-learning</li><li>Email</li>
    </ul>
</div>