CSS基础学习（二）

一、列表属性

<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; 放在父节点的样式中，不会对外界产生影响