杂七杂八的总结

来源：互联网发布：程序员人才需求编辑：程序博客网时间：2024/06/06 12:56

前言：最近打算快速复习一下之前学习的html和css的相关内容，把百度前端学院的题目做完。毕竟基础最重要，不要急躁~

在介绍盒子模型之前，想先给自己强调一下div和span的区别。虽然听起来很简单，但是页面复杂了，我就经常忘记了span是一个内联元素。也就是说，div是占一整行的，而span则是行内元素，值得注意的还有原始span是不可以设置宽高的（需要先使用display属性转化）。举个栗子:

<html><head>    <title>div和span</title>    <meta charset="utf-8">    <style type="text/css">        div{            background-color: red;        }        span{            background-color: green;        }    </style></head><body><div>123</div><div>123</div><div>123</div><span>123</span><span>123</span><span>123</span></body></html>

这里写图片描述

这里结合display这个属性再赘述几句：
display有三个值：none，block，inline，inline-block。
case①：给div添加display：inline，也就是把块元素改成内联元素了：

div{            background-color: red;            display: inline;        }

这里写图片描述

case②：给span添加display：block，也就是把内联元素变成块元素了（就可以改变宽高了）：

span{            background-color: green;            display: block;        }

这里写图片描述

case③：给span添加display：inline-block（可以改变宽高，但是不会独占一行）：

span{            background-color: green;            width: 50px;            display: inline-block;        }

这里写图片描述

废话不多说了，下面开始说一下盒子模型：
这里只说明标准盒子模型，也就是w3c盒子模型。加了DOCTYPE的就是标准盒子

这里写图片描述

这个图片很清楚的说明了盒子模型，但是真的要写代码的时候，有时候长和宽还是会算晕了。。。
针对上图，height和width都是说的content，所以盒子的实际大小为：
宽：margin-left+border-left+padding-left+width（content的）+padding-right+border-right+margin-right。
高：margin-top+border-top+padding-top+height（content的）+padding-bottom+border-bottom+margin-bottom
所以有时候你觉得宽高算的刚刚好，但是为什么有一个div会下移呢？可能就是你忘记考虑margin或者padding或者border的值了。。。。

最后再总结一下今天学的框架：frameset。之前写静态页面的布局从来都是用浮动或者定位，还没有怎么用过这个，晕死。。。

<frameset rows="20%,60%,20%" frameborder='1' border="1">    <frame src="top.html" name='top'>    <frameset cols="30%,70%">        <frame src="left.html" name='left'>         <frame src="right.html" name='right'>    </frameset>    <frame src="bottom.html" name='bottom'></frameset>

注意点：
①有木有发现这段代码没有body标签了~~也就是说写了frameset这个标签就不要在嵌套一个body标签了，加了body就没有用了噶。
②frameborder的意思是有无边界线，0表示没有，1表示有
③其他好像也没什么好说的了，就是看了一些博客，好像不太推荐使用这个框架的样子~

阅读全文

0 0