常用却容易忘记的css属性与方法

让盒子垂直水平居中的3种方式

1.定位：子绝父相-----往回平移自身宽度的50%

html代码的布局所有方式沿用

<div class="bigBox">
     <div class="box1">定位</div>
</div>

.bigBox{
        height: 300px;
        width: 300px;
        border: 1px solid #333;
        position: relative;
    }
    .box1{
        height: 50px;
        width: 50px;
        background-color: pink;
        position: absolute;
        left:50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

2.flex布局，只需要给父元素加上这三个属性

.bigBox{
	display:flex;
  	align-items:center;
  	justify-content:center;
}

3.子绝父相–定位加外边距，上下左右都为0，外边距设置auto

.box1{
	position:absolute;
  	left:0;
  	right：0；
    top：0；
    bottom：0；
    margin:auto;
}

文字溢出显示省略号：

单行文字溢出显示…

   overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap

实现图片（不同大小）的自适应布局

利用max-width和max-height属性来控制图片超出盒子宽度时限制最大宽高，保证图片的正常比（不被拉伸）

<div class="div1">
        <img src="./images/222.jpg">
</div>

.div1{
    height: 300px;
    width: 500px;
    border:1px solid #ccc;
    display: table-cell;
    vertical-align: middle;
}
.div1 img{
  max-height: 100%;
  max-width: 100%;
  display: block;
  margin: auto;
}

CSS3中文字的多列布局：

就像报纸那样可以对文字分版块，感觉这个有点像栅格布局，但是只局限于文字

• column-count 属性规定元素应该被分隔的列数：

• column-gap 属性规定列之间的间隔：

• column-rule 属性设置列之间的宽度、样式和颜色规则：

• 更多属性 点击查看