css之盒模型

一、盒模型的概念

  CSS中每一个元素都是一个盒模型(Box Model),包括HTML和body标签元素。一般称之为box model。它的本质就是一个盒子,它的属性有margin,border,padding,content,background。下图有一个标准盒模型(content)。

  盒子的长=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

  拿子的宽=margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom

css之盒模型_第1张图片

 

怪异盒模型(border-box):和标准盒模型不一样的是它的content部分包含了paddiing和margin。可用于移动端,这样好做适配,最好不用于pc端。

css之盒模型_第2张图片

 

范例:

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>Documenttitle>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        * {
            box-sizing: border-box;
        }

        div {
            width: 200px;
            height: 200px;
            border: 10px solid green;
            padding: 10px;
            margin: 10px;

        }
    style>
head>
<body>
    <div>div>
body>
html>

 

你可能感兴趣的:(css之盒模型)