欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

杂七杂八的总结

程序员文章站 2022-03-15 11:10:22
...
前言：最近打算快速复习一下之前学习的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表示有
③其他好像也没什么好说的了，就是看了一些博客，好像不太推荐使用这个框架的样子~

上一篇： PHP设计模式 注册表模式_PHP教程

下一篇： web实训项目遇到的 杂七杂八

推荐阅读