盒子模型
宽度属性
宽度属性:
width: 长度值|百分比|auto
最大宽度:
max-width: 长度值|百分比|auto
最小宽度:
min-width: 长度值|百分比|auto
高度属性
高度:
height: 长度值|百分比|auto
最大高度:
max-height: 长度值|百分比|auto
最小高度:
min-height: 长度值|百分比|auto
哪些html元素可以设置宽高?
块级元素:
<p>,<div>,<h1>~<h6>,<ul>,<li>,<ol>,<dl>,<dt>,<dd>等
替换元素:(浏览器根据其标签的元素与属性来判断显示的具体内容)
<img>,<input>,<textarea>等
边框属性
边框宽度(border-width)
边框颜色(border-color)
边框样式(border-style)
设置元素边框宽度 border-width: thin| medium| thick| 长度值
设置元素边框颜色 border-color: 颜色|transparent(全透明)
设置元素边框样式 border-style: 值
序号 | 值 | 描述 |
---|---|---|
1 | none | 定义无边框(默认值) |
2 | hidden | 与"none"相同,除非在表格元素中解决边框冲突时 |
3 | dotted | 定义点状边框。在大多浏览器中呈现为实线 |
4 | dashed | 虚线。在大多浏览器中呈现为实线 |
5 | solid | 实线 |
6 | double | 双线 |
7 | groove | 3D凹槽边框 |
8 | ridge | 3D垄状边框 |
9 | inset | 3Dinset边框 |
10 | outset | 3Doutset边框 |
11 | 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:[宽度][样式][颜色]
内边距属性
设置元素的内容与边框之间的距离(内边距或填充),分四个方向(上右下左)
padding-top: 长度值 | 百分比
padding-right: 长度值 | 百分比
padding-tottom: 长度值 | 百分比
padding-left: 长度值 | 百分比
说明:值不能为负值
盒子在网页中占的空间不单单与width和height有关,还与padding有关
内边距属性缩写
- padding: 值1; //四个方向都为值1
- padding: 值1 值2; //上下=值1 左右=值2
- padding: 值1 值2 值3; //上=值1 左右=值2 下=值3
- padding: 值1 值2 值3 值4; //上 右 下 左(顺时针)
外边距属性
- margin-top: 长度值 | 百分比 | auto
- margin-right: 长度值 | 百分比 | auto
- margin-bottom: 长度值 | 百分比 | auto
- margin-left: 长度值 | 百分比 | auto
说明:值可以为负
设置元素与元素之间的外边距(外边距),四个方向(上右下左)
- margin: 值1; //四个方向都为值1
- margin: 值1 值2; //上下=值1 左右=值2
- margin: 值1 值2 值3; //上=值1 左右=值2 下=值3
- margin: 值1 值2 值3 值4; //上 右 下 左(顺时针)
默认情况下,相应块级元素存在外边距
声明margin属性,覆盖默认样式
body,h1,h2,h3,h4,h5,h6,p{ margin : 0 };
margin值为auto,实现水平方向居中效果(由浏览器计算外边距)
外边距属性
- 垂直方向,两个相邻元素都设置外边距,外边距会发生合并
- 合并后外边距高度 = 两个发生合并的外边距的最大值
HTML元素分类
块级元素,占一行
<p>,<div>,<h1>~<h6>,<ul>,<li>,<ol>,<dl>,<dt>,<dd> 等
行级元素(内联元素),一行显示
<span>,<a>,<em> 等
display属性
inline
元素将显示为内联元素,元素前后没有换行符**
block
元素将显示为块级元素,元素前后带有换行符**
inline-block
行内块元素,元素显示为inline,具有block相应特性**
none
此元素不会被显示**
作者:快乐油腻小老头
原文链接:https://www.jianshu.com/p/4f9635b788f9