效果为
为什么还出现出现不同的效果?
浏览器在解析第二个p的时候,因为第二个字母见没有空格,它会认为这是一个单词没有写完,所以不会换行
列表
1.无序列表ul
第二,内部必须有子代标签<li></li>
第二 ul天生自带内外边距 还有一个 p 标签
并集选择器
*选择器 有好处也有弊端
好处 就是省事,弊端,就是因为太省事了,加大了浏览器的负荷。
解决的办法就是 按需选择。
list-style 这是样式属性 除去列表前的符号
list-style的属性值 circle空心圆 disc实心圆 square正方形 none空
ol有序列表
1.内部必须有子代标签<li>
2.天生自带内外边距
ol和ul不同之处就在前面符号的区别。
用标签属性type修改
3.自定义列表
dl自定义列表 dt是小标题 dd是内容
列表能做什么?
做二级菜单 做导航
备注
margin和padding问题的探讨
margin:200;设置一个值 说明 top right bottom left 都是200px
margin:200px 100px; 设置两个值 上下是200px 左右是100px
margin:200px 50px 100px 上是200px 左右是50px 下是100px
margn:200px 50px 100px 50px; 上是200 右是50px 下是100px 50px
padding同上
实际占用的空间大小
通过分析我们发现 一个元素实际占用空间是
width+border+*2+padding*2+margin*2
一个标签元素的是高度
实际高度=height+padding-top+padding-bottom+2*border
margin的塌陷现象是是很么?
相邻两个块级元素同时设置margin时,他们之间的外边距不会叠加,会取最大的。这种现象叫margin塌陷。
5.有的标签设置背景时会独占一行,还有的会随着内容的增减而改变自己的空间大小
根据以上现象,标签又分
块级: p h1-h6 div ul li ol dl 等
内敛: span img i b a em icon (矢量标签)
二者区别
块级
1,块级元素会独占一行
2,块级可以设置1宽高
内敛
1,内敛不会独占一行
2,内敛不可以设置宽高
3,内敛元素的margin上下不起作用了
二者转换
块级转行级
给块级元素添加属性 display:inline;display 显示 inline hang
行级转块级
给行级元素添加属性display:block; block块
行级块元素
给需要的元素添加属性 display:inline-block;
(可以设置宽高了,可以在一行了,margin可以随便使用了)
备注
line-height 行高 设置字体的垂直位置
line-height的值和height的值相同 文本就上下居中
拓展 line-height:50px/2;
当是2的时候 line-height的值是2*font-size的大小==36px