css用法

demo页面

vscodebg1.jpg

列表margin处理方案

html

<ul class="list clearfix">
     <li></li>
     <li></li>
     <li></li>
 </ul>

css

li {
    margin-right:30px;
}
ul {
    margin-right:-30px;
}

实现高度可控的分割线

split.png

html

<span class="register">注册</span>
<span class="split"></span>
<span class="logout">退出登录</span>

css

.split {
    padding: 11px 6px 2px 0; //控制分割线的位置
    margin-left: 5px;
    font-size: 0;
    border-left: 2px solid #000;
}

demo3

demo3.jpg

html

<div class="demo3">
        <h5><i></i><span>慕课网nodejs</span><i></i></h5>
    </div>

css

.demo3 {
    margin-top: 100px;
    text-align: center;
}
.demo3>h5>i {
    display: inline-block;
    height: 2px;
    width: 100px;
    background-color: red;
    vertical-align: middle;
}
.demo3>h5>span {
    display: inline-block;
    margin: 0 20px;
}

多行文本居中

demo4.jpg

html

<div class="line">
            <p>多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居</p>
</div>

css

.demo4 .line {
    /*position: absolute;*/
    /*float: left;*/
    display: table-cell;
    vertical-align: middle;
    width: 150px;
    height: 200px;
    padding: 0 20px;
    border: 1px solid #000;
}

利用table-cell 不兼容ie7，父元素不能带有破坏属性float和absolute

不定宽的块状元素居中

1.在最外层套table(包含tbody tr td) 设置table属性 margin: 0 auto；
2.只能兼容7以上
html

<div class="wrap">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

css

 .wrap {
    text-align: center;
}
 .wrap>ul {
    display: inline-block;
}

3.具体看demo
html

<div class="wrap">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

css

 .wrap {
    float: left;
    position: relative;
    left: 50%;
}
.wrap>ul {
    position: relative;
    left: -50%;
}