Visual Studio Code——CSS盒子模型

【关卡前提】
掌握CSS基础属性
根据需求搜索对应CSS属性
【关卡知识】
CSS盒子模型
边框
定位
【关卡要求】
练习一:完成《鲁能足球》网页练习
【关卡效果】
《鲁能足球队》网页练习效果图如下:
Visual Studio Code——CSS盒子模型_第1张图片
Visual Studio Code——CSS盒子模型_第2张图片
【知识补充】
所有 HTML 元素可以看作盒子,在 CSS 中,"box model "这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

不同部分的说明:
Margin(外边距) - 清除边框区域。Margin 没有背景颜色,它是完全透明

Border(边框) - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

Padding(内边距) - 清除内容周围的区域。会受到框中填充的背景颜色影响

Content(内容) - 盒子的内容,显示文本和图像

提示:在盒模型中,外边距可以是负值,而且在很多情况下都要使用负值的外边距。

元素的宽度和高度重要: 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。
下面的例子中的元素的总宽度为 300px:width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
让我们自己算算:
250px (宽)

  • 20px (左 + 右填充)
  • 10px (左 + 右边框)
  • 20px (左 + 右边距)
    = 300px

最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

【代码】

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《鲁能足球队》网页title>
    <style type="text/css">
    * {
     
       margin: 0; /*外边框 */
       padding: 0;/* 内边距 */
    }
    a {
     
      text-decoration: none;
      color: #0454a7;
    }
    a:hover {
     
      text-decoration:underline;
    }
    .box {
     
      width: 638px;
      margin:

你可能感兴趣的:(css,html)