HTML/CSS基础课程笔记————盒子模型篇

2021-06-13 08:28:41

——————————————————————————盒子模型———————————————————————————————

盒子模型=网页布局的基石( 文本，图像，音频，视频等)，

还能控制盒子与内容还要盒子与盒子之间的距离

盒子模型由4个部分组成：

边框(border)

外边距(margin)

内边距(padding)

边框，外边距，内边距是盒子模型的特性也就是盒子模型的属性

盒子中的内容(content)

盒子有4个方向：

上(top)

右(right)

下(bottom)

左(left)

设置的时候是顺时针方向设置的

设置4个属性值的时候是上，右，下，左

设置3个属性值的时候是上，左右，下

设置2个属性值的时候是上下，左右

设置1个属性值的时候是四个方向的属性值是相同的

属性值的设置有2种方式：

1：是分量设置(就是分别设置元素各各方向的属性值)

2：是简写设置(同时设置元素的各各方向的属性值)

——————————————————————————————盒模型--边框(一)

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{

border:2px solid red;

}

上面是 border 代码的缩写形式，可以分开写：

div{

border-width:2px;

border-style:solid;

border-color:red;

}

1、border-style(边框样式)常见样式有：

dashed(虚线)| dotted(点线)| solid(实线)。

2、border-color(边框颜色)中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width(边框宽度)中的宽度也可以设置为：

thin | medium | thick(但不是很常用)，最常还是用象素(px)

——————————————————————————————盒模型--边框(二)

现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？

css 样式中允许只为一个方向的边框设置样式：

div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边(上、右、左)边框的设置：

border-top:1px solid red;

border-right:1px solid red;

border-left:1px solid red;

——————————————————————————————盒模型--宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，

css内定义的宽(width)和高(height)，指的是填充以里的内容范围。

因此一个元素实际宽度

(盒子的宽度)=左边界(左边外边距)+左边框+左填充(左边内边距)+内容宽度+右填充(右边内边距)+右边框+右边界(右边外边框)。

盒子总宽度=左边界(margin-left)+左边框(border-left)+左填充(padding-left)+内容宽度(width)+右填充(padding-right)+右边框(border-right)+右边界(margin-right)。

元素的高度也是同理。

css代码：

div{

width:200px;

padding:20px;

border:1px solid red;

margin:10px;

}

html代码：

文本内容

—————————————————————————————————盒模型--填充(内边距)

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}

——————————————————————————————————盒模型--边界(外边距)

元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}

也可以分开写：

div{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

}

如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}

——————————————————————————————————盒子模型总结——————————————————————

总结一下：padding和margin的区别，padding在边框里，margin在边框外。

更多相关内容
盒子模型代码
2018-10-09 15:07:18

简单的html代码，盒子模型，只是大概的描述下盒子模型的例子

收起
前端开发_HTML5_盒子模型
2021-12-16 08:53:38
盒子模型 1、引入 盒子模型是CSS中一个重要的概念，早在CSS的诞生之处便有这一个概念了，对于网页中的大部分对象，实际呈现就是一个盒子形状对象，即是一个块对象，每一个盒子都存在着四个东西，即:边框(border)...
盒子模型

1、引入

盒子模型是CSS中一个重要的概念，早在CSS的诞生之处便有这一个概念了，对于网页中的大部分对象，实际呈现就是一个盒子形状对象，即是一个块对象，每一个盒子都存在着四个东西，即:边框(border)、边界(margin)、填充(padding)、内容(content)。这四个内容我们在之前的学习中是介绍过的。那么在学习的过程中我们还举例了现实生活中的快递盒子便于大家的理解。

2、盒子模型示意图

3、盒子的大小确定

我们在html页面上写一个标签元素，发现这一个这一个标签自己会有本身的大小，那么如果说想要控制这一个盒子的大小，应该如何设置呢？这一个时候，我们可以给这一个盒子指定两个属性，分别是:width和height。其语法如下:
```
内容盒子选择器{

    width:设置宽度值，一般使用px为单位。
   height:设置高度值，一般使用px为单位。
}
```
那么除了这一个盒子本身的大小之外，整个盒子的大小应该还包括其他的两个内容，分别为边界(border)的大小和填充(padding)的大小。

