css基础（二）

最新推荐文章于 2024-10-03 19:13:18 发布

大狗晋

最新推荐文章于 2024-10-03 19:13:18 发布

阅读量181

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/weixin_52957373/article/details/125991483

版权

本文详细介绍了CSS盒子模型，包括margin、border、padding和content的属性及用法，并展示了如何通过box-sizing改变盒子大小。同时，文章讨论了margin的叠加与传递问题，以及自适应布局的实现。此外，还涵盖了透明度的调整方法，如opacity和rgba，并讲解了不同类型的CSS鼠标手势。最后，文章深入探讨了浮动(float)和清除浮动的方法，以及它们在文档流中的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css盒子模型

组成：margin（最外层盒子与盒子之间的距离）、border（外边框）、padding（填充物）、content（盒内物品，内容）
margin属性： px（像素）（可以为负值）
padding：内边距，px。和border一样也可以单独设置上下左右的边距（不能出现负值）
padding-left、padding-right、padding-top、padding-bottom
content： width 和height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;height: 200px;
            border: solid blue;
            padding: 10px;
        }
    </style>
</head>
<body>
<div>盒子模型</div>
</body>
</html>

在这里插入图片描述

原理图：
在这里插入图片描述
box-sizing：改变盒子大小
默认值为;content-box: width、height，修饰的是content区域
border-box：修饰的内容为content padding border
margin叠加问题：
当margin 同时设置了上下值（px）,则会取其中较大的值来作为叠加值
比如有两个盒子模型，上面的盒子下margin区域设置为50px，下面盒子的上margin区域为100px，则两个盒子之间的间距就为100px；
（解决方法：只给上下margin中的其中一个设置值）
margin传递问题：
当我们使用嵌套结构的时候，margin-top区域需要进行注意改动

margin扩展：
自适应：仅仅针对左右方向，上下方向不可以，
格式：margin-left: auto; margin-right: auto; 当我们同时设置了左右两个属性的时候盒子为居中效果
当容器内再嵌套一个容器的时候，可以不设置width，内层容器会自动计算大小。

标签分类：

按类型：
块标签：block：div、p、ul、li、h1……
独占一行、且区域是个举行
内联标签：inline：span、a、em、strong、img……
内联块：inline-block：input、select……
（布局一般使用块标签，修饰文本一般使用内联标签）

标签的嵌套规范：

ul li
dl dt dd
块标签能够嵌套内联标签
块可以嵌套块，但有一个特殊情况 p标签不能嵌套div标签
内联不能嵌套块，特殊的a标签可以嵌套div

溢出隐藏

  overflow：
  默认值为visible
  hidden：将多余的剪裁掉
  scroll：在x轴和y轴上加入滚轮

透明度与手势

opacity： 0（透明，占用一个块的空间）~1（不透明）（0.5为半透明）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;height: 200px;
                background-color: blue;opacity: 0.5;
        }
    </style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>

opacity的值为0.5 ，所以块为半透明状态，其块中的内容也会随块一起透明
在这里插入图片描述
rgba调整透明度
rgba相对于opacity有一个好处就是我们可以指定透明的颜色从而不影响容器内部的其他内容
还是以上面的代码为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;height: 200px;
                background-color: blue;rgba(255,0,0,0.5)
        }
    </style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>

以上改写的代码仅仅改变了红色背景的透明度，而未改变容器内文字的透明度
在这里插入图片描述

手势（鼠标的样式）

cursor：默认值default （箭头）
其他样式：help，pointer……
也可以自定义样式，图片必须以 .cur .ico 为后缀
例子：cursor: url(./ .cur);

最大和最小宽高

min-width； max-width；
min-height；max-height；
最小高和宽，当容器内即使为空，容器大小会保持在最小的情况。当内容大于最小高度且小于最大高度时，容器会自适应大小，保持一个合理的空间

css重置样式：

当我们使用某一标签时，这个标签可能有其自己原有的样式，原有样式不能满足需求时需要我们来重置他的样式来满足需求。

float浮动

文档流：
指元素在排版布局的过程中，元素会自动从左到右，从上到下的流式排列。添加浮动会脱离文档流，对后续元素产生影响。
什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：

选择器 {
	float: 属性值;
}

属性值	作用
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认）

清除浮动

clear: left | right | both

不希望元素受浮动元素影响时，可以清除浮动。

<head>
<style>
	.left, 
	.right {
		float: left;
		width: 200px;
		height: 200px;
		background-color: blue;
	}

	.test {
		width: 500px;
		height: 200px;
		background-color: red;
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="left"></div>
		<div class="right"></div>
		<!-- 清除浮动 -->
		<div style="clear: both"></div>
    </div>
    <div class="test"></div>
</body>

第二种：父元素使用overflow: hidden

<head>
<style>
	.left, 
	.right {
		float: left;
		width: 200px;
		height: 200px;
		background-color: blue;
	}

	.test {
		width: 500px;
		height: 200px;
		background-color: red;
	}

	/* 清除浮动 */
	.parent {
		overflow: hidden;
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="left"></div>
		<div class="right"></div>
    </div>
    <div class="test"></div>
</body>

第三种：伪元素选择器:after

<head>
<style>
	.left, 
	.right {
		float: left;
		width: 200px;
		height: 200px;
		background-color: blue;
	}

	.test {
		width: 500px;
		height: 200px;
		background-color: red;
	}

	/* 清除浮动 */
	.parent::after {
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	/* IE6/7 清除浮动 */
	.parent {
		*zoom: 1;
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="left"></div>
		<div class="right"></div>
    </div>
    <div class="test"></div>
</body>

第四种：伪元素选择器:before + after

<head>
<style>
	.left, 
	.right {
		float: left;
		width: 200px;
		height: 200px;
		background-color: blue;
	}

	.test {
		width: 500px;
		height: 200px;
		background-color: red;
	}

	/* 清除浮动 */
	.parent::before, 
	.parent::after {
		content: "";
		display: table;
	}
	.parent::after {
		clear: both;
	}
	/* IE6/7 清除浮动 */
	.parent {
		*zoom: 1;
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="left"></div>
		<div class="right"></div>
    </div>
    <div class="test"></div>
</body>