Python全栈：CSS浮动

最新推荐文章于 2024-09-18 09:47:26 发布

超级D洋葱

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量206

点赞数

分类专栏：计算机科学文章标签： html css 定位

本文链接：https://blog.csdn.net/u014779536/article/details/113442531

版权

计算机科学专栏收录该内容

352 篇文章 3 订阅

订阅专栏

文章目录

1 DIV介绍

什么是DIV?

DIV是层叠样式表中的定位技术，全称 DIVision
有时把dⅳ称为图层，更多时候称为“块”

DV样式设置：

div大小、背景设置
div溢岀效果演示、换行、滚动条显示
div边框、轮廓设置
盒子模型

DIV设置大小、位置、背景：

DⅣV溢出处理效果：

超出div宽度高度的文字或图片进行隐藏处理
超出div宽度高度的文字或图片增加滚动条

overflow属性设置：

css边框

border-left、 border- right、 border-top、 border- bottom

设置div边框的边线宽度、颜色、虚线、实线等样式css属性

2 css轮廓：outline

作用：绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

提示：

还有dotted（点状轮廓）solid（实线）double（双线）等

使用示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="div1">
		百度一下，你就知道
	</div>
	<div id="div2">
	 <label>姓名：</label> <input type="text">
	</div>
</body>
</html>

index.css

#div1{
	background-color: yellow;
	width: 150px;
	height: 150px;
	top:150px;
	left:150px;
	position: absolute;
	overflow: hidden;
	/*outline: none;*/
	border-bottom: solid;
}

#div2{
	top:150px;
	left:350px;
	position: absolute;
	/*border-bottom: solid;*/
}

input{
	border:none;
	border-bottom: solid;
	outline: none;
}

3 css盒子模型

width、 height、 border、 margIn、 padding

作用：在进行页面布局时，盒子模型非常重要

box-sizing：

padding的距离由哪里产生

content-box：在宽度和高度之外绘制元素的内边距和边框

border-box：已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

div{
	width: 200px;
	height: 200px;
	overflow: hidden;
	margin-left: 20px;
}
#div1{
	background-color: yellow;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
#div2{
	background-color: blue;

}

*{
	/*margin:0px 0px 0px 0px;*/
	/*margin:0px 0px;*/
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right:0px;
}

4 css元素居中

将文字居中
- 就是让自己容器中的~元素居中，常作用于文本或图片等内联元素。
将对象居中
- 就是让容器中的~自己居中，常作用于块元素，且需要配合宽度使用。

5 css行级元素和块级元素

行级元素：

行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的
a标签、label、img、span等

块级元素：

块级元素在默认情况下，会独占一行
diⅳ、h标签、li、table等

6 定位机制

（标准）文档流、脱标流（float、position：absolute）

文档流特点：

空白折叠现象
高矮不齐底边对齐
自动换行，一行写满，换行写

7 css浮动

8 css 浮动包裹特性

9 清除浮动

为什么清除浮动？

为了父元素不会出现“高度崩塌”
如果强制规定外层容器的尺寸，则显得就不那么灵活了，高度就不能自动适应了
从某个元素开始，不在需要浮动效果了

#div1{
	background-color: red;
}
#div2{
	background-color: yellow;
	float: left;
	width: 200px;
	height: 200px;
}
#div3{
	background-color: blue;
	float: left;
	width: 220px;
	height: 220px;
}
#div4{
	background-color: black;
	width: 240px;
	height: 240px;
	/*clear: both;*/
}
#clearDiv::after{
	content: "";
	visibility: hidden;
	height: 0px;
	display: block;
	clear: both;
}
#clearDiv{
	zoom:1;
}