盒子大小确定的代码示例和效果
```
<style type="text/css">
   body {
        font-size: 25px;
		font-family: "宋体";
		color: #FF0000;
   }

   .box1 {
	   border: 1px solid black;
   }

   .box2 {
	   width: 200px;
	   height: 200px;
	   border: 1px solid green;
   }

   .box3 {
	   width: 200px;
	   height: 200px;
	   border: 50px solid green;
   }
			
   .box4 {
	   width: 299px;
	   height: 299px;
	   border: 1px solid green;
   }
			
   .box5 {
	   width: 150px;
	   height: 150px;
	   border: 1px solid red;
	   padding: 10px;
   }
			
   .box6 {
	   width: 171px;
	   height: 171px;
	   border: 1px solid red;
   }
</style>

<body>
   <div class="box1">
	  这是原始盒子大小
   </div>
   <br>
   <div class="box2">
	  指定宽度和高度为200px
   </div>
   <br>
   <div class="box3">
	  指定宽度和高度为200px
	  <br>
	  设置边框的大小为5px
    </div>
    <br>
	<div class="box4">
	   指定宽度和高度为299px
    </div>
	<br>
	<div class="box5">
	   宽/高为150px
	   边界1px,填充10px
	</div>
	<br>
    <div class="box6">
	   指定宽度和高度为171px
	</div>
</body>
```
4.盒子之间的位置摆放

我们知道每一个标签元素放在在页面上都是一个盒子，我们发现一个问题，就是盒子直之间的摆放默认的情况下是从上到下的摆放，那么并不是所有的盒子都是按照这一个来就行的摆放。有时候还会存在着左右的摆放，那么这一个时候我们先说一个后面学习的知识点:浮动(float)。

盒子摆放位置关系代码和效果图(左右位置关系)
```
<style type="text/css">
   body {
        font-size: 25px;
		font-family: "宋体";
		color: #ffffff;
   }

   .box1 {
	   background-color: #008000;
   }

   .box2 {
	   margin-left: 20px;
	   background-color: #ff0000;
   }

   div {
	   float: left;
	   width: 200px;
	   height: 200px;
	   border: 1px solid black;
   }
</style>

<body>
   <div class="box1">
	  盒子1
   </div>

   <div class="box2">
	   盒子2
   </div>
</body>
```
收起
展开全文
css
Html之盒模型
2019-04-30 01:17:04

NULL 博文链接：https://lbovinl.iteye.com/blog/2435565

收起
HTML网页设计基础笔记 • 【第7章 盒子模型】
2021-01-08 13:46:36

7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流概述 7.2.2 display 属性 7.2.3 visibility 属性 7.3 盒子浮动 7.3.1 float 属性 7.3.2 清除浮动 7.4 ...

收起

HTML（div盒子模型）

千次阅读 2021-03-24 22:42:43

系列文章目录前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多...代码如下（示例）： import numpy as np import pandas as pd import matplotlib.p

HTML（div盒子模型）

div块标签
盒子模型
块标签与行内标签的转换

一、标签

1.div块标签
div块标签和span行内标签都是使用属性style确定其他属性

<div style="border: 1px solid blueviolet">div测试</div>

在这里插入图片描述
div块标签独占一行
使用选择器实现div多样式设置
head：

<style>
    #d1{
        border:  1px solid brown;
        color: blue;
        background-color: bisque;
        width: 100px;
        height: 25px;
    }
</style>

body：

<div id="d1">div测试</div>

在这里插入图片描述
2.盒子模型
（1）内边距设置
内边距设置之后块向着四个边的方向分别外扩设置的值，而不是内扩
/四边同时设置/

padding: 100px;

在这里插入图片描述
如最后一个图所示，是将四个边都设置为内边距为100px得到的块

/上下设置、左右设置/

padding: 500px 250px;

在这里插入图片描述
/四个边分别设置/

 /*第一种方法*/
padding: 100px 200px 300px 400px;
/*第二种方法*/
padding-top: 100px;
padding-right: 200px;
padding-bottom: 300px;
padding-left: 400px;

