Num.05-CSS基础

最新推荐文章于 2024-06-10 18:12:05 发布

码仆的逆袭

最新推荐文章于 2024-06-10 18:12:05 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/qq_34191426/article/details/99735739

版权

盒子边框（border）

border-width：边框宽度
border-color：边框颜色
border-style：边框样式

html提供了五种样式：

none	没有边框（默认值）
solid	边框为单实线（常用）
dashed	边框为虚线
dotted	边框为点线
double	边框为双实线

综合性写法：
border: 边框宽度边框样式边框颜色
举例：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input {
				border: 0px;
			}
			.user {
				border-width: 1px;
				border-color: pink;
				border-style: solid;
			}
			.user {
				border: 1px solid green;
			}
			.nc {
				border-top-width: 1px;
				border-top-color: chocolate;
				border-top-style: solid;
				border-bottom-width: 1px;
				border-bottom-color: chocolate;
				border-bottom-style: solid;
			}
			.email {
				border-top:1px solid red;
				border-bottom: 1px solid green;
			}
		</style>
	</head>
	<body>
		用户名：<input type="text" class="user" /><br /> <br />
		昵　称：<input type="text" class="nc" /><br /><br />
		邮　箱：<input type="email" class="email" /><br /><br />
	</body>

展现样式：
在这里插入图片描述

表格的细线边框

在table标签中使用border-collapse:collapse;样式，可以合并相邻边框
不使用border-collapse:collapse;的效果：
在这里插入图片描述
使用border-collapse:collapse;的效果：

