南阳-140594 8月1-2日作业 - 学习心得

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 南阳-140594 8月1-2日作业

博主信息

博文 5

粉丝 0

访问量 3627

专题推荐

更多>

1. 盒模型的大小与位置的设置与计算

位置调整
使用margin-top:50px; 调整块的上边距，使用margin-left:50px;调整块的左边距。
效果如图：

大小计算

<style>
      .container{
          width:300px;
          height:200px;
          background-color:lightgreen;
          /* 位置调整 */
          margin-top:10px;
          margin-left:10px;
          /* 大小与计算 */
          border:5px solid red;
          padding:10px;
          /* 此时该块的大小为  内边距10*2+宽300+边框5*2=330 经QQ截图工具测量计算正确 */
      }
  </style>
</head>
<body>
  <div class="container">盒模型大小与位置</div>
</body>

总结：外边矩margin的上边框和左边矩影响块的位置块的大小由内边距+自身内容大小+边框大小组成。

2. box-sizing解决了什么问题,实例演示

经查 box-sizing 一共有三个值分别是 content-box(内容) border-box（边框） inherit（继承）

个人理解：

当为content-box 时，块的大小只包含内容区（这个是默认值）
当为border-box时，块的大小是内容区+边框区大小（改变了默认的块大小计算方式）
当为inherit时，块的大小继承父级的计算方式。

使用box-sizing 改为border-box时，块中内容区域大小发生变化。

3. 绝对定位与相对定位的区别与应用,实例演示

相关知识点
position 规定元素的定位类型,其实就是改变元素的定位参照物。
值分别为：
absolute 生成绝对定位，相对static定位以外的第一个父元素定位
relative 生成相对定位，相对于自己定位
fixed 生成绝对定位元素，相对浏览器窗口定位（固定定位）
static 默认值没有定位
inherit 继承
区别：绝对定位position的值使用absolute，相对定位值使用relative。前者参照物是父级包含块，后者参照物是自己本身的位置。

4. 固定定位与绝对定位的区别是什么,实例演示

区别：绝对定位一定要有定位父级，没有就相对窗口定位，固定定位（fixed）始终以窗口作为定位。

 <style>
   *{
       padding:0;
       margin:0;
   }
   .container{
       width:390px;
       background-color:coral;
       right:10px;
       bottom:10px;
/* 使用下面定位语句后，位置才发生变化 */
       position:fixed;
       /* 外观简单设置 */
       text-align:center;
       /* 设置圆角 */
       border-radius:8px;
       color:white;
       padding:5px;
       font-weight:600px;
   }
    </style>
</head>
<body>
    <div class="container">固定广告位</div>

5. 为什么垂直居中如此困难, 使用绝对定位如何实现

在网页中高度是无限的所以垂直居定比较麻烦。

6. 使用绝对定位实现二列布局

7. 使用浮动实现三列布局

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动实现三列布局</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        .main{
            width:800px;
            min-height:700px;
            background-color:lightcoral;
        }
        .left,.right{
            width:200px;
            background-color:lightgreen;
            min-height:700px;
        }
        .left{
            float:left;
            border:5px solid white;
        }
        .content{
            width:400px;
            background-color:lightskyblue;
            min-height:700px;
            float:left;
            border:5px solid white;
        }
        .right{
            float:right;
            border:5px solid white;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="left">左侧</div>
        <div class="content">中间</div>
        <div class="right">右侧</div>
    </div>
</body>
</html>

效果

8. 默写出圣杯布局的思想,并用圣杯布局实现三列布局

把主内容区必须写在最前面且主内容区的宽度为自适应即100%.
三个块内容都要左浮动
左侧通过设置左侧margin-left 为100%将左侧内容放到正确位置右侧通过margin-left设置为右侧宽度负值,把右侧放到正确位置
再设置主内容区的内边距左右两侧值(值为左右侧的宽度)把左右两侧的位置挤出来.

需要注注意的是把三个区域的父元素overflow属性设置为hidden,以完全包住子元素.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>圣杯布局</title>
</head>
<style>
  .container {
    background-color: lightcoral;
    overflow: hidden;
    padding: 0 200px;
  }
  .container > * {
    min-height: 600px;
    float: left;
  }
  .main {
    width: 100%;
    background-color: lightgreen;
  }
  .container > .left,
  .container > .right {
    width: 200px;
    background-color: lightskyblue;
    position: relative;
  }
  .container > .left {
    margin-left: -100%;
    right: 200px;
  }
  .container > .right {
    margin-left: -200px;
    left: 200px;
  }
</style>
<body>
  <div class="container">
    <div class="main">
      内容主体内容主体内容主体内容主内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
    </div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
</body>
</html>