摘要 今天小编跟大家讲解下有关CSS中的一些细节 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS中的一些细节 的相关资料，希

今天小编跟大家讲解下有关CSS中的一些细节 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS中的一些细节 的相关资料，希望小伙伴们看了有所帮助。

一、塌陷

1.当position设置为：absolute或者fixed时 元素的display会转换为block。（设置float也会产生这样的效应）2.正常情况下 div会被内容撑开 但是如果设置了1.的情况下 父元素就会产生塌陷 失去高度。

解决办法：

给父元素设置高度。给父元素设置overflow: hidden;

二、文本的自动换行

对于那种长单词 会超出元素的实际宽度。

解决办法

word-break:break-all;

三、文本溢出部分隐藏解决办法

overflow: hidden;

四、溢出打点4.1 单行文本打点p{ width: 200px; overflow: hidden; white-space: nowrap; /*不换行*/ text-overflow: ellipsis; /*溢出部分点样式*/}4.2 多行文本溢出打点p{ width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /*行数*/ -webkit-box-orient: vertical;}五、flex布局

当设置了display: flex;后 那么子元素的float、clear和vertical-align属性失效。flex布局 分为容器和项目两个部分。一般而言 容器就是父元素 项目就是该父元素下的子元素。（1）flex-direction: row（默认）| row-reverse | column | column-reverse决定主轴方向 也就是定义容器元素是行方向排列还是列方向排列 并且定义它的起点方向 例如行方向是从左向右还是从右向左。反之 列方向是从上到下还是相反呢。（row是行 column是列。）

（2）flex-wrap: nowrap（默认） | wrap | wrap-reverse决定是否都拍在一行（列）里 也就是是否换行。以行为例有三种情况 不换行、换行（第一行在上方） 换行（第一行在下方）

（3）flex-flow: row nowrap（默认）这是flex-direction属性和flex-wrap属性的简写形式 第一个参数定义排列方式 第二个参数定义是否换行。

（4）justify-content: flex-start | flex-end | center | space-between | space-around调整主轴方向上项目的对齐方式。以行向排列为例 可以设置为靠左对齐 靠右对齐 水平居中对齐。还有两个特殊的：space-between（两端对齐 相当于文本对齐【text-align】里的justify）；space-around（元素两侧间隔相等 且比它与边框的间隔大一倍）

（5）align-items: flex-start | flex-end | center | initial（从父元素继承）调整交叉轴方向上的项目对齐方式。如果行方向是主轴方向 那么列方向就是交叉轴方向。以行方向为例 可以设置垂直在上 垂直在下 垂直居中。两个特殊的：baseline（项目元素第一行文字的基线对齐）；stretch是默认的（如果项目元素没有设置高度 那么它就会自动拉伸高度至整个容器高度）

六、rem适配方案

使用 rem 单位来定义文字的大小最大的问题在于这些值有点难以使用。让我们来看一个例子 假设根元素的文字大小是 16px 我们常用的文字大小转换为 rem 值如下：

10px = 0.625rem

12px = 0.75rem

14px = 0.875rem

16px = 1rem (base)

18px = 1.125rem

20px = 1.25rem

24px = 1.5rem

30px = 1.875rem

32px = 2rem

动态修改font-size:

媒体查询方式

@media screen and (max-width: 360px) and (min-width: 321) { html : {font-size: 24px}}@media screen and (max-width: 320px) { html : {font-size: 20px}}

js代码控制

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;let htmlDom=document.getElementByTagName('html')[0];htmlDom.style.fontSize = htmlWidth/10 +'px';

sass计算

@function px2rem($px) { $rem: 37.5px;//基准值 iPhone为参考375/10 @return ($px / $rem) _rem;}width: px2rem(50px);七、元素居中文本（img也是）元素水平居中 text-align: center;块级元素水平居中 margin: 0 auto;单行文本垂直居中 设置line-height和div的height不确定高度的文本垂直居中 使用padding-top和padding-bottom确定高度的块级元素垂直居中 position: absolute; top:50%; margin-top: -高度的一半;绝对定位实现垂直居中 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;给父元素设置 display: table-cell; vertical-align: middle;css3 设置完定位和top,left后设置 transform: translate(-50%,-50%);弹性盒子（有兼容问题）

来源：爱蒂网