BFC

一个隔离的独立容器

产生BFC的方式有

• overflow:hidden
• display:inline-block/flex/table......
• position:absolute/fixed

响应式设计

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

实现响应式的方式有

• 媒体查询
• vm/vh
• 百分比
• rem

水平垂直居中

• 定位+margin：auto
• 定位+transform（-50%，-50%）
• flex/grid布局

内联布局居中

脱离文档流

• 绝对定位

文本溢出省略

单行文本溢出（宽度截断）

p{
overflow: hidden;//超出隐藏
line-height: 40px;
width:400px;
height:40px;
border:1px solid red;
text-overflow: ellipsis;//文本溢出时显示省略
white-space: nowrap;//不换行
}

多行文本溢出（高度截断）

基于高度

.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}

.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}

基于行数

p {
width: 400px;
border-radius: 1px solid red;
-webkit-line-clamp: 2;//行数
display: -webkit-box;
-webkit-box-orient: vertical;//伸缩盒子对象子元素排列方式
overflow: hidden;
text-overflow: ellipsis;
}

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

word-break:适合中文，日语等换行，英文单词会切断

word-wrap:适合英文，允许长单词必要时切断

CSS3新特性

• 选择器 :nth-child（n）etc
• 边框 border-radius,box-shadow,border-image
• 背景属性 background-clip,background-origin,background-size,background-break
• 文字 word-wrap,text-overflow,text-shadow,text-decoration
• transition过渡
• animation动画