css宽度和高度一致,CSS深入浅出-宽度与高度

文档流

文档流就是文档内元素的流动方向。

内联元素从左到右流动，遇到阻碍分行继续流。

块级元素从上往下流动，每一个块独占一行。

CSS高度

设计字体时要给一个建议行高，所以除了用line-height固定行高外，很难写死字体高度

内联元素的宽高

宽度

内联元素的宽度是由里面的字个数决定的

高度

内联元素的高度是由行高(line-height)决定的，padding和margin无法改变其高度。

块级元素的宽高

宽度

块级元素的宽度是由里面的字个数，以及内外边距决定的。

高度

块级元素的高度是由里面文档流的元素高度总和决定的

小技巧

居中

文字垂直居中

使用padding属性可以实现垂直居中

文字水平居中

使用text-align:center;属性可以实现水平居中

两端对齐

一段话

1.使用text-align:justify;可以让一段话两端对齐，但如果只有一行，是不能对齐的

2.给元素加上::after伪类，在该伪类里使用width100%，给原话加上text-align:justify;,同时两端属性均加上display:inline-block;来两端对齐

举例

JS Bin

div{

font-size:20px;

}

span{

display:inline-block;

text-align:justify;

line-height:20px;

height:20px;

width:5em;

overflow:hidden;

}

span::after{

content:'';

display:inline-block;

width:100%;

text-align:justify;

}

姓名联系方式

文字打断

因为中英文语言上的区别，默认的文字打断属性是不同的，可以通过改该属性实现英文分行

英文

默认属性为word-break:break-word;，通过改该属性来实现英文分行

也可以在单词中加上连字符"-"来实现英文分行

中文

默认属性是word-break:break-all;，即为每个字都分开来算

inline空格问题

只要是inline元素，两个元素间不相邻的话一定会有空格，可以通过脱离文档流来解决这个问题

margin合并问题

假设一个父元素包裹住一个子元素，如果父子元素都有margin属性，而父元素没有挡住子元素的东西，那么子元素的margin会和父元素的margin合并起来

使用padding或者block可以解决这个问题

文字省略效果怎么做

单行文本

div{

white-space:nowrap; //不换行

overflow:hidden; //超出div边界部分隐藏

text-overflow:ellipsis; //超出部分文本以省略号显示

}

多行文本

直接google关键词"css multi line text ellipsis"然后点击第一条关键词，直接抄代码，略改一下以完成需求。

抄下方代码

div{

overflow:hidden; //超出div边界部分隐藏

display:-webkit-box;

-webkit-line-clamp:2; //显示两行文本

-webkit-box-orient:vertical;

}

实现一个1:1的div

以下代码

div{

padding-top:100%;

}

border调试大法

在调试css之前，给所有div都加上一个1px的border用来看，方便调试