03-CSS知识点总结

1、CSS盒子模型

• 用来装页面上的元素的矩形区域。
• 盒子模型包括标准的W3C盒子模型和IE盒子模型。
• 每个盒子由 4 部分构成：外边距margin、边框 border、内边距 padding、内容 content。
• CSS3 新增了box-sizing 属性，可以让开发者指定盒子模型种类：
  • content-box：标准盒子模型。
  • border-box： IE 盒子模型。

 

（1）标准盒子模型

• 在标准盒子模型中，设置的width/height只有content部分

 

（2）IE盒子模型

• 在IE盒子模型中，设置的 width/height 包含了 border、padding、content部分。
• 模型会自动根据border和padding的值来调整content的值，不需要手动调整。

 

2、水平垂直居中

（1）flex布局

<!-- html部分 -->
    <div class="box">
        <div></div>
    </div>

/* css部分 */
    .box{
        height: 200px;
        display: flex;
        justify-content: center; 
        align-items: center;
     }
    .box>div{
      	background-color: blue;
   	  	width: 100px;
        height: 100px;
     }

 

（2）绝对定位 + margin：auto

<!-- html部分 -->
   <div></div>

/* css部分 */
    div{
        background-color: blue;
        width: 200px;
        height: 200px;
        position:absolute;   
        top: 0;
        right: 0;
        bottom: 0;
        left:0;
        margin: auto;
    }

 

（3）绝对定位 + transform

<!-- html部分 -->
    <div></div>

	 div{
         background-color: blue;
     	 width: 200px;
         height: 200px;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%,-50%);
     }

 

3、隐藏元素

（1）display:none

• 元素隐藏，会改变页面布局，会导致重排和重绘，不会触发其事件。

（2）visibility: hidden

• 元素隐藏，不会改变页面布局，会导致重绘，不会触发其事件。

（3）opacity: 0

• 元素隐藏，不会改变页面布局，不会导致重绘，会触发其事件。

 

4、清除浮动

（1）额外标签法

• 在最后一个浮动标签后，新加一个标签，给其设置clear：both；
• 不推荐。
• 优点：通俗易懂，方便。
• 缺点：添加无意义标签，语义化差。

<div class="clear">额外标签法</div>

.clear{
    clear:both;
}

 

（2）父级添加overflow属性

• 给包含浮动元素的父元素添加overflow:hidden
• 不推荐。
• 优点：代码简洁。
• 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

<div class="father hidden"></div>

.hidden {
	overflow: hidden;
}

 

（3）使用after伪元素清除浮动

• 在父元素中添加伪类元素清除浮动。
• 推荐。
• 优点：符合闭合浮动思想，结构语义化正确。
• 缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

<div class="fahter clearfix"></div>

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

 

（4）使用before和after双伪元素清除浮动

• 推荐。
• 优点：代码更简洁。
• 缺点：用zoom:1触发hasLayout。

<div class="fahter clearfix"></div>

.clearfix: before,
.clearfix: after {
    content: "";
    display: table;
}
.clearfix: after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

 

5、BFC

• 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

 

（1）触发条件

• 根元素
• float元素
• position:fixed / absolute元素
• display:inline-block / table-cell / table-caption / flex 元素
• overflow !== visible元素

 

（2）规则

• 属于同一个 BFC 的两个相邻 Box 垂直排列
• 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• 计算 BFC 的高度时，浮动子元素也参与计算

 

（3）应用

• 阻止margin重叠
• 可以包含浮动元素，清除内部浮动
• 可以阻止元素被浮动元素覆盖

 

6、选择器的优先级

• !importent：无穷大
• 内联样式：1000
• ID 选择器：100
• 类选择器 / 伪类选择器 / 属性选择器 ：10
• 标签选择器 / 伪元素选择器 ：1

 

7、组合选择器

（1）后代选择器（空格）

• 匹配属于指定元素后代的所有元素。

 

（2）子选择器（>）

• 匹配属于指定元素直接 / 一级子元素的元素。

 

（3）相邻兄弟选择器（+）

• 匹配紧接在另一元素后的元素，且二者有相同父元素。

 

（4）通用兄弟选择器（~）

• 匹配属于指定元素的同级元素的所有元素。

 

8、画三角形

<div></div>

div {
      width: 0;
      height: 0;
      border-top: 40px solid transparent;
      border-right: 40px solid transparent;
      border-bottom: 40px solid blue;
      border-left: 40px solid transparent;
    }

 

9、position相关属性

（1）static 默认定位

• 没有定位，元素出现在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。

 

（2）relative相对定位

• 元素先放置在未添加定位时的位置，再通过设置垂直或水平的位置让其“相对于”起点进行移动，即元素仍然占据原来的空间。

 

（3）absolute绝对定位

• 元素会被移出正常文档流，相对于最近的已定位的父元素确定位置。

 

（4）fixed固定定位

• 元素会被移出正常文档流，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

 

（5）sticky粘性定位

• 元素在跨越特定阈值前为相对定位，之后为固定定位。

 

（6）inherit

• 规定应该从父元素继承 position 属性的值。

 

10、CSS3新特性

• border-radius：用于实现圆角。
• box-shadow：用于实现阴影。
• transform：用于实现元素变形，包括旋转 rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形matrix。
• transition：用于在一定的时间区间内，把元素从一种状态平滑地过渡到另一种状态。
• animation：结合@keyframes 创建实现动画。
• Flex布局。

 

11、Flex布局

• Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

• 采用 Flex 布局的元素，称为 Flex 容器（flex container）。
• 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）。
• 容器默认存在水平的主轴（main axis）和垂直的交叉轴（cross axis）。

 

（1）容器的属性

• flex-direction：设置主轴的方向，即项目的排列方向。

 

• flex-wrap ：设置子元素是否换行。

 

• justify-content ：设置主轴上的子元素排列方式

 

• align-items ：设置交叉轴上的子元素排列方式（单行）

 

• align-content ：设置交叉轴上的子元素的排列方式（多行）

 

（2）项目的属性

• flex ：定义子项目分配剩余空间，用flex来表示占多少份数。
• flex属性是flex-grow，flex-shrink，flex-basis的简写，默认值为0 1 auto。

.item {
	flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

.item {
	flex: <number>; /* default 0 */
}

 

• align-self：控制单个项目在交叉轴上的排列方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

 

• order ：定义项目的排列顺序，数值越小，排列越靠前，默认为0。

.item{
    order: <number>;
}

 

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

（1）px

• 绝对长度单位，表示像素，是设备或者图片最小的一个点。

（2）em

• 相对长度单位，基准点为父节点的字体大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px）。

（3）rem

• 相对长度单位，是相对于根元素（html）的 font-size 进行计算。

（4）vh

• 相对视口（viewport）的高度而定的，1vh等于视口高度的1%。

---

---

• 参考文献：
• Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)