韩顺平_php从入门到精通_视频教程_第14讲_盒子模型经典应用②_作业布置_学习笔记_源代码图解_PPT文档整理

最新推荐文章于 2021-03-17 21:50:39 发布

wenximalong

最新推荐文章于 2021-03-17 21:50:39 发布

阅读量3.3k

点赞数 1

分类专栏： PHP

本文链接：https://blog.csdn.net/wenximalong/article/details/8184421

版权

PHP 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

文西马龙：http://blog.csdn.net/wenximalong/

盒子模型——理解

我们可以把盒子模型转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那些内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本事了；至于边界则说明盒子摆放的时候不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而css盒子具有弹性（自适应），里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

一般网页字体大小 12px
如果是用table布局，就要很多的tr，td
布局可以做，图片美化靠美工，各司其职

盒子模型——进一步理解
盒子模型远没有前面讲的那么简单，再看一个案例

这种布局在很多大型网站上都有使用，我们可以把它 看做是一个模式来套用，它的各个边距都可以调节，从而达到你想要的布局，非常实用。但是要做成这种效果，需要用到css另外一个核心知识——浮动，所以回头再做这个案例。
分析思路：把灰色边框认为是一个div，里面的红色大边框是一个ul比较好，搜索引擎也喜欢（用div不划算），里面的小框框人像是li，目前很多网站也这么用。
不要div套div，div又套div……搜素引擎也不喜欢最外面的div用来定位

li本身也是一个盒子

基本结构：
<div>
<ul>
<li><img src="" /></li>
</ul>
</div>

经验：做开发的时候，是用类选择器好，还是选择用id选择器呢？
先选择类选择器，选择类选择器有这样的 好处：
（1）一个元素可以有多个类选择器，当我有特殊要求的时候，有机会改
（2）类选择器的优先级，没有id选择器的高，当有特殊要求的时候，还有一个机会用id选择器把它修改
（3）ID选择器优先级太高了，一旦定下来，就没有修正的机会了，不可能用类选择器去覆盖id选择器，因为ID选择器最高。

一个模版（亲自动手操作， 观百遍，不如动手一遍）

素材

=========

demo2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="demo2.css" />
	</head>
	<body>
		<!--div在布局起到一个控制整个内容显示的位置 用来定位的-->
		<div class="div1">
			<!--ul在布局中作用是可以控制显示内容多少-->
			<ul class="faceul">
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
				<li><img src="m4.jpg" /></li>
			</ul>
		</div>
	</body>
</html>

demo2.css

.div1{
	width: 500px;
	height: 300px;
	border: 1px solid gray;
}

.faceul{
		width: 300px;
		height: 250px;
		border: 1px solid red;
		/*li和ul之间的，思考这里为什么用的内边距*/
		padding-left: 5px;
		/*ul和div之间的*/
		margin-left: 5px;
}

.faceul li{
	list-style-type: none;
	float: left; /*左浮动，这个知识点后面说*/
	width: 65px;
	height: 65px;
	border: 1px solid red;
	/*li之间的*/
	margin-right: 5px;
	margin-top: 5px;
}

.faceul li img{
	width: 60px;
	height: 60px;
	/*img与li之间的*/
	margin-left: 3px;
	margin-top: 3px;
}

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录

wenximalong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
韩顺平_php从入门到精通_视频教程_第14讲_盒子模型经典应用②_作业布置_学习笔记_源代码图解_PPT文档整理

文西马龙：http://blog.csdn.net/wenximalong/盒子模型——理解我们可以把盒子模型转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那些内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本事了；至于边界则说明盒子摆放的时候不能全部堆在一起，要留一定空隙保
复制链接

扫一扫

专栏目录