看似简单的东西,越是很重要,赶紧收藏起来吧!
标签的嵌套:
- 块标签可以嵌套任何标签
2.p标签绝对不能嵌套块标签 - 行标签不能嵌套块标签,可以嵌套行标签(例外a标签可以嵌套块标签)
注意:a)自己不能嵌套自己 b)display:block ;变成块之后也不能嵌套块标签\列表
列表的样式:list-style-type: none disc square
距离 内边距 ,内补丁,内补白
padding: top right bottom left
单独的四个方向:
a)padding-top: 左边距
b padding-bottom : 下边距
c padding-left : 左边距
d)padding-right : 右边距简
padding : 上下左右; 一个值
padding: 上下,左右; 两个值
padding: 上,左右,下 三个值
padding: 上 ,右,下,左, 四个值
盒子模型: 盒子=标签 标签的模型 标签在页面中占的大小 盒子模 型的组成:width /height+padding+boder 注意:如果标签设置了宽高,在设置Padding的时候会往外挤,一定要用宽高减掉padding,标签如果有需要,最好设置宽度。
margin: 外边距(盒子与盒子之间的距离)
margin: top right bottom left
单独的四个方向:
a) margin-top : 左边距
b)margin-bottom: 下边距
c)margin-left: 左边距
d)margin-right : 右边距简
padding : 上下左右; 一个值
padding: 上下,左右; 两个值
padding: 上,左右,下 三个值
padding: 上 ,右,下,左, 四个值
注意:margin塌陷,如果上下两个值一样,听一个,如果一个大,一个小,挺大的。 margin:行元素只有margin-left 和 margin-right
padding:行元素只有padding-left/padding-right/padding-bottom
很多元素自带margin和padding 写样式之前,需要把所有元素的margin和 padding都清空
*{
margin: 0; padding: 0;
}
列表
无序列表:
<ul>
<li> 内容 <li>
<li> 内容 <li>
<li> 内容 <li>
</ul>
有序列表:
<ol>
<li> 内容 <li>
<li> 内容 <li>
<li> 内容 <li>
</ol>
描述列表:
<dl>
<dt>内容标题</dt>
<dd> 内容 <dd>
<dd> 内容 <dd>
<dd> 内容 <dd>
</dl>
列表的样式:list-style-type: none disc square