css样式中常见的知识点

1、如何设置子div在父div中垂直居中显示？

• 使用flex布局（无需已知父子宽高）

.parent {

    width: 500px;

    height: 500px;

    border: 1px solid black;

    display: flex;

    justify-content: center;      /*水平居中*/

    align-items: center;          /*垂直居中*/

}

.child {

    width: 200px;

    height: 200px;

    border: 2px solid pink;

}

• 定位：父容器相对定位，子div绝对定位（无需已知父宽高，必须已知子div宽高）

.parent {

  width: 500px;

  height: 500px;

  border: 1px solid black;

  position: relative;

}

.child {

  width: 200px;

  height: 200px;

  position: absolute;

  border: 2px solid pink;

  top: 50%;

  left: 50%;

  margin-top: -100px;   /*这里是子div高的一半*/

  margin-left: -100px;  /*这里是子div高的一半*/

}

• 使用定位和margin: auto（水平居中）（无需已知父子宽高）

.parent {

  width: 500px;

  height: 500px;

  border: 1px solid black;

  position: relative;

}

.child {

  width: 200px;

  height: 200px;

  border: 2px solid pink;

  position: absolute;

  margin: auto;  /* 通过设置top，left四属性为0居中元素的做法，这就像四个方向有相同的力在拉这个盒子，配上margin:auto让这个盒子的位置保持中立，来达到盒子处于正中心的目的。*/

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;  

}

• 父div设置了display: table-cell（让标签元素以表格单元格的形式呈现,类似于td标签），和vertical-align: middle （无需已知父子div高宽）

.parent {

  width: 500px;

  height: 500px;

  border: 1px solid black;

  display: table-cell;     /*设置了display:cell后，vertical-align:middle使内部文字/行内元素内容垂直居中*/

  vertical-align: middle;  /* 使父元素内的行内元素的垂直居中 */

  text-align: center;      /* 使父元素内的行内元素的水平居中 */

}

.child {

  width: 200px;

  height: 200px;

  border: 2px solid pink;

  display: inline-block;

}

• 父div设置text-align : center以及line-height=父height ，设置子div：vertical-align: middle，实现在父div中垂直居中对齐（必须已知父div宽高）

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  text-align: center;
  line-height: 500px;
  position:relative;
}

.child {
  width: 200px;
  height: 200px;
  position:absolute;
  left:50%;
  top:50% ;
  transform:translate(-50%,-50%) ;
}

• transform：:使用的百分比transform: translate(-50%,-50%);

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  text-align: center;
  line-height: 500px;
  position:relative;
}

.child {
  width: 200px;
  height: 200px;
  position:absolute;
  left:50%;
  top:50% ;
  transform:translate(-50%,-50%) ;
}

 

2、CSS3 2D变形（利用Transfrom方法）（旋转效果）

• rotate（angle）：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转

  transform: rotate(30deg) ;

• translate(x,y)方法：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。也就是相对于页面左部和顶部的距离

transform: translate(20px, 20px);

• scale() 方法：通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

transform: scale(2,0.5);

• skew() 方法：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

transform: skew(30deg,30deg);

3、CSS transition（过渡效果）

transition-property：设置元素中参与过渡的属性；
transition-duration：设置元素过渡的持续时间；
transition-timing-function：设置元素过渡的动画类型；
transition-delay：设置过渡效果延迟的时间，默认为 0；
transition：简写属性，用于同时设置上面的四个过渡属性。

4、CSS3新特性

• box-sizing : css3 盒子模型固定大小
• border-radius : 圆角边框
• box-shadow:盒子阴影
• background-size:背景图片大小
• transition:过渡
• transform:转换(位移 旋转 缩放)
• animation:动画
• linear-gradient:线性渐变
• flex布局
• 媒体查询多栏布局
• 字体图标iconfont

5、display常用有那些值

• inline 默认。此元素是行内元素，可以和其他元素存在同一行
• block 此元素为块级元素，独占一行
• none 此元素不会被显示，不占空间
• inline-block 此元素为行内块元素

6、flex的属性有哪些值

   常见的父级属性       

• flex-direction ：设置主轴的方向
• justify-content ：设置主轴上的子元素排列方式
• flex-wrap ：设置子元素是否换行
• align-content ：设置侧轴上的子元素排列方式（多行）
• align-items ：设置侧轴上的子元素排列方式（单行）
• flex-flow ：复合属性，相当于同时设置了flex-direction和flex-wrap

常用的子项属性

