CSS笔记6、overflow、margin参数详细与伪对象选择器-CSDN博客

本文链接：https://blog.csdn.net/Z_phone/article/details/85081465

overflow

1、超出指定宽高范围

overflow：hidden；/*超出部分隐藏*/

overflow：auto； /*超出部分出现垂直滚动条*/

2、当父元素无法测定子元素高度

盒子里内容浮动起来，就脱离了标准流，这是父元素盒子无法精准检测内部内容有多高，父元素会变成一条线，无法撑开。

给父元素 overflow：hidden；，即可检测

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

margin参数详细

margin：10px；上下左右

margin：10px 10px；上下——左右

margin：10px 10px 10px；上——左右——下

margin：10px 10px 10px 10px；上——右——下——左

padding和margin的规则也是一样的

伪对象选择器

：before 在盒子前面插入（内部的前面）

：after 在盒子后面插入（内部的后面）

content是用来插入内容，如果没有内容，也必须写，内容为空。

</head>
<style type="text/css">
#shi:before{
	content:'if you never leave';
	background-color:#F00;
	}
#shi:after{
	content:'i will by the side untill the life end';
	background-color:#F00;
	}
</style>
<body>
<div id="shi">touch!touch!touch!</div>
</body>