css新知

calc 源

1.添加普通样式

.demo {
    width: 300px;
    background: #60f;
}
.box {
    width: 100%;
    background: #f60;
    height: 50px;
}

效果

2. 在div.box上添加border和padding

.demo {
    width: 300px;
    background: #60f;
    padding: 3px 0; 
}
.box {
  width: 100%;
  background: #f60;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

效果

3.calc()的运用

.demo {
    width: 300px;
    background: #60f;
    padding: 3px 0;
}
.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
    width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

效果

总结：使用calc可以自动计算子元素的宽高，在父元素的宽高基础上减去子元素的内外边距和边框

---

CSS 多类选择器 源

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
eg：
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

<p class="important warning">
This paragraph is a very important warning.
</p>

---

CSS3 [attribute*=value] 选择器

设置 class 属性值包含 "test" 的所有 div 元素的背景色：

div[class*="test"]
{
background:#ffff00;
}

---

table

1.table-layout：fixed属性
2.设置表格宽度
td宽度变化
在表格上多加一行height：0并设置各个单元格宽度
两行倒置，宽度设置有效
在chrome firefox ie最新版环境下 测试有效

---

自动换行

word-break:break-all和word-wrap:break-word区别

---

css选择器

CSS3选择非第一个子元素

<div>
    <span></span>
    <p></p>
    <span></span>
    <span></span>
</div>

div > *:not(:first-child) {
    margin-left:10px
}

注意not前面没有空格

---

flex（容器-项目）

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。