元素的高度和宽度
2020-12-09 本文已影响0人
我是Msorry
div中只有内联元素
内联元素的高度
div中一行内联元素由行高决定，多行是每一行的叠加；
padding和margin不影响内联元素的高度
- 字的高度由 fontsize*h(建议行高) 决定，
- div 的高度由 line-height 决定，和padding无关；当不设置 line-height时，div 中只有内联元素，line-height 的高度是行盒的高度
- 内联元素之外的空格不展示，内联元素之间有多个空格，只显示一个；如果想要显示多个空格，使用
叠加（no break space） - 不同字体的空格宽度不一样
- 回车的展示<pr>???
- 使用inline/inline-block一定会出现空格的问题，所以不要用inline，使用float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
ul{
margin:0;
padding:0;
list-style:none;
border:1px solid green;
}
ul > li{
float:left;
border:1px solid red;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div>
<ul class="clearfix">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>
</div>
</body>
</html>
- 内联元素会自动换行，但是当遇到一个超级长的单词时，不会自动换行，可以加连字符
-断开或使用word-break:break-all换行展示
内联元素的宽高
块级元素的宽高
div中只有块级元素
父元素的高度 H = 子元素的content的高度 + 子元素的padding + 子元素的border + （子元素的margin）
是否加margin取决于父子组件的margin是否合并
div中有内联元素和块级元素
div的高度由内部文档流元素的高度总和决定的
总结
- 宽高定死之后，如果文字变多，会出现奇怪的样式
- 宽高定死之后，如果用户缩小窗口大小，会出现滚动条，影响体验
- height 可以用 line-height 和 padding 来撑，这样写更灵活美观
- width: 100% 再加上 padding 就会撑出父元素之外，很难看
- 不写死宽高，页面就是响应式的
