杂七杂八的总结

最新推荐文章于 2024-07-14 10:34:53 发布

sunyueru

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量267

点赞数

分类专栏：学习笔记文章标签： html 前端 css

本文链接：https://blog.csdn.net/sunyueru/article/details/74503129

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

sunyueru

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
杂七杂八的总结

前言：最近打算快速复习一下之前学习的html和css的相关内容，把百度前端学院的题目做完。毕竟基础最重要，不要急躁~今天就是总结一下盒子模型和frameset吧。在介绍盒子模型之前，想先给自己强调一下div和span的区别。虽然听起来很简单，但是页面复杂了，我就经常忘记了span是一个内联元素。也就是说，div是占一整行的，而span则是行内元素，值得注意的还有原始span是不可以设置宽高的（需要
复制链接

扫一扫