CSS学习第三期（新手勿喷）

今天是我第三天学习CSS，今天在昨日的基础之上，学习了关于盒子的CSS属性，以及背景的属性，还有选择器和透明度，浮动，话不多说开始今天的分享。

一。盒子的属性

盒子的属性中有宽，高，背景颜色，文字颜色，文字的粗细，文字的大小，文字的水平对齐，上下和居中，边框的颜色，边框的宽度，还有变宽的线条；

1.1、盒子的宽高

盒子的宽高与html中input标签一样，给其一个数值输入px即可，注意：vscod中px是指像素。

div{
     width:500px;
     height:500px;

}

1.2、盒子的背景颜色

盒子的背景颜色是指一个盒子在页面中显示时的颜色，可以设置许多颜色，首要原则还是要让盒子中的文字或者图片可以凸显出来，一般用的最多的是浅灰色，默认为白色，background-corlor：属性值

1.3、文字的粗细

文字的粗细一般用于凸显比较重要的文字才会应用，和标题所用h1-h6或者段落中的用的加粗的标签作用类似，font-weight：属性值

1.4、文字的大小

文字的大小也是用于用于在阅读过程中引起读者的注意，与文字的粗细起同一个作用，能够将文字变大或缩小，font-size：属性值

1.5、文字的对齐方式

文字的对齐方式有左中右对齐在CSS中叫做水平对齐，还有上中下对齐，其作用用来调整文字在页面中的位置，text-align：属性值；是对齐方式的书写格式，属性值左对齐为left，中间对齐属性值为center，右对齐的属性值为right就是我们之前所学的英语中的方位，是不是很简单呢，注意：上中下的对齐方式所用的属性为line-height：属性值，到这很多不懂的就要问了为什么同样都是调整文字的位置左右对齐和上下对齐所用的不是一个属性呢？

text-align：以值为center为例，当前块级容器里的所有行内元素(包括img)在当前容器中横向居中，所有子块级容器里的所有行内元素在它的直接父容器中居中，不影响块级元素的位置。

line-height：可以用在段落中，改变多行文字之间的行距；把某容器的line-height设置与height相同的值，可以使容器中的一行内容纵向居中，仅限一行内容(不要含<br/>，块级元素前后隐含<br/>)，对行内元素(包括img)有效，对块级元素无效，但对块级元素里的行内元素有影响。

这就是两者的区别，所以一定要切记text-align是用来调整文字左中右水平位置挪动的，line-height是用来调整文字纵向移动的，line-height的属性值有：top（上）、center（中）、right（右）三个值。

1.6边框

border是用来调整边框的，边框的宽度是border后面添加像素值，常用的像素值是1px，像素值后面跟的是边框线的线条种类，一共是三种solid是实线，dashed是虚线，double是双线。

二、背景属性

2.1、背景的颜色

背景是指边框线的内的区域，其属性是background-后面添加color等，背景颜色是background-color：属性值。

2.2、背景图片以及url路径

之前的学习我们知道img是指图片，当background-后面跟上image这个单词时就代表了我们需要通过路径找到图片将其添加进入页面之中，其和img属性无任何区别，书写方式为background-image：url（图片路径）；

2.3、背景平铺

背景图片默认属性值为no-repeat意思为不平铺，background-position-x：属性值；这是关于背景图片的横向平铺的，纵向平铺只需要将x改为y即可属性值换为纵向的方向单词。

2.4、背景图片的大小

背景图片的大小是background-size和文字大小是一样的，只是将font换为background，写入像素值即可，第一个像素值代表了宽，第二个像素值代表高。切记背景图片的大小要放在background的下面。

三、后代选择器与兄弟选择器和子级选择器

继昨天所学的三个选择器后今日选择器家族又加入三个新的成员后代选择器、子级选择器、兄弟选择器。

后代选择器顾名思义是指在其上一级选择器中通过空格直接进行查找的选择器。

div ul li{


}

如代码中所展示的后代选择器是可以直接进行查找的。

子级选择器是通过一层一层进行查找的。

div>ul>li

子级选择器需要通过div这个标签找到ul然后再找到li。

兄弟选择器用于同级的两个标签，通过一个标签查找相邻的另一个标签。

四、透明度

透明度分为两种，第一种是让颜色透明，内容不会变化，最后一个数字是透明度 0-1之间取值，background: rgba(0, 0, 0, .数值)。

第二种是颜色和内容同时会透明，取值 0-1之间取值opacity: 数值;透明度一般用于比如弹框所用的遮罩，京东等平台的打折或者小说阅读网站中，一般将其用于遮罩效果。

五、浮动

浮动一般用于两个级两个以上的图片或者盒子，float：属性值（left或right），浮动属性使用时会造成塌陷效果，那么怎么将浮动效果清除掉呢，这就需要用到clear属性，clear属性就是用来清除浮动效果的，其属性值有left（左）、right（右）、both（左右浮动全部清除）。

这就是我今天的所有学习内容，希望对各位朋友有所帮助。