随手记(css)

随手记(css)

hello！第一次写博客，主要目的是充当个记事本整合下自己知道的知识点，如果错误请指点…

• 三栏布局

1. float布局
   实现：左中右三列，左列左浮动，右列右浮动，中间列左右margin；
   优点：比较简单，兼容性高；
   缺点：浮动元素脱离文档流，使用的时候一定记得清浮动。
   ps：本人常用双伪类清除浮动(.clearfix:after,.clearfix:before {content: “”;display: block;clear: both;})

2. position布局
   实现：左中右三列（无顺序），根据定位属性直接去设置各个子元素位置；
   优点：快捷，设置简便；
   缺点：元素脱离文档流，后代元素也脱离了文档流，高度未知时，会有问题，有效性和可使用性较低。

3. table布局
   实现：左中右三列，父元素设置dispaly:table，子元素设置display:table-cell，居中子元素不设置宽度；
   优点：使用起来方便，兼容性高；
   缺点：①不能设置栏边距；②对seo不友好；③当其中一个单元格高度超出时吗，两边单元格随之变高。

4. flex布局
   实现：左中右三列，父元素display: flex;两侧元素设宽；居中子元素flex: 1；
   优点：方便，比较完美；
   缺点：存在IE上兼容性问题，只能支持到IE9以上。

5. grid布局
   实现：左中右三列，父元素display: grid;利用网格实现；
   优点：强大、简单、灵活；
   缺点：兼容性不好，IE10+上支持，而且也仅支持部分属性。

• 文字超出裁切

1. 单行文字裁切

.box{
    overflow: hidden; /* 隐藏元素溢出内容 */
    white-space: nowrap; /* 单行显示 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
}

2. 多行文字裁切

.box{
    overflow: hidden; /* 隐藏元素溢出内容 */
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数，即行数设置 */
    -webkit-box-orient: vertical; /* 规定框从上向下垂直排列子元素 */    
}

---

• 盒子垂直居中

1. 盒子明确知道宽高的情况下

<div class="box">
	<div class="smallBox"></div>
</div>

/*定位*/
.box{position: relative;}
.box .smallBox {/*需要居中的盒子需要定宽高*/
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

/*flex布局*/
.box{
	width: 300px;
	height: 300px;
	display: flex;/*flex布局*/
	justify-content: center;/*使子项目水平居中*/
	align-items: center;/*使子项目垂直居中*/
}
.smallBox {
	width: 100px;
	height: 100px;
}

2. 盒子不知道宽高的情况下

/*定位 transform**此方法有兼容性 IE9 以下会失效*/
<div class="box">
	<div class="smallBox "></div>
</div>
.box {
	position: relative;
}

.smallBox {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

/*table-cell布局*/
<div class="box">
	<div class="smallBox ">
		<div class="inner">
		</div>
	</div>
</div>
.box {
	width: 300px;
	height: 300px;
	display: table;
}
	
.smallBox {
	display: table-cell;
	vertical-align: middle;
	/*使子元素垂直居中*/
	text-align: center;
	/*使子元素水平居中*/
	background-color: red;
}
	
.inner {
	display: inline-block;
	width: 20%;
	height: 20%;
	background-color: black;
}