CSS学习笔记----盒子模型

最新推荐文章于 2024-09-16 23:33:40 发布

庄公梦蝶

最新推荐文章于 2024-09-16 23:33:40 发布

阅读量622

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u014548034/article/details/40889753

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<strong><span style="font-size:18px;"><html>
	<head>
		<title>盒子模型测试</title>
		<style type="text/css">
		/*
		   *号表示所有标签，下面就是设置所有标签的padding和margin在一开始为0；这是写css的第一步。
		*/
			*{
				padding:0px;
				margin:0px;
			}
		/*padding是容器向内的间距控制，margin则是容器向外的间距控制，所以设置parent的padding相当于                 </span></strong>

<strong><span style="font-size:18px;">         设置</span><span style="font-size:18px;"> child的margin；margin和padding有三种基本表示方式：margin：50px；margin-left：50px；</span></strong>

<strong><span style="font-size:18px;">		  margin：50px 50px 50px 50px；（padding同理）表示从12点方向顺时针选择*/
		/*在浏览器中一开始显示时左上会不与顶端对齐，这时要设置body的margin为0px才会对齐*/
			/*body{
				border:8px solid orange;
				padding:0px;
				margin:0px;
				padding-left:70px;
			}*/
			#parent{
				border:4px solid red;
				width:400px;
				height:400px;
			}
			#child{
				border:2px solid blue;
				width:200px;
				height:200px;
				padding:50px;
				margin:50px;
			}
			/*在html中有些标签仅仅是用来设置文本的，例如a和span，在W3C标准中默认下是不能进行width等样式修饰的，所以对它们进行width设置是没意义的；需要通过设置display：block之后才可以使用。但对于IE而言，是不需要设置就可以直接起作用的。*/
			/*padding的兼容性问题：在设置了width和height的值之后，在IE中padding的值不会加进weight和height中，但在IE之外的浏览器中，padding的值会算进width和height中。所以不要用padding来控制对齐格式。*/
			#star{
				margin:50px;
			}
			#star span{
				border:solid 3px green;
				width:300px;
				height:50px;
				text-align:center;
				display:block;
			}
			#feng{
				padding:30px;
			}
			#feng li{
				border:5px solid blue;
				text-align:center;
				width:200px;
				height:40px;
				list-style:none;
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="child">天天风之恋</div>
		</div>
		<ul id="feng">
			<li>白日放歌须纵酒</li>
			<li>白日放歌须纵酒</li>
			<li>白日放歌须纵酒</li>
			<li>白日放歌须纵酒</li>
		</ul>
		<div id="star">
			<span>刘德华</span>
			<span>刘德华</span>
			<span>刘德华</span>
			<span>刘德华</span>
		</div>
	</body>
</html></span></strong>