【摘要】 HTML盒子模型考必过小编为大家整理了关于HTML盒子模型的信息，希望可以帮助到大家！
HTML盒子模型
标签：哪些 splay 影响 put ble dde 无边框 自己的 浏览器
盒子模型介绍
1、 盒子模型介绍
在网页中元素可以产生矩形的一个框，这些框会影响元素之间的距离。
*盒子模型的概念
*高和宽设置
*边框设置
*内边距设置
*外边距设置
2、 盒子模型概念
*盒子模型用来“放”网页中的各种元素
*网页设计中内容，如文字、图片等元素，都可以是盒子（DIV嵌套）
盒子模型属性
1、 width属性
宽度：width：长度/百分比/auto
最大宽度：max-width：长度值/百分比/auto
最小宽度：min-width：长度值/百分比/auto
*设置块级元素和替换元素的内容高度
2、 height属性
高度：height：长度/百分比/auto
最大高度：max-height：长度值/百分比/auto
最小高度：min-height：长度值/百分比/auto
*设置块级元素和替换元素的内容高度
3、 哪些HTML元素可设置高和宽属性
*块级元素
<p>、<p>、<h1>~<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dt>、<dd>等
*替换元素
<img>、<input>、<textarea>等
*width和height属性设置是内容的高和宽
*width和height属性设置对块级元素和替换元素有效
*max-height(width)/min-height(width)有兼容性问题，IE不支持
4、 border边框属性
*边框宽度(border-width)
*边框颜色(border-color)
*边框样式(border-style)
设置元素边框宽度：
border-width：thin/medium/thick/长度值
|
值 |
描述 |
|
none |
定义无边框，默认值 |
|
hidden |
与“none“相同，除非在表格元素中解决边框冲突时 |
|
dotted |
定义点状边框，在大多数浏览器中呈现为实线 |
|
dashed |
定义虚线，在大多数浏览器中呈现为实线 |
|
solid |
定义实线 |
|
double |
定义双线 |
|
groove |
定义3D凹槽边框 |
|
ridge |
定义3D垄状边框 |
|
inset |
定义3D inset边框 |
|
outset |
定义3Doutset边框 |
|
inherit |
规定应该从父元素继承边框样式 |
四个不同方向来表示（上、下、左、右）
表示：
border-[left/right/top/botttom]-width
border-[left/right/top/botttom]-color
border-[left/right/top/botttom]-style
边框缩写：
border:[宽度][样式][颜色]
不同方向：
border-top[宽度][样式][颜色]
border-left [宽度][样式][颜色]
border-right[宽度][样式][颜色]
border-bottom[宽度][样式][颜色]
5、 padding填充属性
设置元素的内容与边框之间的距离（内边框或填充），分4个方向（上、右、下、左）
padding-top：长度值/百分比
padding-right：长度值/百分比
padding-bottom：长度值/百分比
padding-left：长度值/百分比
*说明：值不能为复值
内边距属性缩写
Padding：值1；//4个方向都为值1
Padding：值1 值2//上下=值1，左右=值2
Padding：值1 值2 值3 //上=值1，左右=值2，下=值3
Padding：值1 值2 值3 值4//上=值1，右=值2，下=值3，左=值4
6、margin外边距属性
设置元素与元素之间的距离（外边距），4个方向（上、右、下、左）
-margin-top：长度值/百分比/auto
-margin-right：长度值/百分比/auto
-margin-bottom：长度值/百分比/auto
-margin-left：长度值/百分比/auto
*值可以为负值
外边距属性
缩写：
margin：值1；//4个方向都为值1
margin：值1 值2//上下=值1，左右=值2
margin：值1 值2 值3 //上=值1，左右=值2，下=值3
margin：值1 值2 值3 值4//上=值1，右=值2，下=值3，左=值4
*margin值为auto，实现水平方向居中显示效果
*由浏览器计算外边距
*垂直方向，两个相邻元素都设置外边距，外边距会发生合并
7、盒子计算
盒子在页面中所占的宽度
是由左边距+左边框+左填充+内容宽度+右填充+右边框+右边距组成
/width=100-20-10-2=68px
盒子在页面中所占的高度
是由上边距+上边框+上填充+内容高度+下填充+下边框+下边距组成
/height=80-20-10-2=48px
IE盒子模型
如果没有doctype文档类型声明，各浏览器按照自己的方式解析/<!DOCTYPE HTML>
如果有doctype文档类型声明，按照标准盒子模型来解析
盒子模型的应用
1、 display属性
inline：元素将显示为内联元素，元素前后没有换行符
block：元素将显示为块级元素，元素前后会带有换行符
inline-block：行内块元素，元素呈现为inline，具有block的相应特征
none：此元素不会被显示
样式继承关系
|
样式属性 |
继承 |
说明 |
|
Width Height |
不继承 块级元素、替换元素 |
对于样式属性，通过设置值为inherit，指定从父元素继承相对属性值。 例： p{padding:10px;} p p{padding:inherit;} |
|
Padding |
不继承 |
|
|
Margin |
不继承 |
|
|
Border |
不继承 |
HTML盒子模型
标签：哪些 splay 影响 put ble dde 无边框 自己的 浏览器
以上就是HTML盒子模型的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！