在这里插入图片描述
使用第一种方法分别设置四边内边距时，数值的顺序是从上方开始的顺时针转动

（2）外边距
外边距的设置方法与内边距相同，但是将内边距的属性padding换成margin
/四边同时设置/

margin: 100px ;

在这里插入图片描述
/上下设置、左右设置/

margin: 100px 50px;

在这里插入图片描述
/四边分别设置/

/*第一种方法*/
margin: 100px 200px 300px 400px;
/*第二种方法*/
margin-top: 100px;
margin-right: 200px;
margin-bottom: 300px;
margin-left: 400px;

在这里插入图片描述
（3）使用外边距使块居中
利用margin属性使块剧中操作
使用margin设置的上下、左右两两设置的方法，上下不设置，左右设置为auto（自动）

margin: 0px auto;

在这里插入图片描述
3.块标签转换行内标签
行内标签不具有居中、内边距、外边距等属性，有时候需要对行内标签进行操作时不起作用、就需要将行内标签转为块标签
使用display属性进行转换：当display=inline时，块标签转行内标签；当display=block时，行内标签转块标签

二、所有源码及结果

1.源码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #d1{
            border:  1px solid brown;
            color: blue;
            background-color: bisque;
            width: 100px;
            height: 25px;
        }
        /*内边距*/
        /*.d2{
            border:  1px solid brown;
            color: blue;
            background-color: bisque;
            width: 100px;
            height: 25px;
!*            !*四个边同时设置*!
            padding: 100px;
            !*上下设置、左右设置*!
            padding: 100px 250px;
            !*四个边分别设置*!
            !*第一种方法*!
            padding: 100px 200px 300px 400px;*!
            !*第二种方法*!
            padding-top: 100px;
            padding-right: 200px;
            padding-bottom: 300px;
            padding-left: 400px;
        }*/
        /*外边距*/
        .d2 {
            border: 1px solid brown;
            color: blue;
            background-color: bisque;
            width: 100px;
            height: 25px;
/*
            margin: 100px ;
*/
/*
            margin: 100px 50px;
*/
            /*第一种方法*/
/*
            margin: 100px 200px 300px 400px;
*/
            /*第二种方法*/
          /*  margin-top: 100px;
            margin-right: 200px;
            margin-bottom: 300px;
            margin-left: 400px;*/
            /*使用margin属性居中块*/
            margin: 0px auto;
        }

    </style>
</head>
<body>
<!--div块标签-->
<div style="border: 1px solid blueviolet" >div测试</div>
<!--选择器设置-->
<div id="d1">div测试</div>
<div class="d2">div测试</div>
</body>
</html>

2.结果

在这里插入图片描述

收起

展开全文

css盒子模型
2016-08-22 15:40:08

通过这个css盒子模型的实战，更好的理解css盒子模型

收起

HTML/CSS编写盒子模型

2021-06-08 09:52:20

源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=...

源代码如下：

<!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>
    .box1
{
 
    width:300px;
    height:300px;
    padding:30px;
    margin:0px auto;
    border: 5px dashed rgb(216, 19, 19);
}
 
.box2
 
{
 
    width:250px;
    height:250px;
    padding:20px;
    border:5px solid rgb(236, 144, 24);
    margin:0px auto;
}
.box3{
    width:200px;
    height:200px;
    padding:15px;
    margin:0px auto;
    border: 8px dotted rgb(95, 8, 153);

}
.box4{
    width:150px;
    height:150px;
    padding:10px;
    margin:0px auto;
    border: 5px solid rgb(143, 21, 116);
}
.box5{
    width:100px;
    height:100px;
    padding:3px;
    margin:0px auto;
    border: 20px solid rgb(20, 204, 82);
}
.box6{
    width:50px;
    height:50px;
    padding:10px;
    margin:0px auto;
    border: 3px solid black;
}
 </style>
        
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">
                <div class="box4">
                    <div class="box5">
                        <div class="box6">


    </div>
     


</body>
</html>

结果如图：
在这里插入图片描述

收起

展开全文

CSS盒子模型(示例代码)
2021-06-13 11:23:05

