4、CSSoverflow、margin、伪对象选择器和定位属性

最新推荐文章于 2023-01-02 21:27:42 发布

-木化十จุ๊บ

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量292

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/AuhuAo/article/details/88782703

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

（一）overflow

对超出部分进行处理

处理方法一：

处理方法二：

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

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

解决：给父元素自动 overflow：hidden；这个属性可以触发hasilayout属性（是否是布局）就可以精确检测内部的高度，盒子就会自动撑开了。

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

例：

可以将这些值合并一起写

页面属性：ctrl+J ——>吸取图片颜色为背景颜色

图片居中

part1的txet-align:center
img是一个盒子，盒子的左自动和右自动是居中

（二）margin

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

padding的规则与margin一样

注：在项目中，拼版用div+css加table的方式拼版，如果拼的是展示性页面用div+css，如果显示的是数据，用table，后台一般也都用table

（三）伪类选择器

：before 在盒子前面插入（内部的前面）
：after 在盒子后面插入（内部的后面）
content是用来插入内容，如果没有内容，也必须要写，内容是空。

（四）定位属性（position）

absolute：绝对定位

relative：相对定位

实现以父级元素左上角为原点（父级相对，子级绝对）

fixed：固定（固定在页面的某一个地方）

static：静态（默认的定位）

以上定位都需要下面的属性配合：

top
bottom
left
right

例题：

<style type="text/css">
body{
	background-color:#9F9;
}
#taiji{
	width:0px;
	height:400px;
	border-left:200px solid #000;
	border-right:200px solid #FFF;
	border-radius:100%;
	margin:auto;
}
#taiji:before{
	content:'';
	display:block;
	width:100px;
	height:100px;
	border:50px solid #000;
	background-color:#FFF;
	border-radius:100%;
	margin-left:-100px;
}
#taiji:after{
	content:'';
	display:block;
	width:100px;
	height:100px;
	border:50px solid #FFF;
	background-color:#000;
	border-radius:100%;
	margin-left:-100px;
}
</style>
</head>
<body>
<div id="taiji"></div>
</body>