一、列表属性
<style>
ul{
list-style-type: disc;
/*
取值：
disc 实心圆
circle 空心圆
square 实心方块
none 无效果
*/
list-style-image: url(01.jpg); /* 相对路径 如果要展示不同的图片，可使用类选择器*/
list-style-position: inside;
/* inside 置于列表内部
outside 置于列表外部 （默认） */
}
</style>
</head>
<body>
<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
</ul>
</body>list-style-type ：定义列表符合样式
list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(无效果)
list-style-image ：将图片设置成列表符合样式
list-style-image：url(相对路径)
list-style-position ：设置列表项标记的放置位置
list-style-position：outside(列表外部，默认值)/inside(列表内部)
简写：list-style:(无先后顺序要求)
其中list-style:none; 去除列表符号
二、背景属性
1.背景颜色
background-color:...;
样式：写英语单词(red、yellow、blue)；rgba(红，绿，蓝，透明度)；#000000；
2.背景照片
background-image: url(相对路径);
ps:如果图片小，图片默认平铺效果；如果图片大，则会自动裁剪适应背景大小
3.背景图片的平铺
background-repeat:....;
样式：
- repeat-x(只在x轴上平铺)
- repeat-y(只在y轴上平铺)
- repeat(自动平铺)
- no-repeat(不平铺)
4、背景图片的定位
background-position:....;
样式：有两个值
- 20px 20px ; 距离左边、上边均为20px
- 10% 10%； 距离左边上边分别为宽度的10%和高度的10%
- left center right ;
- right center bottom;
5、 图片大小
background-size:....;
样式，有两个值
- 400px 400px; 图片尺寸
- 100% 100%; 图片尺寸大小为宽度的100%和高度的100%
- cover: 将背景图像拓展至足够大，以使背景图像完全覆盖背景区域.当如果放大的足够大会导致无法显示再背景定位区域中
- contain: 将图像拓展至最大尺寸，以使其宽度和高度完全适应内容区。铺不满格子，会导致留白
6 、图片的固定与滚动
background-attachment:....;
- scroll 滚动
- fixed 固定 固定再浏览器的左上角，相对于浏览器
ps:固定之后就相对于浏览器窗口，与盒子就没有关系了，可用来制造视察效果。
7、背景属性的复合写法
将背景属性都复合到background里来设置
- 用空格隔开
- 顺序可以换
- 可以只取一个值，但是如果在复合属性中有值没写，会自动默认没设置，放在后面的能覆盖前面的值
background-size属性不能复合，只可以单独使用
三、浮动属性
浮动的作用：
- 定义网页中的其他文本如何环绕该元素显示
- 让竖着的东西横着显示
- float
- left: 靠左边显示
- right：靠右边显示
- none：无效果
tips：
一行排不满，会自动换行显示；
当有多个浮动属性标签时，按照“先到先得”原则
当大小不一时，按照“能节约就节约，见缝插针”原则
文字部分不能被浮动标签遮挡，会被挤出来
浮动起来之后会存在高度塌陷，会造成后面的标签内容上移，解决方法有：
- 用一个固定高度把浮动代码写死
- 采用清浮动属性，加在补位元素的标签上
清浮动： 只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置
clear：none(允许前面有浮动)/ left(不允许前面有右浮动) right(不允许前面有左浮动) both(不允许前面有浮动)
- 在浮动标签后加一个盒子，采用内联样式清除浮动
例： <div style="clear: left;"></div>
- overflow: hidden 加在浮动元素上，让浮动元素计算高度，对后面没有影响
四、盒子模型
在学习盒子模型之前，我们先来了解一些名称定义吧
1、padding 内边距(px)
padding：1个值(四个方向都一样) ;
2个值(上下、左右)
3个值(上，左右，下)
4个值(按顺时针方向，上，右，下，左)
背景色可以蔓延到内边距
可以设置单一方向内边距： padding-方向： ； top bottom left right
不支持负数
2、border 边框(px)
border-width: 粗细
border-style: solid(单实线) double(双实线) dashed(线段线) dotted(点状线)
border-color: 颜色
简写： border： 粗细 样式 颜色
背景色也能蔓延到边框,背景色和样式可以设置四个值
可以设置单一方向 border-方向: ; top bottom left right
3.margin 外边距(px)
margin也可以设置二、三、四个值，类似于padding
也可以只设置单一方向 margin-方向： top bottom left right
但是背景色不会蔓延了
外边距支持负值，表示反方向
margin清零方案 *{margin: 0;}
设置盒子居中方案： margin：0 auto;(两个值，上下间距为0，左右居中)
需要解决的两个问题：
1.兄弟关系，两个盒子垂直外边距与水平外边距问题：
垂直方向，外边距取最大值
水平方向，外边距会进行合并处理
2.父子关系，给子加外边距，但作用于父身上（传递到父盒子中），怎么解决：
1.将子的margin-top转换为父的padding-top，但是要注意高度计算
2.给父盒子设置一个边框
3.给子盒子或者父盒子加上浮动
4.overflow: hidden; 放在父节点的样式中，不会对外界产生影响