学习总结

制定个小目标
128 阅读3分钟

CSS

盒模型

  • 盒模型分为“标准盒模型”、“IE盒模型”；
    • 标准盒模型：width = content
    • IE盒模型： width = content + padding + border

BFC

  • BFC-块级格式化上下文

BFC解决的问题

  • 两列布局，阻止元素被浮动元素覆盖
  • 阻止margin重叠问题
  • BFC可以包含浮动的元素（清除浮动）

触发BFC的方式

脱离正常文档流的元素，就会触发BFC，一般触发BFC的方式

  • float：left/right
  • overflow: hidden/auto/scroll
  • display: inline-block/table/table-cell/flex
  • position: absolute/fixed

垂直水平居中

面试经常命中的一个问题，垂直水平居中，总结一下；

水平居中实现

  • 行内元素 这里的行内元素指图片img、超链、文本text等，只需要父元素设置text-align: center即可
.center {
	text-align: center
}
<div class="center">水平居中</div>
  • 块元素
    • 知道宽度、高度块元素
    .wrapper {
	width: 200px;
   	height: 200px;
}
.child {
	width: 100px;
   	height: 100px;
   	margin: 0 auto;
}

<div class="wrapper">
	<div class="child"></div>
</div>
    • 不知道宽度、高度块元素
    	.wrapper{
    	width: 200px;
        height: 200px;
        border: 1px solid #000;
        position: relative;
    }
	.child{
    	position: absolute;
        top: 0;
        left: 0;
        transform: translate(50%, 0);
    }
	<div class="wrapper">
    		<div class="child"></div>
   	</div>
  • flex布局
	.flexWrapper {
    	display: flex;
        justify-content: center;
    }
	<div class="flexWrapper">
    	<div class="child"></div>
    </div>

垂直居中实现

  • 垂直居中与水平居中的原理类似；

垂直水平居中实现

  • flex布局
.flexWrapper {
	height: 600px;
    display: flex;
    justify-content: center;
    align-items: center
}
.flexWrapper>div {
	width: 200px;
    height: 200px;
    background-color: red;
}
<div class="flexWrapper">
	<div>垂直水平居中</div>
</div>
  • position: absolute + transform
.parent {
	position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
}
.child {
	position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    transform: traslate(50%, 50%);
}
<div class="parent">
	<div class="child">垂直水平居中</div>
</div>
  • position: absolute + margin
.child {
	position: absulute;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
  • position: absolute + 负margin （知道子元素的宽度和高度）
	.child {
    	position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin-left: -50px; // 宽度的一半
        margin-top: -50px;	// 高度的一半
    }

Flex布局

flex布局是目前最常用的一种布局方式，是以横轴、纵轴为轴心的一维布局方式；主要使用方式记录一下；

Flex外部框架

  • flex-direction: row | row-reverse | column | column-reverse; 内部元素横向排列还是纵向排列
  • flex-wrap: nowrap | wrap | wrap-reverse; 是否支持自动换行排列
  • flex-flow: 是flex-direction和flex-wrap的综合属性，默认为 row nowrap
  • justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items: flex-start | flex-end | center | baseline | stretch;

Flex内部元素

  • order: 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow: 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink: 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis: 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  • flex: 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

参考链接

avatar
文章
阅读
粉丝