css宽度和⾼度⼀致,CSS深⼊浅出-宽度与⾼度margin属性怎么用
⽂档流
⽂档流就是⽂档内元素的流动⽅向。
内联元素从左到右流动，遇到阻碍分⾏继续流。
块级元素从上往下流动，每⼀个块独占⼀⾏。
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⽤来看，⽅便调试

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。