盒模型_双盒模型-CSDN博客

本文链接：https://blog.csdn.net/qq_42672798/article/details/81037513

<!DOCTYPE html>

<html>

<head>

.oneDiv{

width: 800px;

height: 300px;

background-color: red;

color: white;

padding: 200px;

border: 20px solid green;

margin: 50px;

}

</style>

</head>

<body>

<!--

盒模型:在HTML中每一个标签都具有一个盒模型

盒模型的组成部分:content(内容),padding(内边距),border(边框),margin(外边距)

content:由width和height来设置,用于控制元素承载内容的区域

padding:用于设置边框与内容之间的距离

border:用于设置元素的边框

margin:用于设置两个元素之间的距离

-->

你好,蓝鸥

</div>

<div>

Hello,Lanou!

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>02padding</title>

.onediv{

width: 500px;

height: 300px;

background: red;

color: white;

/*padding-left: 10px;*/

/*padding-right: 20px;*/

/*padding-top: 30px;*/

/*padding-bottom: 40px;*/

padding复合了以上四个属性

* 1, 一个值时: 上下左右

padding: 40px;

* 2, 两个值时: 上下左右

padding: 20px 30px;

* 3, 三个值时: 上左右下

padding: 10px 20px 30px;

* 4, 四个值时: 上右下左

padding: 10px 20px 30px 40px;

}

</style>

</head>

<body>

那段时光

</div>

<div>

后悔

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>02border</title>

.oneDiv {

width: 500px;

height: 300px;

background: red;

color: white;

/*边框宽度*/

border-left-width: 20px;

/*边框样式*/

border-left-style: solid;

/*边框颜色*/

border-left-color: #FF00FF;

/*四个边的边框*/

border-left: 20px solid green;

border-right: 20px solid green;

border-top: 20px solid green;

border-bottom: 20px solid green;

/*关于 border 的样式*/

/*实线*/

/*border: 20px solid green;*/

/*点线*/

/*border: 20px dotted green;*/

/*虚线*/

/*border: 20px dashed green;*/

/*双实线*/

/*border: 20px double green;*/

}

</style>

</head>

<body>

快要吃晚饭了

</div>

<div>

饿不饿?

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>04margin</title>

.oneDiv {

width: 500px;

height: 300px;

background: red;

color: white;

margin-left: 20px;

margin-right: 20px;

margin-top: 20px;

margin-bottom: 20px;

/*margin 复合了以上四个属性*/

* 1, 一个值时: 上下左右

margin: 20px;

* 2, 两个值时: 上下左右

margin: 10px 20px;

* 3, 三个值时: 上左右下

margin: 10px 20px 30px;

* 4, 四个值时: 上右下左

margin: 10px 20px 30px 40px;

}

</style>

</head>

<body>

快要吃晚饭了

</div>

<div>

饿不饿?

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>05margin的bug</title>

.fatDiv {

background: yellow;

* 解决方案一: 父元素添加边框, 会影响父元素的盒模型大小

* 不是最优解决方案

/*border: 1px solid black;*/

* 解决方案二: 为父元素设置 overflow: hidden;属性

* 最优解决方案

overflow: hidden;

}

.oneDiv {

width: 500px;

height: 300px;

background: red;

color: white;

margin-top: 50px;

}

</style>

</head>

<body>

<!--

margin 特点:

一, 上下两个兄弟标签

上边元素的 margin-bottom 与下边元素的 margin-top 取两者之间最大值, 不是相加关系

二, 父子嵌套的元素

父元素没有设置边框, 子元素的 margin-top 会传递给父元素, 此时给父元素设置 overflow: hidden; 属性可解决该边框传递问题.

-->

快要吃晚饭了

</div>

</body>

</html>