盒子模型概念2.高和宽设置3.边框设置4.内边框设置5.外边框设置6.盒子的计算7.元素显示方式3-1 width属性宽度width：长度值、百分比、auto最大宽度max-width：长度值、百分比、auto最小宽度min-width：长度值、百分比...

收起
JS Web Flex弹性盒子模型代码实例
2020-11-21 03:52:29

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Flexbox弹性盒布局</title>...

收起
通过box盒子模型给元素内容设置居中
2021-06-13 04:40:49

HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出一.外联样式通过link标签引入外部css文件夹中的xxx.css文件到head标签中例: 二. 1.组选择器选择器名称1,选择器名称2,...

收起
html盒模型的示例分析
2021-06-14 05:05:33

html盒模型的示例分析发布时间：2021-06-04 12:04:12来源：亿速云阅读：61作者：小新小编给大家分享一下html盒模型的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇...

收起
一个简易的html盒子模型
万次阅读 多人点赞 2018-05-28 19:12:38

一.盒子的基本概念所谓盒子模型，其实就是在网页设计中进行CSS样式设置所使用的一种思维模型。使用盒子模型主要是为了便于控制...盒子模型的组成（以HTML盒子为例）html中的每一个标签都是一个盒子，并且这个盒子...

收起
CSS盒子模型以及背景图
千次阅读 2021-06-17 02:58:27

===========本文共1500字================CSS盒子模型---边框内容区域边框box-shadow: none;边框宽度 border-width边框样式 border-style边框颜色 border-color复写属性：宽度、样式、颜色圆角 border-radius 取值...

收起
CSS盒子模型、内外边距、边框、行高、背景
2021-07-01 19:48:24

1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。以苹果手机盒子为例:盒子的挡板----...

收起
HTML的两种盒子模型
万次阅读 2018-06-10 19:10:25

一、引入 ...只有理解了盒子模型才能更好的排版，更好的编写网站界面二、盒子的布局把HTML中的元素看做是一个矩形的盒子（盛装内容的的容器），每个容器都是由元素内容、内边距（paddin...

收起

css
盒子模型 边框内边框外边框代码
2021-06-13 13:45:28

