CSS常用样式属性（下）

outline
设置外边框,与border不同的是，outline设置的边框不占用空间，会自动浮起，text文本会有一个默认的border与outline边框

<body>	
	<input/>
	<style>
	   input{
	    border-top:none;
	    border-right:none;
	    border-left:none;
	    outline: none;
	   }
	</style>
</body>

在这里插入图片描述

**over-flow **
内容溢出

<p style="height: 60px; width: 200px; border: black 1px solid; overflow: auto; ">
   asdjgasdasjdvkasjghdvshuagduasgdasiugdbasugdbhusdbasyuhkdagsk反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶yudgasyudgasyuuyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

英文超出宽度时，不会自动换行，所以存在横滚动条
在这里插入图片描述

visibility
元素是否可见

display：none会让元素隐藏，失去本来该占用的空间

而visibility会让元素不可见，但还是占用着本来该占用的空间

vertical-align
垂直居中

<span>Hello</span><img src="img/png-0709.png" />

现在是这样的
在这里插入图片描述

我们给文字垂直居中，需要在img标签中添加vertical-align属性，这样会拉高本文的基线

<span>Hello</span><img src="img/png-0709.png" style="vertical-align: middle;"/>

在这里插入图片描述
外边距合并

<div style="border: black 1px solid; margin-bottom: 100px;">123</div>
<div style="border: black 1px solid; margin-top: 100px;">456</div>

上下之间的外边距无法合并，取最大值，只有左右之间的外边距可以合并：

<b style="border: black 1px solid; margin-right: 100px;">123</b><i style="border: black 1px solid; margin-left: 100px;">456</i>

如图：
在这里插入图片描述

S_Tian

发布了101 篇原创文章 · 获赞 3 · 访问量 2261

私信关注

CSS常用样式属性（下）

猜你喜欢