9.13日笔记

1.面试题

为什么会出现不同的效果？

浏览器在解析第二p的时候，因为字母之间没有空格，他认为是一个单词没有写完，所以不会换行。

列表的分类

1.无序列表 ul

内部必须有字标签<li></li>

ul天生自带内外边距，还有一个p标签

并集选择器的好处和弊端

好处： 因为省事

弊端：就是因为太省事，增加了浏览器的负荷。

解决办法：按需选择

list-style这个是样式属性

list-style的属性值：circle(空心圆）disc（实心圆）square（正方形）none（空）

ol 有序列表

内部标签必须有子标签<li>

天生自带内外边距

ol和ul的不同之处在于前面符号的区别

用标签属性tapy修改

自定义列表

DI是自定义列表  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

 

一个标签元素的实际高度是=height+padding-top+padding-bottom+2*border

margin的塌陷是什么

相邻两个元素同时设置margin时，他们之间的外边距不会叠加，会取最大的，这种现象就叫塌陷现象。

有的标签设置背景时会独占一行有的则会根据内容的增减改变自己的空间大小

根据以上现象，标签有分为

块级标签：<p/h1-h6/div/ul/il/ol/dl>

内敛标签（也可以叫行级标签）:<span/img/i/b/a/em/icom(矢量图)>

两者的区别

块级元素:1.会独占一行 2.可以设置宽高

内敛元素：根据内容改变空间大小，不能设置高宽，margin上下无作用

二者的转换

块级转行级

给块级元素添加属性：display:inline; display显示line"行"

行级转块级：给行级元素添加属性：display：block；...block块

行级快元素:给需要的元素添加属性：display：inline-block
（可以设置宽高了，可以在一行了，margin可以随便使用）

备注
line-height：行高  设置字体的垂直位置
line-height 的值和height的值相同，文本就上下居中
拓展  line-height：50px/2
当是2的时候line  height的值是2*font size的大小====36px