css的盒子模型

以前做网站的时候，是用表格的做的网站的布局。

现在都是div+css进行布局。每一块都是一个div.

在进行布局前需要将数据封装到一块一块的区域内(用div来做)，这个区域的专业术语就是盒子。

盒子模型有三个重要的概念：边框、内边距、外边距。

一、边框

border //统一设置

border-top //上

border-bottom //下

border-left //左

border-right //右

例1:

//边框.html

<html>

<head>

<title>边框</title>

<style type="text/css">

div{ //对div和p标签都起作用。

width: 200px; //px表示像素

height:100px;

border: 2px solid blue; //统一设置。表示div边框粗细为2px 实线蓝色

}

</style>

</head>

<body>

<div id="div1">AAAAAAAAAAAAA</div>

<div id="div2">BBBBBBBBBBBBBB</div>

<div id="div3">CCCCCCCCCCCCCC</div>

</body>

</html>

效果为：

css的盒子模型

例2:

//组合选择器.html

<html>

<head>

<title>组合选择器</title>

<style type="text/css">

div{

width: 200px; //px表示像素

height:100px;

border: 2px solid blue; //统一设置。表示div边框粗细为2px 实线蓝色

}

#div2{

border-left: 2px dashed yell ow; //单独对id=idv2的标签进行设置，2px 虚线黄色

}

</style>

</head>

<body>

<div id="div1">AAAAAAAAAAAAA</div>

<div id="div2">BBBBBBBBBBBBBB</div>

<div id="div3">CCCCCCCCCCCCCC</div>

</body>

</html>

效果为：

css的盒子模型

二、内边距

内边距：内容距离边框的距离。

padding //统一设置

padding-top //上

padding-bottom //下

padding-left //左

padding-right //右

//内边距.html

<html>

<head>

<title>内边距</title>

<style type="text/css">

div{

width: 200px;

height:100px;

border: 2px solid blue;

}

#div2{

padding:20px; //统一设置。距离上下左右的距离都是20px。若内容超过范围，则会把div撑出来。

}

</style>

</head>

<body>

<div id="div1">AAAAAAAAAAAAA</div>

<div id="div2">BBBBBBBBBBBBBB</div>

<div id="div3">CCCCCCCCCCCCCC</div>

</body>

</html>

效果：注意，若内容超过了范围，则会把div给撑出来。

css的盒子模型

二、外边距

外边距：div距离外边的距离。

margin //统一进行设置

margin-top

margin-bottom

margin-left

margin-right

例子：

//边框.html

<html>

<head>

<title>边框</title>

<style type="text/css">

div{

border: 2px solid blue; //统一设置。表示div边框粗细为2px 实线蓝色

}

#div2{

margin:20px;

}

</style>

</head>

<body>

<div id="div1">AAAAAAAAAAAAA</div>

<div id="div2">BBBBBBBBBBBBBB</div>

<div id="div3">CCCCCCCCCCCCCC</div>

</body>

</html>

效果图：

css的盒子模型

相关文章：

2021-11-18
2021-06-07
2021-03-29

猜你喜欢

2021-08-03
2021-07-10
2021-05-04
2021-09-09
2021-06-22

相关资源

下载 2023-02-21
下载 2023-03-18
下载 2023-03-15

相似解决方案

热门标签

Java Python linux javascript Mysql C# Docker 算法前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库数据结构大数据 js 机器学习微服务 Android Go 程序员面试 JVM ASP.net core 云原生人工智能后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习多线程 React 架构 devops 爬虫云计算 Spring Boot LeetCode