源码：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				border: 1px solid red;
				width: 700px;
				height: 300px;
				border-collapse: collapse;
			}
			td {
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			...
		</table>
	</body>

在不使用的情况下，边框宽度会因为重合变成2px，使用后边框宽度合并还是1px

圆角边框

设置属性：border-radius
举例：
取一个div盒子，宽度200px，高度200px，红色边框细实线1px

	div {
		width: 200px;
		height: 200px;
		border: 1px solid red;
	}

在这里插入图片描述

设置4个角的弧度为10px

border-radius: 10px;

在这里插入图片描述

设置圆

方法1：按照第一个方案设计，然后观察效果，在浏览器中按下f12键，调试border-radius的值，直到变成圆
在这里插入图片描述
方法二：数学逻辑，在正方形的四个边各取一点，画出来的一定是圆，所以他的弧度一定是边框的一半

border-radius: 50%;

在这里插入图片描述
3. 设置两个值

border-radius: 10px 40px;

在这里插入图片描述
按照对角线，左上角和右下角为10px，右上角和左下角为40px
4. 设置三个值

border-radius: 10px 40px 80px;

在这里插入图片描述
左上角为10px，右上角和左下角为40px，右下角为80px
5. 设置四个值

border-radius: 10px 40px 80px 100px;

在这里插入图片描述
从左上角起按照顺时针依次给予值

内边距(padding)

内边距就是内容跟边框的距离
设置内边距的属性padding、padding-left、padding-top、padding-right、padding-bottom

padding如果值只有一个，则表示上下左右都是这个值
padding如果值有两个，表示上下为第一个值，左右为第二个值
padding如果值有三个，表示上为第一个值，左右为第二个值，下为第三个值
padding如果值有四个，表示从上开始，顺时针依次为值

举例：

	padding: 20px; 					/*上下左右都是20px*/
	padding: 10px 30px;				/*上下为10px，左右为30px */
	padding: 10px 30px 50px;		/*上为10px，左右为30px，下为50px*/
	padding: 10px 20px 30px 40px;	/*上为10px，右为20px，下为30px，左为40px*/

注意： 行内元素的标签只支持左右内边距，不支持上下外边距

案例

做新浪网页导航栏
在这里插入图片描述

使用工具

fireworks

使用fireworks打开此图

使用矩形工具测量导航栏高度
在这里插入图片描述

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				height: 41px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

使用矩形工具和滴管工具测量上边框和下边框的颜色和边宽
```
border-top: 2px solid #FF8500;
border-bottom: 1px solid #EDEEF0;
```
使用滴管工具测量导航栏的背景颜色
```
	background-color: #FCFCFC;
```
使用滴管工具和矩形工具测量链接文字的颜色和大小
```
	div a{
		font-size: 14px;
		color: #4C4C4C;
	}
```
将a标签转为行内块标签，高度为导航栏的标签高度
```
	display: inline-block;
	height: 41px;
```

设置文字居中，并且删除链接下划线

	line-height: 41px;
	text-decoration: none;

使用矩形工具测量每个链接标签相互之间的距离
```
	padding: 0 14px;
```
鼠标悬停，背景颜色和字体颜色的改变，使用滴管测量
```
div a:hover {
	background-color: #EDEEF0;
	color: #FF8400;
}
```

做成效果显示：
在这里插入图片描述

外边距

设置外边距的属性：
注意： 行内元素只有左右外边距，没有上下外边距的，设置上下是不起效果的

margin ：4个值：上右下左 2个值：上下左右 1个值，四个方向都是
margin-left
margin-right
margin-top
margin-bottom

外边距实现盒子居中

让一个盒子实现居中，需要满足两个条件

必须是块级元素
盒子必须指定宽度（width）
然后左右边距设置为auto，就可以使块级元素水平居中（不能设置上下为auto，否则无效）

外边距合并问题

水平盒子之间的外边距关系

水平盒子之间的外边距是相加的，也就是说另一个盒子的外边距是相对于下面这个线做参照物
在这里插入图片描述

垂直盒子之间的外边距关系

当两个相邻的盒子指定外边距时，两个盒子间的外边距以最大的那个外边距为主
例如：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			div:first-child {
				margin-bottom: 100px;
			}
			div:last-child {
				margin-bottom: 50px;
			}
		</style>
	</head>
	<body>
		<div>飒飒大所多</div>
		<div>ajsjax</div>
	</body>

这两个盒子之间的边距是100px

嵌套盒子的外边距关系

当两个盒子嵌套时，指定内盒子的外边距，会导致出现如下情况：
在这里插入图片描述
外面的盒子和里面的盒子一起往下移动了，这不是我们所需要的效果，我们需要的是内盒与外盒之间产生边距，外盒保持不动
解决办法：

给外盒添加边框，注意是给外盒，给内盒添加是没用的
给外盒添加1px的内边距
给外盒添加overflow:hidden

当给父级盒子加内边距，子级盒子加外边距，那他们之间的边距是相加的，也就是说子级盒子的外边距的参照物是下面这根线，而不是我们经常误以为的border
在这里插入图片描述

清除元素的默认内外边框

不同的浏览器会默认有外边距和内边距的，比如下面谷歌浏览器有默认的外边距，但没有内边距
在这里插入图片描述
为了方便控制网页中的元素，制作网页时，会使用如下代码清除默认的内外边距

* {
	padding:0;
	margin:0;
}

注意： 行内元素是只有左右外边距，没有上下外边距的。

总结

文字水平居中和盒子水平居中的区别

设置文字水平居中：

	text-align:center;

设置盒子水平居中：

	margin:10px auto;

插入图片和背景图片的区别

插入图片的标签：img（块标签）
设置插入图片的大小与设置块标签的大小方式一样，img具备块标签的所有属性，可以修改外边距
背景图片：属性background
修改背景图片的大小用的是background-size，调整位置用background-position

一般情况下背景图片适合做一些小图标，logo，插入图片一般用于产品展示，做动画，显示效果等

盒子的计算尺寸

在这里插入图片描述
如上图所示：
盒子的实际宽度 = width + padding2+border2
盒子的实际高度=height + padding2+border2

demo：
在这里插入图片描述
经测量，新浪的新闻边框高为33px，宽为74px，新闻距左边框15px，请做出这个新闻的盒子模型

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 57px;
				height:33px;
				line-height: 33px;
				border: 1px solid #c1c1c1;
				margin: 200px;
				font-size: 16px;
				color: #666666;
				border-radius: 5px 0 0 5px;
				padding-left: 15px;
			}
			/*
			盒子实际的宽度 = content width + padding + border = 57 + 15*2 + 1*2 = 89 
			*/
		</style>
	</head>
	<body>
		<div>新闻</div>
	</body>

总结：

宽度属性 width 和高度属性 height 仅适用于块级元素，对于行内元素是无效的（ img 标签和 input 标签除外）
计算盒子模型空间高度时，应该考虑上下两个盒子垂直外边距合并的情况

如果一个盒子没有给定宽度或高度或者继承了父亲的宽度或高度的话，则 padding 不会影响本盒子对应的宽度或高度的大小

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div {
			height: 30px;
			line-height: 30px;
			border: 1px solid red;
			padding-left: 20px;
		}
		nav {
			width: 500px;
			height: 50px;
			border: 1px solid red;
		}
		/*p没有设置宽度，默认继承父标签的宽度*/
		p {
			height: 20px;
			line-height: 20px;
			background-color: #9ACD32;
			padding-left: 30px;
		}
		
	</style>
