盒子案例

最新推荐文章于 2022-07-31 10:31:07 发布

时松

最新推荐文章于 2022-07-31 10:31:07 发布

阅读量188

点赞数

分类专栏：基础文章标签：盒子案例

本文链接：https://blog.csdn.net/ice_yr/article/details/97903412

版权

本文深入探讨了CSS盒子模型，包括内容区域、边距、边框和填充的概念，通过实例解析了它们如何影响元素的布局。同时，分享了如何在实际项目中应用盒子模型进行精确布局的技巧。

摘要由CSDN通过智能技术生成

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {    /*清空默认的内外边距  几乎是我们写css必须要写的 */
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;   /*取消列表自带的小点 默认的列表样式*/
		}
		.searchpic {
			width: 238px;
			height: 294px;
			border: 1px solid #d9e0ee;
			border-top: 3px solid #ff8400;  /* 代码从上往下依次执行  所以这句话要放在border的下面*/
			margin: 100px; 
		}
		.searchpic h3 {
			height: 35px;
			line-height: 35px;   /*让行高等于高度，可以让文字垂直居中*/
			border-bottom: 1px solid #d9e0ee;
			font-size: 16px;
			font-weight: normal;  /*让粗体不变粗*/
			padding-left: 12px;   /*因为这个h3没有给宽度，继承父亲的宽度padd就不会撑开盒子了*/
		}
		.searchpic img {
			margin: 7px 0 0 8px;  /*上右下左*/
		}
		.searchpic ul li a {
			font-size: 12px;
			color: #666;
			text-decoration: none;  /* 取消下划线*/ 
		}
		.searchpic ul {
			margin-left: 8px;
		}
		.searchpic ul li {
			padding-left: 1