面试1
效果
为什么会出现不同的效果?
浏览器在解析第二个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:200px;设置一个值 说明top right bottom left 都是200px
Margin:200px 100p;设置两个值 上下是200px 左右是100px
Margin:200px 50px 100px 上是200px 左右是50px 下是100px
Margin:200px 50px 100px 50px; 上是200 右是50px 下是100px 左是50px
Padding同上
实际占用的空间大小
通过分析我们发现 一个元素实际占用的空间是
Width+border*2+padding*2+margin*2