css 【实用】

BFC

什么是 BFC 【 这个可略过不看 理论性的东西 是当笔记摆着的 】

Block fomatting context (简称BFC)
Inline formatting context (简称IFC)
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC

BFC 定义：
BFC直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算

这些元素会生成BFC:
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible

---

实用样式

以下内容： 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背

慎用宽高 尽量不要加 容易出现 bug 及兼容问题清除浮动 在浮动的父级加

/* css */

.className::after{
    content:'';
    display: block;
    clear:both;
}

rem算法

/* css */

html { font-size: 62.5%; } /* IE9以下兼容 */
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

单行溢出变点点：

/* css */

.className{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

多行溢出变点点：

/* css */

.className{
    overflow: hidden;    
    display: -webkit-box;               // 将对象作为弹性伸缩盒子模型显示 。
    text-overflow: ellipsis;        // 可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
    -webkit-box-orient: vertical;       // 设置或检索伸缩盒对象的子元素的排列方式 。
    -webkit-line-clamp: 2;              // 限制在一个块元素显示的文本的行数。

}

文字两端对齐：

/* css */

/* 中文文字两端对齐 */
.className1{ 
    text-align:justify;
    text-justify:inter-ideograph
}

/* 英文文字两端对齐 */
.className1{ 
    text-align:justify;
    text-justify:newspaper
}

css中如何让第一个和最后一个不被选中?

tr:not(:first-child):hover {
        background: #ffffdd;
    }
/* 如果上面的代码出现问题，使用下面的会更安全 或者 :not(class) */
.b:not(.b-n):hover {
    background: #ffffdd;
}

清除a的默认样式

/* css */

.className1{ 
    text-decoration:none;
    out-line:none;
}

点击跳转页面

/* html */
<div onclick="window.open('http://www.baidu.com')">在新窗口跳转至百度</div>
<div onclick="window.open('http://www.baidu.com','_self')">在当前窗口跳转至百度</div>