文本不换行
/*单行文本*/
.single-line{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*多行文本(注:目前仅webkit内核支持)*/
.multi-row{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
复制代码
CSS样式优先级
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
- 权重计算
- 后写优先
雪碧图的作用
- 减少HTTP请求数,提高加载性能
- 减少图片大小
display:inline-block的间距问题
由于空白字符的原因
解决:font-size: 0
如何清除浮动
overflow:hidden
(原理:BFC)::after{clear:both}
.clear{clear:both}
如何适配移动端
viewport
、 rem
、 media查询
、 响应式设计:隐藏、折行、自适应
页面三栏布局实现方式
- 浮动布局
- 定位布局
- flexbox布局
- 表格布局
- 网格布局
盒子垂直水平居中实现方式
- 定位 + margin:
position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
复制代码
- 定位 + transform:
position: relative / absolute;left: 50%; top: 50%;transform: translate(-50%, -50%);
复制代码
- 表格布局:
父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;
复制代码
- flex 布局:
父级 display: flex;align-items: center;justify-content: center;
复制代码
- 网格布局
参考:https://github.com/Sweet-KK/css-layout
关于CSS盒模型
标准模型:宽高 = content
IE模型:宽高 = border+padding+content
边距重叠(塌陷)问题
上下2个div分别设置margin-bottom和margin-top,margin值合并取最大值。父div嵌套子div并设子div宽高margin-top,父div=子div宽高并会margin值合并取最大值。
解决原理:BFC
解决办法:overflow:hidden
什么是格式化上下文
格式化上下文,它指的是具有某种CSS格式化规则(布局规则)的上下文环境,在这个上下文环境内的所有子元素,都将根据其特定的CSS格式化规则来进行排列。
BFC
块级格式化上下文
规则:
-
BFC元素垂直方向的边距会重叠;
-
占据文档流的BFC元素不会和浮动元素重叠;
-
BFC是个独立容器里外互不影响;
-
计算BFC高度时浮动元素也会参与计算(如清除浮动)
如何创建:overflow
、 float
、 postion
(absolute 或 fixed)、 dispay
(inline-box和table相关的以及flex和grid)
FFC
自适应格式化上下文
规则:参考flex布局
如何创建:flex或inline-flex