CSS学习8[重点]

乌鸦不像写字台

于 2024-09-02 19:17:03 发布

阅读量271

点赞数 7

分类专栏： css学习文章标签： css 学习 css3

本文链接：https://blog.csdn.net/qq_54641174/article/details/141752737

版权

css学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

盒子模型

一、网页布局
二、盒子边框(box-border)
三、内边距(padding)
四、外边距(margin)
五、外边距合并

一、网页布局

CSS三大模块：盒子，浮动，定位。
盒子模型是把html中每个元素看成一个矩形的盒子。
每个矩形由元素内容、边距、边框组成。

二、盒子边框(box-border)

常用盒子边框设置

border: border-width || border-style || boder-color

设置border-style

none 无
solid 单实线，最为常用
dashed 虚线
dotted 点线
double 双实线

<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 200px;
				border-width: 1px; /*边框宽度*/
				border-color: pink; /*边框颜色*/
				border-style: solid; /*边框样式*/
				border-style: dashed;
				border-style: dotted;
			}
		</style>
	</head>
	<body>
	<div>我是一个盒子</div>
	</body>
</html>

<html>
	<head>
		<style>
			.user {
				border-width: 1px; /*边框宽度*/
				border-color: pink; /*边框颜色*/
				border-style: solid; /*边框样式*/
			}
			.nc {
				border-top-width: 1px; /*上边框宽度*/
				border-top-color: pink; /*上边框颜色*/
				border-top-style: solid; /*上边框样式*/
				border-bottom-width: 1px; /*下边框宽度*/
				border-bottom-color: pink; /*下边框颜色*/
				border-bottom-style: solid; /*下边框样式*/
			}
			.email {
				border-top: 1px solid red;
				border-bottom: 1px solid green;
			}
			.ph {
				border: 1px solid skyblue;
			}
		</style>
	</head>
	<body>
	用户名：<input type="text" class="user"/><br/><br/>
	昵 称：<input type="text" class="nc"/><br/><br/>
	邮 箱：<input type="text" class="email"/><br/><br/>
	手 机：<input type="text" class="ph"/><br/><br/>
	</body>
</html>

表格边框美化

table {border-collapse: collapse} 合并相邻边框

<html>
	<head>
		<style>
			table {
				width: 100px;
				height: 200px;
				border: 1px solid pink;
				border-collapse: collapse;
			}
			td {
				border: 1px solid pink;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>123</td>
				<td>345</td>
				<td>234</td>
			</tr>
		</table>
	</body>
</html>

圆角边框

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				border: 1px solid pink;
			}
			div:first-child {
				border-radius: 10px; /*设置角度，越大越圆*/
			}
			div:nth-child(2) {
				border-radius: 100px; /*取值取高宽的一半会变成圆⚪*/
				border-radius: 50%;
			}
			div:nth-child(3) {
				border-radius: 10px 40px; 
				/*左上和右下是10px，令两个是40*/
			}
			div:nth-child(4) {
				border-radius: 10px 40px 80px; 
				/*左上是10px，右上左下是40px 右下80px*/
			}
			div:nth-child(5) {
				border-radius: 10px 40px 80px 100px; 
				/*左上是10px，右上是40px 右下80px 左下是100px*/
			}
			div:nth-child(6) {
				border-radius: 50%; 
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div>10px</div>
		<div>50%或者100px</div>
		<div>10px 40px</div>
		<div>10px 40px 80px</div>
		<div>10px 40px 80px 100px</div>
		<div>胶囊</div>
	</body>
</html>

三、内边距(padding)

内边距：内容距离边框的距离

padding: 值；

 - 一个值，上下左右
 - 两个值，上下是1，左右是2；
 - 三个值，上是1，左右是2，下是3；
 - 四个值，上右下左，顺时针

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				padding-left: 10px;
				padding: 10px; /*只写一个值表示上下左右都是10px*/
			}
		</style>
	</head>
	<body>
		<div>内容</div>
	</body>
</html>

新浪导航栏

<html>
	<head>
		<style>
			nav {
				height: 41px;
				background-color: #FCFCFC;
				border-top: 3px solid orange;
				border-dottom: 1px solid #EDEEF0;
			}
			nav a {
				font-size: 14px;
				color: #4C4C4C;
				text-decoration: none;
				/*width: 100px;*/
				height: 41px;
				background-color: pink;
				/*链接是行内元素没有大小，需要转换*/
				padding: 0 15px;
				display: inline-block;
			}
			nav a:hover {
				ibackground-color: #eee;
			}
		</style>
	</head>
	<body>
	<nav>
		<a href="#">首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">网页导航</a>
	</nav>
	</body>
</html>

四、外边距(margin)

外边距：盒子外边距离

外边距可以实现盒子居中对齐，给左右设置auto。

必须是块级元素
盒子必须指定宽度（width）

.header { width: 900px; margin: 0 auto;}

<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				margin: 30px auto;
				padding: 4px;
			}
		</style>
	</head>
	<body>
	<div></div>
	</body>
</html>

居中和图片

<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				margin: 30px auto;/*盒子*/
				text-align: center;/*文字*/
			}
			section img {
				width: 200px;
				height: 100px;
				margin-top: 30px;
				margin-left: 50px; /*插入图片也是盒子*/
			}
			aside {
				width: 200px;
				height: 100px;
				border: 1px solid purple;
				background: #fff url(#.png) 0 0 no-repeat;
				background-size: 200px 100px;
			}
		</style>
	</head>
	<body>
	1. 文字水平居中 和盒子水平居中
	<div>文字</div>
	2. 插入图片和背景图片大小
	<section>
		<img src="#.png" height="689" width="123" alt="">
	</section>
	<aside>
	 123
	</aside>
	3. 一般情况下，背景图片适合做小图标
	</body>
</html>

清除元素内外边距

<html>
	<head>
		<style>
			* {
				padding: 0; /*清除内边距*/
				margin: 0; /*清除外边距*/
			}
		</style>
	</head>
	<body>
	</body>
</html>

注意：行内元素只有左右内外边距，没有上下内外边距。尽量不给行内元素指定上下的内外边距。

五、外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是两个之和，而是二者之中的较大者。
尽量避开即可。

<html>
	<head>
		<style>
			div:first-child {
				width: 300px;
				height: 300px;
				background-color: pink;
				margin-bottom: 50px;
			}
			div:last-child {
				width: 300px;
				height: 300px;
				background-color: pink;
				margin-bottom: 30px;
			}
		</style>
	</head>
	<div></div> <!--上下两个盒子的距离为50px-->
	<div></div>
	<body>
	</body>
</html>

嵌套块元素垂直外边距的合并
对于嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为二者中较大的值，即使父元素的上外边距为0，也会发生合并。
解决方案：

为父元素定义1像素的上边框或者上内边距。
为父元素添加overflow: hidden。

<html>
	<head>
		<style>
			.father {
				width: 300px;
				height: 300px;
				background-color: pink;
				/*border: 1px solid red; /*解决外边距合并问题*/
				/*padding: 1px;*/
				/*overflow: hidden; BFC*/
			}
			.son {
				width: 300px;
				height: 300px;
				background-color: pink;
				margin-top: 30px; /*只有这一行时，两个盒子一起距离30px，两个盒子top重叠*/
			}
		</style>
	</head>
	<div class="father"> 
		<div class="son"></div>
	</div>
	<body>
	</body>
</html>