CSS-盒模型与文本溢出笔记
程序员文章站
2022-05-03 11:50:55
注意点: 文本居中: text-align:center;文本左右居中 line-heigh:30px; 等于容器高度时,单行文本上下居中 margin:0 auto; 浏览器居中 清除margin和padding值: 某些元素会自带margin和padding,例如 h1 标签,使用时不方便位置计 ......
注意点:
文本居中: text-align:center;文本左右居中
line-heigh:30px; 等于容器高度时,单行文本上下居中
margin:0 auto; 浏览器居中
清除margin和padding值:
某些元素会自带margin和padding,例如 h1 标签,使用时不方便位置计算,需要清除margin和padding
* {margin:0; padding:0;}
相邻margin融合
例如:上面的块元素margin-bottom:10px;下面的块元素margin-top:20px;
则他俩之间显示距离为20px,只显示最大的距离。
子级的margin值会传递给父
子级设置的margin生效的在父级上
解决方法:父级添加:overflow:hidden
文本溢出处理
{overflow:visible/hidden/scroll/auto/inherit}
visible:默认值,超过后元素框外显示
hidden:超出元素框后隐藏
scroll:出现滚动条
auto:如果内容被修建,则出现滚动条
inherit:从父元素继承overfolw属性
{text-overflow:clip/ellipsis}
clip:超出后不显示省略号,进行裁剪
ellipsis:显示省略号
white-pace:nowrap;强制文本在一行显示
推荐阅读