前端学习：CSS核心属性--列表和边框属性

CSS核心属性–列表和边框属性

列表一共有三种：无序，有序，自定义。
边框：可以理解为内容的一个辅助线。

1.边框属性

1.1 列表项的类型

属性：list-style-type
取值：
disc–黑色实心原点
circle–黑色圆环
square–黑色实心方块
none–取消列表项

1.2 列表项的图片

如果添加列表项图片时会把其类型覆盖掉。
属性：list-style-image：url（路径）
注意：实际开放过程中，不会选择图片作为列表项，而是选择背景图片为列表项，因为方便调整位置。

1.3 列表项的位置

属性：list-style-position
取值：
outside（外面，默认值）
inside（里面）

列表的复合属性

以上三个属性，只是对一个单一的样式进行修饰，实际情况中我们会更多选择复合属性。
复合属性：
list-style：type image positio
注意：三个取值，可以调整位置，可以跟一个值，也可以跟多个值。

注意

实际开发中，我们更多使用的一行代码：
list-style：none（取消列表项的项目类型）

2.边框属性

2.1 边框的粗细

属性：border-width
取值：x y a b（实现四个方向的边框粗细，分别是上，右，下，左）

2.2 边框的颜色

属性：border-color
取值 x y a b（实现四个方向的边框颜色，代表方向同上）

2.3 边框的样式

属性：border-style
取值：（实现四个方向的边框样式，代表方向同上）
solid–单实线
dashed–虚线（线段）
dotted–虚线（点状）
double–双实线

边框的复合属性

属性：border：（例如：10px solid gray）
取值：
边框的粗细
边框的样式
边框的颜色
注意：后面跟多个值时，需要用空格隔开。

2.4 边框单个方向修饰

即修饰一个方向的边框
属性：border-方位词：（例如：10px solid gray）
border-top–上边框
border-right–右边框
border-bottom–下边框
border–left–左边框

2.5 浮动属性

属性：float
取值：
left–左浮动
right–右浮动
none–默认值不浮动
注意：

• 默认是不浮动的。
• 浮动元素是不占页面空间的，然后导致后面的元素补上去。
• 单个元素浮动时，只会在自己本行的左右浮动。
• 所有的元素都浮动:都会让元素横向显示。
  左侧浮动:从左侧开始依次向右显示。
  右侧浮动:从右侧开始依次向左显示。

总结:只要布局的时候想让元素横向显示,我们目前来看就是使用所有的元素都浮动。

2.6 清除浮动

即清除浮动带来的影响。
属性：clear
取值：
left–清除左浮动
right–清除右浮动
both–清除左右浮动

注意

最上面三个单一的属性，如果单独使用的话，粗细和颜色不能实现效果的，但是样式可以实现，默认是3px 黑色的单实线。

无论是单一还是复合属性，都会一下子实现四个方向的边框。