calc 源
1.添加普通样式
.demo {
width: 300px;
background: #60f;
}
.box {
width: 100%;
background: #f60;
height: 50px;
}
效果
- 在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），简称"项目"。
