盒子模型

网页中盒子模型

盒子模型的概念

• 盒子模型用来“放”网页中的各种元素。
• 网页设计中内容,如文字、图片等元素,都可是盒子(DIV嵌套)

哪些HTML元素可设置高和宽属性

• 块级元素
<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol>
<dl> 、<dt> 、<dd>等
• 替换元素
<img>、<input>、<textarea>等

HTML标签分类

• 块级标签:占据一行,换行。
• 行内标签:在一行,不换行。
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>
<h1>~<h6>、<p>、<form>、<hr>……
非替换元素:<b>、<em>、<a>、<span>……
替换元素:<img>、<input>、<textarea>……

边框属性

• 边框宽度(border-width)
• 边框颜色(border-color)
• 边框样式 ( border-style)
4个方向来表示(上、下、左、右)

设置元素边框宽度
border-width : thin | medium | thick | 长度值

设置元素边框颜色
border-color : 颜色 | transparent

设置元素边框样式
border-style : 值 | none | hidden

值           描述
none      定义无边框。默认值
hidden    与 “none” 相同。除非在表格元素中解决边框冲突时
dotted    定义点状边框。在大多数浏览器中呈现为实线
dashed    定义虚线。在大多数浏览器中呈现为实线
solid     定义实线
double    定义双线
groove    定义 3D 凹槽边框
ridge     定义 3D 垄状边框
inset     定义 3D inset 边框
outset    定义 3D outset 边框
inherit   规定应该从父元素继承边框样式。

不同方向表示:
border-[left | right | top | bottom]-width
border-[left | right | top | bottom]-color
border-[left | right | top | bottom]-style

边框缩写:
border : [宽度] | [样式] | [颜色]
不同方向:
border-top : [宽度] | [样式] | [颜色]
border-left : [宽度] | [样式] | [颜色]
border-right : [宽度] | [样式] | [颜色]
border-bottom :[宽度] | [样式] | [颜色]

内边距属性

设置元素的内容与边框之间的距离(内边距或填充),分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,左=值2

外边距属性

设置元素与元素之间的距离(外边距), 4个方向(上、右、下、左)
– margin-top : 长度值 | 百分比 | auto
– margin-right : 长度值 | 百分比 | auto
– margin-bottom : 长度值 | 百分比 | auto
– margin-left : 长度值 | 百分比 | auto
说明:值可为负值

• 默认情况下,相应HTML块级元素存在外边距
body、h1~h6、p……
• 声明margin属性,覆盖默认样式

body,h1,h2,h3,h4,h5,h6,p{ margin:0; }

• margin值为auto , 实现水平方向居中显示效果
• 由浏览器计算外边距

• 垂直方向,两个相邻元素都设置外边距,外边距会发生合并
• 合并后外边距高度=两个发生合并外边距的高度中最大值

外边距属性缩写

设置元素与元素之间的距离(外边距), 4个方向(上、右、下、左)
margin : 值1; //4个方向都为值1
margin : 值1 值2 ; // 上下=值1,左右=值2
margin : 值1 值2 值3;// 上=值1,左右=值2,下=值3
margin : 值1 值2 值3 值4; // 上=值1,右=值2,下=值3,左=值2

HTML元素分类

• 块级元素,占一行
<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol>
<dl> 、<dt> 、<dd>等
• 行内元素(内联元素),一行显示
<span>、<a>、<em>等

display属性

• inline
元素将显示为内联元素,元素前后没有换行符
• block
元素将显示为块级元素 , 元素前后会带有换行符

• inline-block
行内块元素,元素呈现为inline,具有block相应特性
• none
此元素不会被显示

 

文章参考于慕课网课程

https://www.imooc.com/

 

发布者

deng

听闻余生久不遇,相逢别错过。

《盒子模型》上有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注