• flex：子项目占的份数
• align-self： 控制子项在自己侧轴的排列方式
• order：属性定义项目的排列顺序，数值越小排列越靠前，默认为0，可能的值为任意整数

7、CSS 常见的伪类和伪元素有哪些

• :link 应用于未被访问过的链接
• :visited 应用于被访问过的链接
• :hover 应用于鼠标悬停到的元素
• :first-child 选择某元素第一个子元素
• :last-child 选择最后一个元素
• ::before 在元素内容的最前面添加新内容。
• ::after 在元素内容的最后面添加新内容。

8、BFC的理解

什么是BFC(Block Formatting Contenxts) : 块级格式上下文

如何使用BFC？

• float不是none (有float属性且不为none,此时盒子自动变成BFC盒子)
• overflow属性不是visible(有overflow属性且不为visible,此时盒子自动变成BFC盒子)
• position属性不是static和relative
• display属性为以下值 ： table-cell 、 inline-block 、 table-caption

解决了什么问题？

• 清除元素内部浮动
• 解决盒子margin合并问题（塌陷也可以解决）

如何清除浮动

• 使用before和after双伪元素清除浮动
• 给父元素添加overflow:hidden(转化成BFC)
• 给子元素添加空白标签给其设置属性 clear:both
• 给父元素添加一个高度

9、盒子模型的理解

• 盒子模型组成有 4 部分,分别为:内容 内边距 外边距(一般不计入盒子实际宽度) 边框
• 盒子模型有 2 种:标准盒子模型与怪异盒子模型
• 标准盒子模型=content(内容)+border(边框)+padding(内边距)
• 怪异盒子模型=content(内容)(已经包含了 padding 和 border)
• css3 种可以通过设置 box-sizing 属性来完成标准或许怪异盒子模型之间的切换,怪异盒子模型:box-sizing: border-box;标准盒子模型:box-sizing:content-box

10、px/em/rem/vh/vw的区别

• em/px/rem/vh/vw 都属于 css 的单位,这些单位可以分为相对单位、绝对单位
• px:绝对单位,网页按照精确像素来显示.
• em:相对单位,相对自身定义的 font-size 来计算,自身没有设置字体大小,相对父元素的字体大小
• rem:相对单位,相对 html 根元素的字体大小来计算,常为 1rem=10px（font-size=62.5%）
• vw/vh:相对视口大小布局,把屏幕平均划分为 100 等份。

11、文本溢出的省略样式？

• 单行文本溢出换省略号：

white-space: nowrap; // 文字强制不换行text-overflow: ellipsis; // 文字溢出换省略号overflow: hidden; // 溢出文字隐藏

• 多行文本溢出换省略号

display: -webkit-box; // 元素转换为弹性容器,在一行排列-webkit-box-orient: vertical; /_ 表示盒子对象的子元素的排列方式 _/-webkit-line-clamp: 3; /_ 限制文本的行数，表示文本第多少行省略 _/text-overflow: ellipsis;/_ 打点展示 _/overflow: hidden;/_ 超出部分进行隐藏 _/

12、CSS中哪些属性不可继承

• display:元素的格式
• 文本属性：vertical-align、text-decoration
• 盒子模型属性：width、height、margin、border、padding
• 背景属性：background、background-color、background-image
• 注：元素的自带属性不可被继承，比如a标签的颜色

13、CSS选择器权重如何计算

CSS权重排行：

• ！important > 行内样式 >ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
！important	无穷大（最大的值）

14、display:none与visibility:hidden区别

元素隐藏显示和显示最常用的是 display:none 与 visibility:hidden

• display:none 设置该属性后，该元素下的元素会被隐藏，占据空间消失。会引起回流与重绘
• visibility:hidden 设置该属性后，下面的元素会被隐藏但是依旧占据了空间。会引起重绘
• position的值有那些，分别有哪些作用
• 静态定位:static（默认）：默认值不脱离文档流top，right，bottom，left等属性不生效
• 绝对定位: absolute ：绝对定位的关键是找对参照物。找到最近的一级带有带定位的父级元素进行位置移动如果找不到，那么相对于浏览器窗口进行定位注:设置了position:absolute;属性后，元素会脱离正常文档流，不在占据空间。
• 相对定位:relative ：元素相对于自身位移的变化top，right，bottom，left。没有脱离文档流
• 固定定位：fixed : 参照物:浏览器窗口，会脱离文档流

补充：固定定位与绝对定位的区别 ：当绝对定位和固定定位参照物都是浏览器窗口时的区别:当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动