</head>
<body>
	<div>奔跑吧，兄弟</div>
	<br />
	<nav>
		<p>爸爸去哪了</p>
	</nav>
</body>

新浪探索趣图案例

在这里插入图片描述

		<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* { /*清空默认的内边距，几乎是我们写css必须要写的*/
			margin:0;
			padding:0;
		}
		.searchPic {
			width:238px;
			height: 297px;
			border: 1px solid #D9E0EE;
			/*这个语句必须写在上面语句的下方，因为CSS是顺序执行的*/
			border-top: 3px solid #FF8400;
			margin: 100px;
		}
		.searchPic h3{
			height: 35px;
			border-bottom: 1px solid #D9E0EE;
			font-size: 16px;
			line-height: 35px;
			font-weight: normal;	/*让粗体不再粗*/
			/*margin-left: 12px;不合适*/
			padding-left: 12px;	/*没有给h3指定宽度，继承的是div的宽度，不会撑开盒子的*/
		}
		.searchPic img{
			width: 218px;
			height: 160px;
			margin: 7px 0 0 8px; /*上 右 下 左*/
			
		}
		ul {
			list-style: none; /*取消列表自带的小点*/
		}
		.searchPic ul li{
			height: 24px;
		}
		.searchPic ul li a{
			line-height: 24px;
			font-size: 12px;
			color: #666666;
			text-decoration: none; /*取消链接的下划线*/
			margin-left:7px ;
		}
		.searchPic .num1{
			border-bottom: 1px solid #D9E0EE;	
		}

		.searchPic .num2{
			padding-top: 3px;
		}
		.pic {
			width: 3px;
			height: 3px;
			background-color: #FF8400;
			margin-top: 10px;	
			margin-left: 8px;
			float: left;	/*设置块级元素不换行*/
			
		}
		.searchPic ul li a:hover{
			text-decoration: underline; /*添加下划线*/
			color: #FF8400;
		}
		</style>
	</head>
	<body>
		<div class="searchPic">
			<h3>探索趣图</h3>
			<img src="img/panda.gif" />
			<ul class="num1">
				<li><div class="pic"></div><a href="http://gif.sina.com.cn/">不给我新鲜竹子我就啃胡萝卜</a></li>
			</ul>
			
			<ul class="num2">
				<li><div class="pic"></div><a href="https://tech.sina.com.cn/d/v/2019-10-14/doc-iicezzrr2053844.shtml">麻麻说：你该穿秋裤了</a></li>
				
				<li><div class="pic"></div><a href="https://tech.sina.com.cn/d/s/2019-10-14/doc-iicezzrr2055367.shtml">NASA竟打算让宇航员在太空吃大便？</a></li>
			</ul>
		</div>
	</body>

盒子模型布局稳定性

按照稳定性依次考虑使用下列属性

	width > padding > margin

原因

margin 会有外边距合并还有ie6下面margin加倍的bug，所以最后使用

padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用

width 没有问题，经常使用宽度剩余法，高度剩余法来做。

CSS3新特性

使用属性 box-sizing 可以指定盒子模型

	div:first-child{
		width:200px;
		height:200px;
		background-color: pink;
		box-sizing: content-box;  /*默认值*/
		padding: 10px;
		border: 5px solid red;
		/*盒子模型空间大小为:width:320px  height 230px*/
	}
		
	div:last-child{
		width:200px;
		height:200px;
		background-color: pink;
		box-sizing: border-box;  /*设置盒子模型使盒子大小不会被撑大*/
		padding: 10px;
		border: 5px solid red;
		/*盒子模型空间大小为:width:200px  height 200px*/
	}

盒子阴影

语法格式：

	box-shadow: 水平阴影 垂直阴影 模糊阴影 阴影尺寸 阴影颜色 内/外阴影;

值	描述
h-shadow	必须。水平阴影的位置，允许负值
v-shadow	必须。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影尺寸
color	可选。阴影颜色
inset	可选。将外部阴影（outset）改为内部阴影

保存以下图片，做demo2
在这里插入图片描述

/*demo1*/
div {
	width: 200px;
	height: 200px;
	border: 10px solid red;
	box-shadow: 5px 5px 3px 4px rgba(0,0,0,.4) inset; /*默认外阴影,但不能写outset*/
}
/*demo2 水晶图片*/
div {
	width: 500px;
	height: 500px;
	background-color: pink;
	margin: 100px;
	background: url(img/shui.jpg) 0 0 no-repeat;
	border-radius: 50%;
	box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.4) inset,5px 4px 10px rgba(0,0,0,0.3);
}