不学习具体的知识点,只了解一下
文档流(Normal flow)
块级元素的宽高,
- 以div里只有行内元素举例
- 字和字之间用基线对齐
- 行和行之间是有建议行高的,字体设计师设计师给的行高
-
div高度由line-height决定 - 空格宽度
也是由设计师决定
<div></div> // height:0
//中间加文字,height高度是多少呢?
<div>你好</div> //随字体变化,height也在变化 字体*建议行高
display:inline-block空隙问题,可以用float- div里行内元素足够多的话,一行容纳不下,自动换行,就是文档流
- 遇到一个足够长的单词,超出了文档流,用
word-break:break-alll
多行文字溢出
单行文本溢出
多行文本溢出
文字垂直居中
- 写一个
div高为40px
//小白
div{
height:40px; //千万不要写死
line-height:40px;
}
//怎么改?
div{
line-height:40px;
padding:8px 0; //文字很多,不会出现bug
}
margin合并 div高度
//只需要一个东西挡住margin,就不会合并
div.child{
border:10px solid red;
padding:10px;
margin:10px;
}
div.parent{
outline:2px solid green;
// overflow:hidden 也可以去除margin合并,不过不推荐
}
<div class="parent"> //div 里 div 外面的div 高度由谁决定
<div class="child">
111
</div>
</div>
margin合并
字体两边对齐(技巧)
该怎么实现对齐呢?小技巧
对齐了,用了什么方法
/* css */
div{
border:1px solid red;
font-size:20px;
}
span{
display: inline-block;
width:5em;
border:1px solid green;
text-align: justify;
height:20px;
line-height:20px;
overflow: hidden;
}
span:after{
content:'';
display:inline-block;
width:100%;
}
/* html*/
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
<p style="text-align: justify;">
我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.
</p>
div中的div垂直居中
paddingdisplay:flextransform:translate
div的高度是由内部文档流中元素的总和决定,行内元素从左到右,块级元素从上到下,脱离文档流中的不算,
floatposition:absoluteposition:fixed
CSS : border调试大发
写的比较乱,凑合看看吧,♫♫∵
