《CSS世界》读书笔记

CSS三无准则: 无宽度（充分利用流特性）、无浮动、无图片

无宽度与宽度分离分离准则相通

浏览器兼容（区别）：

IE8仅支持单冒号的伪元素 如：
.element:before{}

 

 

 

常用清楚浮动方式

/* 清楚浮动 */
.clearfix{
    *zoom : 1; /*For IE 6/7*/
}
.clearfix:after {
    content: '';
    display: table;/*block也行*/
    clear: both
}

需求： 页面某模块的文字内容是动态的，希望文字少的时候居中显示，超过一行居左显示

        <div class="container">
        　　<div class="box">
        　　    <p id="conMore" class="content">文字内容-新增文字-新增文字-新增文字</p>
        　　</div>
        </div>
        <div style="height: 10px;"></div>
        <div class="container">
        　　<div class="box">
        　　    <p id="conMore" class="content">文字内容</p>
        　　</div>
        </div>
        <style>
            .container{
                background-color: #f00;
                color: #fff;
                width: 240px
            }
            .box {
                text-align: center;
            }
            .content {
                display: inline-block;
                text-align: left;
            }
        </style>    

 由于img标签在Firefox浏览器中的产生的差异，可以在reset.css中设置予以兼容：

img{display: inline-block}

 

利用 padding 实现高度可控的分割线（登录 | 注册）

<a href="">登录</a><a href="">注册</a>
<style>
    a+ a:before{
        content: "";
        font-size:0;
        padding: 10px 3px 1px;
        margin-left: 6px
        border-left: 1px solid gray    
    }
</style>

 

margin 实现等高布局（两兰、三栏等） PS: margin 的百分比无论水平还是垂直都是相对于宽度计算的

<div class="container">
    <div id="colLeft" class="column-left">
        <h4>正方观点</h4>
        <p>观点1</p>
        <p>观点1</p>
        <p>观点1</p>
        <p>观点1</p>
    </div>
    <div id="colRight" class="column-right">
        <h4>反方观点</h4>
        <p>观点1</p>
    </div>
</div>
<style>
    .container{
        width: 100px;
        overflow: hidden;
    }
    /* 核心代码 */
    .column-left,
    .column-right {
        margin-bottom: -9999px;
        padding-bottom: 9999px;
    }
    .column-left {
        background-color: #34538b;
    }
    .column-right {
        background-color: #cd0000;
    }
</style>

文本溢出显示省略号

/* 多行文本*/
/* FF不兼容，参考链接https://blog.csdn.net/danglina123/article/details/80225984*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*控制行数*/
overflow: hidden;

/* 单行文本*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;