CSS元素的基本应用（附加京东面试题）

ONE！

列表~

列表分为有序列表和无序列表还有定义列表（ul和ol，dl）

ul 无序列表

ul它天生自带内边距  还有一个 p 标签也是天生就自带内边距的（内边距 padding）

list-style： 这是样式属性 除去列表前的符号（ul的列表样式是disc和circle还有square；ol的样式是1234这样的类型（如果想要消除这个样式就得使用这个属性

list-style的属性值有 circle（空心圆） dic（实心圆）square（矩形）none（空）

ol 有序列表

1.内部必须有子标签<li></li>

2.天生自带内外边距

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

有序列表如果想要改变前面的1234，可用type这个标签属性来改变

dl自定义列表

dl是自定义列表，它中间包括dt（小标题） dd（内容），有三部分组成

列表的作用

做二级菜单，导航等

这里是下一个内容，也是一个比较热的探讨话题

备注

margin和padding问题的探讨：

第一种 margin：200px 只设置一个值， 这说明它的四周（top right bottom left）都是200px

第二种 margin：200px 100px； 设置两个值 这说明它的 上下是200px 左右是100px

第三种 margin：200px 50px 100px； 设置三个值 这说明它的 上是200px 右是50px 下是100px

第四种 margin：200px 50px 100px 50px； 设置四个值 这说明它的 上是200px 右是50px 下是100px 左是50px

（它的顺序是是逆时针顺序转动的）

padding 同上

实际占用的空间大小：width+border*2+padding*2+margin*2

实际高度=height+padding-top+padding-bottom+border*2

margin的坍塌现象是什么？

相邻的两个块级元素同时这是margin时，他们之间的外边距不会叠加，会取最大的值，这种现象叫做margin的塌陷

下一个是块级标签和内敛标签

有的标签在设置背景的时候会独占一行，还有的会随着内容的增减而改变自己的空间大小根据以上现象，标签分为块级标签和内敛标签

块级标签有：div p h1-h6 ul li dl 等

内敛标签有：span img i b a em icon(矢量标签) 等

二者的区别

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

内敛：1内敛不会独占一行 2.内敛不可以设置宽高 3.内敛元素的margin中上下去不了作用

二者的转换

块级转行级

给块级元素添加属性 display：line； display是显示的意思 inline 是行的意思

行级转块级

给行级元素添加属性 display：block；  block是块的意思

行级块元素

需要给元素添加属性 display：block；

（这个时候就可以给它设置宽高了，并且可以在一行了，margin可以随便使用）

备注

line-height  行高的意思，设置字体的垂直位置

line-height的值和height的值相同  文本就上下居中

拓展 line-height的属性值为：数字；像素；这两种

当属性值为2 的时候 line-height的值是2*font-size的大小=36px

并集选择器（这是讲的第八个选择器了）

并集（用符号“*”）选择器 的利弊

好处：就是省事（用白话来说），因为它选择的是body内全部的标签

弊端：也是因为它太省事了，因为它选择的是全的标签，所以也会选择没有用的标签，这无疑是增大了它的负荷，所以也是它的弊端。