盒模型与文本溢出

盒模型

border
border:边框宽度,边框风格,边框颜色
border-width border-style:solid(实线)/dashed(虚线)dotted(点划线)/double(双线)  border-color   
 
padding
调整子元素在父元素中的位置关系(写在父元素上) 

margin
margin:0  auto  块元素居中
*{margin:0  padding:0}
相邻兄弟元素在垂直方向上的margin值会出现融合,取大值
父子级元素都设置了margin,子级的margin会传递到父级。margin传递解决方法,父元素{overflow:hidden}

文本溢出

overflow:定义溢出元素内容区的内容会如何处理
{overflow:visible/hidden/scroll/auto/inherit;}
visible:默认,内容不会被修建,会出现在元素框之外
hidden:内容会被修剪,其余内容不可见
scroll:内容会被修剪,浏览器会显示滚动条,以便查看其余内容
auto:如果内容被修剪,浏览器会出现滚动条
inherit:从父元素继承overflow属性的值

white-space 处理元素内空白
normal:空白被忽略
pre:空白被浏览器保留
nowrap:文本不会换行直到遇到<br>
pre-wrap:保留空白符序列,正常换行
pre-line:合并空白符序列,保留换行符
inherit:规定应该从父元素继承white-space属性

text-overflow:文本溢出包含元素时,发生的事
clip:不现实省略符,简单裁切
ellipsis:党对象内文本溢出时,显示省略标记
实现产生省略号:
1.容器宽度:width:value
2.强制文本在一行内显示:white-space:nowrap;
3.溢出内容为隐藏:overflow:hidden;
4.溢出文本显示省略号:text-overflow:ellipsis;


*  .uu li{width:300px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;background:url(image/XX) no-repeat left 50%;padding-left:20px;}

猜你喜欢

转载自blog.csdn.net/qq_35254240/article/details/88963983
今日推荐