CSS盒子模型

CSS盒子模型

CSS盒子模型是指在网页中每个元素都被看做是一个矩形的盒子,由内容区域、内边距、边框和外边距组成。是网页布局的基础,每个元素都被视为一个矩形盒子。

CSS盒子模型由以下几个部分组成:
1.内容区域(Content):盒子中用来显示文本和图像内容的区域,尺寸由widthheight控制。
2.内边距(Padding):内容与边框之间的透明区域,通过padding设置。
3.边框(Border):围绕内容和内边距的边界线,通过border设置。
4.外边距(Margin):盒子与其他元素之间的透明间距,通过margin设置。

这些部分组合在一起形成了完整的盒子模型,影响元素的尺寸、位置和相互之间的布局。以下是一个示例,演示CSS盒子模型的应用:

DOCTYPE html>
<html>
<head>
    <title>CSS盒子模型示例title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 1px solid black;
            margin: 10px;
            background-color:lightgray;
        }
    style>
head>
<body>
    <div class="box">这是一个盒子div>
body>
html>

这段代码定义了一个.box 类,应用于一个

元素。.box 类设置了盒子的尺寸、内边距、边框和外边距。

width:定义内容区(Content)的宽度为 200 像素。
height::定义内容区(Content)的高度为 100 像素。
padding:设置内边距,即内容区与边框之间的透明间距。
border: 设置边框,包含宽度、样式、颜色。
margin:设置外边距,即元素与其他元素之间的透明间距。
background-color: 设置背景颜色为浅灰色。

你可能感兴趣的:(html+css学习笔记,css,前端)