新手常见css问题

1、文本强制换行

word-break: break-all; 只对英文起作用，以字母作为换行依据。
word-wrap: break-word; 只对英文起作用，以单词作为换行依据。
white-space: pre-wrap; 只对中文起作用，强制换行。

2、文本禁止换行

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

3、图片水平+垂直居中

方案1

.title {
   height: 15%;
   font-size: 18px;
   position: relative;
}
.title img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

方案2

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

.img {
  width: 200px;
}

方案3

.title {
    width: 200px;
    height: 200px;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}

 4、css3循环动画

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s infinite;

}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

5、左右布局，左侧高度跟随右边，右边宽高不固定

方案1

.left{
  height: 100%;
  width: 100px;
  background: red;
  position: absolute;
}
.right{
  margin-left: 100px;
  background: blue;
}
.parent{
  position: relative;
}

方案2

  .parent{
     display: flex;
   }
   .left{
	 width:100px;
     background: red;
   }
   .right{
	 flex:1;
     background: blue;
   }

6、浮动导致父元素高度塌陷

方案1

.father{
	min-height:50px;
    width:300px;
    background:green;
}
.son {
    float:left;
    height:100px;
    width:100px;
    background:blue;
}
.father::after {
    content:"";
    clear:both;/*清除浮动*/
    display:block;/*确保该元素是一个块级元素*/
}

方案2

.father{
	min-height:50px;
    width:300px;
    background:green;
	overflow:hidden; /*子元素浮动父元素无法裁剪，只能包住*/
}
.son {
    float:left;
    height:100px;
    width:100px;
    background:blue;
}

7、white-space 属性

值	换行符	空格和制表符	文字换行	行尾空格
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除

8、border和padding不影响宽度

box-sizing: border-box;