盒子模型.box1{/*使用width来设置盒子内容区的宽度使用height来设置盒子内容区的高度width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定/width: 300...

收起
HTML+CSS（盒子模型）
2019-01-29 21:30:29

盒模型--宽度和高度 ...因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度也是同理。比如： css代码： div{ width:200px; padding:20px...

收起
学习 day4 html 盒子模型
2021-06-14 00:57:24

HTMLCSSHTML5CSS3学习 day4 html 盒子模型 盒子模型1.框模型框：页面上所有元素都可以称为“框”框模型：(BOX Model),又称盒子模型定义框处理元素内容、内边距padding、外边距margin、边框的样式border外边距margin...

收起
div盒子模型实例
2021-06-11 13:05:14

CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地...

收起
有趣的CSS盒模型案例
2021-06-14 05:04:45

盒模型：Snip20161220_7.png看效果：Snip20161220_5.pngHTML代码：Document.div-border{margin: 0px 0px 0px 80px;padding: 0px;width: 0px;height: 0px;border: 100px solid transparent;border-bottom-color: ...

收起
HTML 网页制作盒子设计 CSS
千次阅读 多人点赞 2021-08-07 07:50:57

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型...

收起

css
HTML盒子模型的浮动
2021-12-19 15:37:32

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>... /* 这个设置方便两个小盒子移动说观看 */ ... /* 盒子高 */ ... /* 盒子宽 */ ... /*盒子边框1像.

收起

css css3
html标签的盒子模型介绍
万次阅读 2016-10-19 00:42:13

html标签的盒子模型介绍 盒子模型，这主要是针对像div等块标签而言，是拿生活中的实物形象比喻。 1.盒子模型在html标签中div和div中的内容，可以比喻成生活中一个锦盒，并且这个大的盒子里还装着一个小盒子中...

收起
HTML和CSS的关键:盒子模型(Box model)
2020-12-09 22:13:10

本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键. 注: 为什么不翻译margin和padding? 原因...

收起
HTML 盒子模型div
千次阅读 2019-07-05 16:16:00

HTML 中的div定义：可定义文档中的分区或节（division/section）。标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么...

收起

div
CSS盒子模型
千次阅读 2018-09-22 18:20:44

CSS盒子模型分为标准盒子和IE盒子，那么两者有什么区别呢。我们运行下面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...

收起

CSS
IT兄弟连 HTML5教程使用盒子模型的浮动布局
2021-06-13 07:30:18

原标题：IT兄弟连 HTML5教程使用盒子模型的浮动布局虽然使用绝对定位可以实现页面布局，但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变，所以并不是布局的首选方式。而使用浮动的盒子模型可以向左或向...

收起
一篇文章带你实操代码理解盒子模型
千次阅读 多人点赞 2020-10-05 21:22:01

目录一、盒子模型的几个关键词二、盒子有尺寸，用CSS写法为宽度（width）和高度（height）三、盒子有边框，用CSS写法为上下左右边框（border）3.1边框线型 border-style3.2边框颜色3.3边框的复合属性3.4单独控制上下...

收起

css3 前端
HTML盒子模型+边框
千次阅读 2021-06-12 11:30:25

盒子模型(框模型)一个盒子分为四部分1.内容区(content)2.内边距(padding)3.边框(border)4.外边距 (margin)盒子的大小是由(内容区、内边距、边框)决定.box{width:100px;height:100px;background-color:#bfa;border-...

收起

盒子模型代码

前端开发_HTML5_盒子模型

盒子模型

Html之盒模型

HTML网页设计基础笔记 • 【第7章盒子模型】

HTML（div盒子模型）

HTML（div盒子模型）

一、标签

二、所有源码及结果

1.源码

2.结果

css盒子模型

HTML/CSS编写盒子模型

CSS盒子模型(示例代码)

JS Web Flex弹性盒子模型代码实例

通过box盒子模型给元素内容设置居中

html盒模型的示例分析

一个简易的html盒子模型

CSS盒子模型以及背景图

CSS盒子模型、内外边距、边框、行高、背景

HTML的两种盒子模型

盒子模型边框内边框外边框代码

HTML+CSS（盒子模型）

学习 day4 html 盒子模型

div盒子模型实例

有趣的CSS盒模型案例

HTML 网页制作盒子设计 CSS

HTML盒子模型的浮动

html标签的盒子模型介绍

HTML和CSS的关键:盒子模型(Box model)

HTML 盒子模型div

CSS盒子模型

IT兄弟连 HTML5教程使用盒子模型的浮动布局

一篇文章带你实操代码理解盒子模型

HTML盒子模型+边框

html盒子模型代码

盒子模型代码

前端开发_HTML5_盒子模型

盒子模型

Html之盒模型

HTML网页设计基础笔记 • 【第7章 盒子模型】

HTML（div盒子模型）

HTML（div盒子模型）

一、标签

二、所有源码及结果

1.源码

2.结果

css盒子模型

HTML/CSS编写盒子模型

CSS盒子模型(示例代码)

JS Web Flex弹性盒子模型代码实例

通过box盒子模型给元素内容设置居中

html盒模型的示例分析

一个简易的html盒子模型

CSS盒子模型以及背景图

CSS盒子模型、内外边距、边框、行高、背景

HTML的两种盒子模型

盒子模型 边框 内边框外边框代码

HTML+CSS（盒子模型）

学习 day4 html 盒子模型

div盒子模型实例

有趣的CSS盒模型案例

HTML 网页制作 盒子设计 CSS

HTML盒子模型的浮动

html标签的盒子模型介绍

HTML和CSS的关键:盒子模型(Box model)

HTML 盒子模型div

CSS盒子模型

IT兄弟连 HTML5教程 使用盒子模型的浮动布局

一篇文章带你实操代码理解盒子模型

HTML盒子模型+边框

html盒子模型代码

HTML网页设计基础笔记 • 【第7章盒子模型】

盒子模型边框内边框外边框代码

HTML 网页制作盒子设计 CSS

IT兄弟连 HTML5教程使用盒子模型的浮动布局