本周学习情况总结

最新推荐文章于 2022-04-03 11:25:00 发布

对不起我眼睛进沙子了

最新推荐文章于 2022-04-03 11:25:00 发布

阅读量534

点赞数

本文链接：https://blog.csdn.net/u014584271/article/details/103321216

版权

那么汇报一下本周自己的情况吧,进入实验室之前自己没有接触过前端的内容,所以那一个周都是***拼命的学拼命的学***,为了赶进度可能学习质量并不强,而且因为没有进实验室之前那么急于求成,所以决定巩固一下自己的基础.回头去吧前面看过的重要内容

盒模型
定位

都复习了一遍,基础牢固摩天大楼才能屹立不倒.

盒模型

这个和我遇到的面试题有关系,李雷学长~~木子雨~~问我如何用盒子做一个三角形的时候我懵了,还以为自己面试没了,回去就了解了一下,最后自己的感悟就是盒模型的边框可以理解为一个梯形,让边框宽度等于盒子一半的长度,然后让content的高度宽度等于0,就相当于让梯形的窄边长度为零.这样就相当于做出了一个三角形.

<style type="text/css">
    div.fourColors
    {
        width:60px;
        height:60px;
        border-width:22px;
        border-style: solid;
        border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
    }
</style>

~~这里原本有一张图的,可是它消失了~~

定位

以下是position的四种属性

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。(一般元素的默认值)

relative(相对定位)

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。(用来帮助绝对定位建立新的参考系)

absolute(绝对定位)

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。(一般与相对定位搭配使用)

fixed(固定定位)

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。(网页上居于中位的弹窗广告)

这里是一条重要的规则

只要元素的position非static,它就会开始以离其最近的上一级非static元素为参考系.若没有会以窗口为参考系.在编写html时一定要注意好本定位元素跟随的元素,防止出现奇怪的情况!

那么让我来试一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h2{
            position: relative;
            left: 20px;
        }
        h4
        {
            position:absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <h1>这是本来的位置</h1>
    <h2>这是向右了20px的标题</h2>
    <h3>这是h4本来应该在的位置</h3>
    <h4>这是一个演示绝对定位依附于相对定位的h4</h4>
</body>
</html>

可以看到h2向右了20px
h4以窗口为坐标,依附在窗口的左上角(还有空白的原因是因为浏览器默认给了body一个margin,删掉即可)

对不起我眼睛进沙子了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本周学习情况总结

本周刚刚进入我们网协实验室,感觉一切都是新鲜的,学长学姐们也很和蔼,~~艳玲姐姐超级美!~~,哈哈哈哈,我也很希望能**快速融入**我们这个**大家庭**中.那么汇报一下本周自己的情况吧,进入实验室之前自己没有接触过前端的内容,所以那一个周都是拼命的学拼命的学,为了赶进度可能学习质量并不强,而且因为没有进实验室之前那么急于求成,所以决定巩固一下自己的基础.回头去吧前面看过的重要内容==盒模型=...
复制链接

扫一扫