CSS+DIV——前端er必备基础

青旅半醒 2022-08-07 00:29 202阅读 0赞

B/S真是一个长见识的阶段，认识了很多前端必备的语言，随着时间的增加，本以为新闻发布系统中学到的那些我还不知道是什么的东西，会早已没了印象。但反而却更加深刻了，当时还不知道什么是CSS，就学会了写CSS。还不是什么是异步通信，就学会了用AjaX。当看到视频中的经典框架时，才发现，这不就是新闻发布系统中用到的CSS+DIV么！(⊙o⊙)哦，原来我早就会写了！

# 一、为什么是DIV+CSS #

看到这个搭配，我就在想为什么是这样的组合？Span不可以么！直接用HTML不可以么！一个很明确的目的：为了让数据内容与数据格式分离，方便前端er开发和维护。想象一下，一个内链样式表的语句

如果需要修改任何一个前端元素的样式，只要在样式表中去查找ID或类别名就可以了，这无疑大大提高了开发的效率。

还有一个问题就是为什么Span不可以？SPAN和DIV的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

# 二、一步步实现DIV+CSS #

## Step ONE：DIV分块 ##

首先要考虑到网页分为几个展示部分，Banner和Footer是必备的，其他内容的展示就是个性的问题了，分配给相应的DIV块。

![SouthEast][]

## Step Two：DIV定位——盒子模型 ##

用CSS样式表给DIV定位，就要用到我们的盒子模型了，如它的名字，盒子是用来存放东西的，可以任意的挪动。当然更专业的词，我们称它为浮动。下面就是盒子模型的展示，margin、border、padding。如果你可以联想到照相馆墙上的画面那就再好不过了！

![SouthEast 1][]

![SouthEast 2][]

## Step Three：整体架构 ##

以下的代码是第一张原型的诠释，是一个很基础的CSS+DIV的实现结果。其中用到了盒子浮动的效果，让content模块和link模块各自向左右两边浮动。

<html>
    <head>
    <style type="text/css">
    
    </style>
    <title>CSS排版</title><body>
    <div id="container">
    	<div id="banner">banner</div>
    	<div id="content">
    		<div class="blog">
    			<div class="date">date</div>
    			<div class="blogcontent">
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    			</div>
    		</div>
    		<div class="others">others</div>
    	</div>
    	<div id="links">
    		<div class="calendarhead">links<br>links<br>links<br>links</div>
    		<div class="calendartable">links<br>links<br>links<br>links</div>
    		<div class="side">links<br>links<br>links<br>links</div>
    		<div class="syndicate">links<br>links<br>links<br>links</div>
    		<div class="friends">links<br>links<br>links<br>links</div>
    	</div>
    	<div id="footer">footer</div>
    </div>
    </body>
    </html>

效果图如下：

![SouthEast 3][]

# 三、小结 #

在有了CSS与DIV组合之后，网页的加载变得轻松，因为数据与格式的分离，让维护更加容易。搜索效率和浏览效率的提高，会带来很好的用户体验。So...CSS+DIV构成的如此简洁的源代码前台，是我们学习前端开发的必备基础。

[SouthEast]: /images/20220805/e891e416c1b04ed1b29db7467b0d5803.png
[SouthEast 1]: /images/20220805/aa032648e3aa457ebeba5df24a03cf51.png
[SouthEast 2]: /images/20220805/337bf202b98b4ceb83be50c19d02419b.png
[SouthEast 3]: /images/20220805/fe8d76bf7bff49c5b6cf7c91fa6e3a97.png