CSS3笔记-传统盒子模型与CSS3盒子模型

文章目录

  • 前言
  • 一、效果图
  • 二、代码
  • 总结


前言

传统盒子模型与CSS3盒子模型的区别


一、效果图

CSS3笔记-传统盒子模型与CSS3盒子模型_第1张图片
CSS3笔记-传统盒子模型与CSS3盒子模型_第2张图片
CSS3笔记-传统盒子模型与CSS3盒子模型_第3张图片

二、代码


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    div:nth-child(1){
      /* 传统盒子模型宽度 = width + padding + border */
      width: 200px;
      height: 200px;
      background-color: skyblue;
      border: 10px solid red;
      padding: 10px;
    }
    div:nth-child(2){
      /* CSS3盒子模型box-sizing:border-box
       padding 和 border不会再撑大盒子 */
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      background-color: greenyellow;
      border: 10px solid blue;
      padding: 10px;
    }
  style>
head>
<body>
<div>
  padding和border会撑大盒子
div>
<div>
  padding和border不会撑大盒子
div>
body>
html>


总结

传统盒子模型与CSS3盒子模型的区别

1.传统盒子模型的padding和border会撑大盒子

2.CSS3盒子模型的padding和border不会撑大盒子

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