盒模型
一、盒模型概念
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型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-top-left-radius |
左上 方位 |
| border-top-right-radius |
右上 方位 |
| border-bottom-left-radius |
左下 方位 |
| border-bottom-right-radius |
右下 方位 |
| 赋值个数(值类型：长度 | 百分比) |
解释 |
| 1 |
横纵 |
| 2 |
横 | 纵 |
| 赋值个数(值类型：长度 | 百分比) |
解释 |
| 1 |
左上 右上 左下 右下 |
| 2 |
左上 右下 | 右上 左下 |
| 3 |
左上 | 右上 左下 | 右下 |
| 4 |
左上 | 右上 | 右下 | 左下 |
四、其他相关属性
- max|min-width|height
- overflow
| 值 |
描述 |
| visible |
默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden |
内容会被修剪，并且其余内容是不可见的。 |
| scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit |
规定应该从父元素继承 overflow 属性的值。 |
| 值 |
描述 |
| 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: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 15px 20px ;
padding:30px 40px 50px; */
/* 上 右 下 左 */
margin:10px 20px 30px 40px;
padding:15px 25px 35px 45px;
/* 总结 */
/* 1.规定起始 2.顺时针 3. 不足找对面 */
}
/* 边框 */
.box{
border-width: 10px;
/* transparent 透明 会透出背景颜色 */
border-color:transparent;
/* solid 实线 dotted点状线 dotted虚线*/
border-style:solid;
/* 整体设置 顺序可以任意调换*/
border:5px solid orange;
}
</style>
</head>
<body>
<div class="box"></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-bottom-left-radius:100px;
border-top-right-radius:100px;
border-bottom-right-radius:100px; */
/* 两个固定值：横 纵*/
border-top-left-radius:100px 50px;
/* 百分比赋值 */
border-top-left-radius:50%;
}
/* 整体赋值 */
.box{
/* 不分方位(不分横纵) */
/* 左上为第一个角，顺时针，不足找对角 */
/* 和刚才的margin padding 一样 */
/* border-radius:30px; */
/* 区分横纵 */
/* 1.前控制横向，后控制纵向 */
/* 2.横向又可以分为1,2,3,4个值，纵向一样 */
border-radius:10px 100px 50px/50px;
/* 左上横10 右上横100 右下横50 左下横100px 纵全部为50 */
/* 最多可以赋值8个值 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
