HTML-从零开始的学习过程（6）

最新推荐文章于 2023-09-07 10:30:00 发布

Dokey_L

最新推荐文章于 2023-09-07 10:30:00 发布

阅读量169

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Dokey_L/article/details/106179158

版权

CSS浮动

盒子模型
HTML元素都可以看作盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容，可以用来改变间距。

在这里插入图片描述
属性：

width；
height；
margin–外边距–对象和对象之间的距离；
border；
padding–内边距–内容和边框的距离；

CSS轮廓 – outline
属性：

dashed–虚线轮廓；
dotted–点状轮廓；
solid–实线；
double–双线；
none；

CSS边框 – border

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

举例：

<!DOCTYPE html>
<html>
<head>
	<title>css轮廓边框</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="class code1.css">
</head>
<body>
	<div id="div1">
		<label>姓名：</label><input type="text" name="">
	</div>
</body>
</html>

#div1 {
	top: 150px;
	left: 200px;
	position: absolute;
	color: red;
}
input{
	color: red;
	border: none;
	/*s设置边框底部为实线*/
	border-bottom: solid;
	/*去除文本框的边框效果*/
	outline: none;
}

效果：
在这里插入图片描述

溢出处理
超出div宽度和高度的文字或者图片进行隐藏处理；
超出div宽度和高度的文字或者图片增加滚动条；
属性–overflow：

visible–默认值，内容不会被修剪，会呈现在元素框之外；
hidden–超出的部分进行隐藏；
scroll–不论是否需要，都显示滚动条；
auto–按需显示滚动条以便查看其余的内容；

行内元素和块状元素的相互转换
定位机制：
（标准）文档流，脱标流（脱离标准文档流 – float、position：absolute）；
浮动 – float
属性：

left–元素向左浮动；
right–元素向右浮动；
none–默认值，不浮动。

脱标流
float包裹和崩塌
崩塌也可以叫做：崩溃、破坏，崩塌：父一级的块状元素的高度发生了破坏；
在没设定宽度之前，宽度是上一级父元素的宽度（占满一整行），高度随内容而撑开，设定宽度。
在这里插入图片描述
包裹

示例：

html
<!DOCTYPE html>
<html>
<head>
	<title>float包裹和崩塌</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="class code5.css">
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>

	<!-- 包裹 -->
	<div id="div3">
		<img src="1.jpg">
		<p>图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片</p>
	</div>
</body>
</html>

css
div{
	/*在未添加内容或者设置高度时，显示的效果就是一条线，就是崩塌*/
	border: 1px solid black;
	/*background-color: red;*/
}

#div1{
	background-color: yellow;
	width: 500px;
}

#div2{
	background-color: blue;
/*	在没设定宽度前，宽度是上一级元素（父元素）的宽度
	高度随内容大小而展现*/
	width: 300px;
	height: 200px;
}

#div3{
	background-color: red;
	float: left;

}
img{
	/*图片下多出部分的处理*/
	/*设置图片垂直对齐方式为底边对齐，可以将图片行级元素与父元素底边对齐*/
	vertical-align: bottom;
	/*为实现文字环绕图片的效果，使图片浮动，从而实现文字环绕*/
	float: left;
}
p{
	/*使文字与图片顶层平行*/
	margin: 0;
	/*通过改变行间距，是文字与图片更贴近*/
	line-height: 1.1em;
	background-color: #ffffff;
}

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

.cleardiv::after{
	/*设置内容为空，但content框架是存在的*/
	content: "";
	/*设置为隐藏*/
	visibility: hidden;
	height: 0px;
	/*显示为块状元素*/
	display: block;
	/*最后进行清除*/
	clear: both;
}

.cleardiv{
	clear: both;
}

/*对于有些浏览器不能实现清除浮动的效果*/
#cleatdiv{
	/*ie浏览器专用，用于解决外边距重叠，或者浮动不能清除*/
	/*原理:使页面里的对象重新加载,重新计算*/
	zoom:1;
}

Dokey_L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-从零开始的学习过程（6）

CSS浮动盒子模型HTML元素都可以看作盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容，可以用来改变间距。属性：width；height；margin–外边距–对象和对象之间的距离；border；padding–内边距–内容和边框的距离；CSS轮廓 – outline属性：dashed–虚线轮廓；dotted–点状轮廓；solid–实线；double–双线；none；CSS边框 – borderborder-leftborder-right
复制链接

扫一扫