盒模型

Posted 2021-01-09 zhangpang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒模型相关的知识，希望对你有一定的参考价值。

盒模型

一、盒模型概念

广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
盒模型组成：margin + border + padding + content

v_hint：content = width x height

二、盒模型成员介绍

1、content

通过设置width与height来规定content
块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定

2、border

border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
border成员：border-left、border-right、border-top、border-bottom
border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style

风格	解释
solid	实线
dashed	虚线
dotted	点状线
double	双实线
groove	槽状线
ridge	脊线
inset	内嵌效果线
outset	外凸效果线

v_hint：border满足整体设置语法，eg：border: 1px solid red;

3、padding

padding成员：padding-left、padding-right、padding-top、padding-bottom
padding整体设置

值得个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

4、margin

margin成员：margin-left、margin-right、margin-top、margin-bottom
margin整体设置

赋值个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

三、边界圆角

border-radius

border-radius成员

成员	解释
border-top-left-radius	左上方位
border-top-right-radius	右上方位
border-bottom-left-radius	左下方位
border-bottom-right-radius	右下方位

单方位设置

赋值个数(值类型：长度 \| 百分比)	解释
1	横纵
2	横 \| 纵

按角整体设置

赋值个数(值类型：长度 \| 百分比)	解释
1	左上右上左下右下
2	左上右下 \| 右上左下
3	左上 \| 右上左下 \| 右下
4	左上 \| 右上 \| 右下 \| 左下

分向整体设置

格式	解释
1 / 1	横向 \| 纵向

四、其他相关属性

max|min-width|height
overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

display

值	描述
inline	内联
block	块级
inline-block	内联块

=====================================================================================================================================

笔记

盒模型:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>盒模型</title>
　　<style type="text/css">
　　.box {
　　margin: 10px;
　　border: solid;
　　padding: 10px;
　　width: 100px;
　　height: 100px;
　　/*background-color: orange;*/
　　/*覆盖*/
　　background: red;
　　}
　　/*组成:margin + border + padding + content*/
　　/*content = width * height*/
　　/*1.四个成员均具有自身独立显示区域,不相互影响(视觉上感觉会相互影响)*/
　　/*2.margin/padding外边距/内边距控制布局*/
　　/*3.border控制边框*/
　　/*4.content控制内容*/

　　/*padding*/
　　/*与content共有背景颜色*/

　　/*content*/
　　/*内容显示区域*/
　　/*红色区域 120 * 120 */
　　/*content区域 100 * 100 => 内容显示区域*/

　　/*值设置*/
　　.box {
　　/*控制四个方位*/
　　/*margin: 20px;
　　padding: 30px;*/
　　
　　/*上下左右*/
　　/*margin: 10px 20px;
　　padding: 30px 40px;*/

　　/*上左右下*/
　　/*margin: 10px 20px 30px;
　　padding: 30px 40px 50px;*/

　　/*上右下左*/
　　margin: 10px 20px 30px 40px;
　　padding: 30px 40px 50px 40px;
　　/*总结*/
　　/*1.规定起始 2.顺时针 3.不足找对面*/
　　}

　　/*边框: 宽度,颜色,样式*/
　　.box {
　　border-width: 10px;

　　/*transparent透明,会透出背景颜色*/
　　/*border-color: transparent;*/
　　border-color: #333;

　　/*solid solid dotted dotted outset inset double*/
　　border-style: double;

　　/*整体设置*/
　　border: 5px solid orange;
　　}

</style>
</head>
<body>
　　<div class="box">12345</div>
</body>
</html>

边界圆角:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>边界圆角</title>
　　<style type="text/css">
　　.box {
　　width: 200px;
　　height: 200px;
　　background-color: orange;
　　}
　　/*单角设置*/
　　.box {
　　/*一个固定值: 横纵*/
　　border-top-left-radius: 100px;
　　/*两个固定值:横纵*/
　　border-top-left-radius: 100px 50px;
　　/*百分比赋值*/
　　border-top-left-radius: 100%;
　　}

　　/*整体赋值*/
　　.box {
　　/*不分方位(横纵)*/
　　/*左上为第一个角,顺时针,不足找对角*/
　　/*border-radius: 10px 100px 50px;*/

　　/*区分横纵*/
　　/*1./前控制横向,后控制纵向*/
　　/*2.横向又可以分为1,2,3,4个值,纵向毅然*/
　　border-radius: 10px 100px 50px / 50px;
　　/*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/
　　/*所有最多可以赋值8个值*/
　　}
</style>
</head>
<body>
　　<div class="box"></div>
</body>
</html>

以上是关于盒模型的主要内容，如果未能解决你的问题，请参考以下文章

赋值个数(值类型：长度 \| 百分比)	解释
1	左上右上左下右下
2	左上右下 \| 右上左下
3	左上 \| 右上左下 \| 右下
4	左上 \| 右上 \| 右下 \| 左下