html css深入浅出,CSS深入浅出（一）

1、文档流

内联元素从左往右流动；块级元素从上往下流动，每个块级元素另起一行。

块级元素的高度由其内部的文档流元素的高度总和决定

2、套路

1.中文两端对齐(text-align: justify;)

姓名

联系方式

span{

display:inline-block;

4em;

text-align: justify;

overflow: hidden;

height:20px;

}

span::after{

content:'';

display: inline-block;

100%;

}

2、打断单词换行(word-break:break-all;)

3、float横向布局

你是

谁

.clearfix::after{

content='';

display: block;

clear: both;

}

.child{

float:left;

}

4、文字溢出

/*一行文本溢出省略号显示*/

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

div{

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

/*多行文本溢出省略号显示*/

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

div{

display:-webkit-box;

-webkit-line-clamp: 2; /*设置多行显示*/

-webkit-box-orient:vertical;

overflow: hidden;

}

5、文字居中

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

div{

padding:10px 110px; /*上下相同padding——垂直居中，左右相同水平居中*/

text-align: center; /*文本水平居中*/

line-height:20px; /*设置行高，配置需要的高度*/

}

6、去除margin相关Bug(在父元素上加boder或者padding)

7、全屏居中

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

1 2 3 4 5 6 7 8 9 0

.son{

margin:0 auto;

padding:0;

140px;

}

.dad{

height:100vh;

box-sizing:border-box;

display: flex;

justify-content:center;

align-items:center;

}

8、padding-top:100%;设置长宽相等