牛腩视频总结（二）Div+Css与Table

怼烎@ 2022-08-23 03:43 119阅读 0赞

在以前布局中很多人会运用table来布局，table布局非常容易操作，但是它也有很大的不便，修改不灵活。由于CSS的普及，现在都不再采用table布局。而是运用DIV+CSS来制作网页。早期的网页，大多数是用table和内联样式组成，网页的结构和网站页的表现（样式）混合在一起，所以非常不好维护，并且重点不突出。垃圾代码多。但是如果用DIV+CSS制作网页，完全可以将网页的结构和表现（CSS）相分离。这样非常容易维护。这篇博客我为大家介绍的有关DIV+CSS和table的一些相关知识。

**一、DIV+CSS：**

**1.了解DIV+CSS**

DIV+CSS是web设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

**2.简单认识：**

CSS是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式。网页设计者必须掌握的技术之一。

CSS特点：实现网页内容与样式的分离

CSS选择器优先级：ID选择器>类选择器 >HTML选择器

先来看段css基本代码，以下内容将围绕这段代码展开：

<span style="font-size:18px;">*{
    
       margin:0;
    
       padding:0;
    
    }
    
    body {
    
       font-size:14px;
    
    }
    
    a:link,a:visited {
    
        /*鼠标未移上去的超链接的样式,超链接访问后的样式*/
    
       color:#000;
    
       text-decoration:none;
    
    }
    
    a:hover {
    
        /*鼠标移到超链接上的样式*/
    
       color:#00f;
    
       text-decoration:underline ;
    
    }
    
     .textcode {
    
        width:72px;
    
    }
    
    /*error出错页样式*/
    
    #errorfrm #error img {
    
        width:230px;
    
        float:right;
    
        margin-right :50px;
    
        margin-bottom :10px;
    
    }
    </span>

**从以上代码我们知道，**

**①css代码中有两种样式，一种.一种\#；**

.后面的内容是自己定义的，

.就用class=”abc”;\#就用id=”abc”

\#和.区别就是级别不一样，\#比.高，而且\#是唯一的，如果定义\#abc和.123这两个样式，那ID=”abc”在一个页面只能出现一次，而class=”123”可以在多个div里面调用，这就是id和class的区别！

**②盒子模型；**

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

**（附：盒子模型的结构）**

①内容（CONTENT）就是盒子里装的东西；

②填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

③边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

④填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；

**3.Div+CSS使用方法：**

①建立html文件和css文件

②编辑css文件，设定样式

③在Html文件的<head></head>中调用css文件

（附：调用CSS方法：

）

**二、与Table的区别**  
1.代码：div+css的代码比较简洁，不是很多，table的代码很繁琐，重复太多。div和table只不过是两个不同的HTML标签而已，talbe必须和tr td一起出现，而DIV可以单独出现，它没有任何默认样式。  
  
2.页面优化：div+css有利于搜索引擎的搜索，而table不利于是搜索引擎的搜索。  
3.打开速度：用div+css制作的网页，及时是网速非常卡的时候，当打开这个页面的时候这个页面会一点一点的出来的。而table做的页面，在网速非常卡时候，页面打开时开始会什么也没有，但是过了几分钟后，页面一下会全部打开。  
4.table的优点：开发时间短，兼容性比较不错

div和table只不过是两个不同的HTML标签而以，talbe必须和tr td一起出现，而DIV可以单独出现，它没有任何默认样式。

**三、总结：**

通过这段时间的学习，初步认识了css，在这里总结一下，屡一下思路，有什么理解不到位的地方，望各位大神斧正！

感谢您宝贵的时间！