前端——CSS属性相关

宽和高

width：属性可以为标签设置宽度

height：属性可以为标签设置高度

注意：块级标签才能设置宽度，行内标签的宽度由内容决定

<style>
    div {
         200px;	/*设置宽度*/
        height: 400ps;	/*设置高度*/
    }
</style>

字体属性

文字类型

font-family可以选择文字的类型（比如：微软雅黑、宋体、楷体……）

p {
    font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
}

字重（粗细）

font-weight：用来设置字体的字重（粗细）

有这几个属性值

normal：默认值，标准粗细

bold：粗体

bolder：更粗

lighter：更细

100-900：设置具体粗细，400等同于normal，而700等同于bold

inherit：继承父类元素字体的粗细值

p {	
    font-weight: bold;
}

字体颜色

设置字体颜色有三种方式

p {
    /*第一种：颜色名称*/
    color: red;
    /*第二种：# + 十六进制*/
    color: #FF0000;
    /*第三种：RGB值*/
    color: RGB(255,0,0);
    /*还有rgba*/
    /*第四个值0.3为alpha，制定了色彩的透明度/不透明度，范围在0.0-1.0之间*/
    color: rgba(255,0,0,0.3);
}

文字属性

对齐方式

text-align：属性规定标签内的文本的水平对齐方式

left：左边对齐（默认值）
right：右边对齐
center：居中对齐
justify：两端对齐

p {
    text-align: center;
}

文字装饰

text-decoration：用来给字体添加特殊效果

none：默认，自定义标准的文本
- 这里我们会发现a标签默认会有默认的下划线就感觉很丑，很low，这里我们把他的下换线去掉
```
a {
    text-decoration: none;
}
```
underline：文本下加一条线
overline：文本上加一条线
line-through：为文本加一条从中间穿过的线
inherit：继承父标签的text-decoration属性值

p {
    text-decoration: underline;
}

首行缩进

text-indent：将段落的第一行缩进XX像素

p {
    text-indent: 32px;
}

背景属性

可以使用纯色和图片当做背景

background-color：用来设置背景颜色

background-image: url("图片地址")：用来设置背景图片

background-repeat：用来设置背景图片是否平铺，默认repeat：平铺，no-repeat：不平铺、repeat-x：水平方向平铺、repeat-y：垂直方向平铺

background-position：设置背景图片的位置有left、right、top、bottom也可以使用像素值

上面的这些属性都可以汇总简写到：background中

.c1 {
    height: 400px;
     500px;

    /*背景颜色*/
    background-color: aquamarine;

    /*背景图片*/
    background-image: url("a.jpg");
    background-repeat: no-repeat;   /*不平铺*/
    /*background-repeat: repeat-x;    !*水平平铺*!*/
    /*background-repeat: repeat-y;    !*垂直平铺*!*/

    /*背景图片位置：第一个值调节上下，第二个值调节左右*/
    background-position: 100px 20px;

    /*可简写*/
    /*background: aquamarine url("a.jpg") no-repeat center center;*/
}

背景图片小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片应用案例</title>
    <style>
        #d2 {
            background-image: url("b.png");
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<div style="height: 400px;background-color: red"></div>
<div style="height: 400px;background-color: yellow"></div>
<div style="height: 400px" id="d2"></div>
<div style="height: 400px;background-color: blue"></div>
</body>
</html>

边框（border）

边框属性

边框有四边分别是left，top，right，bottom

border-style：边框样式
- none：无边框
- solid：实线边框
- dashed：矩形虚线边框
- dotted：点状虚线边框
border-color：边框颜色
border-width：边框粗细

 div {
     /*边框样式*/
     border-style: solid;

     /*边框颜色*/
     border-color: red;

     /*边框粗细*/
     border- 5px;

     /*边框每一边都可以设置独有的样式、颜色、粗细*/
     border-top-style: dashed;

     /*边框属性也支持简写 都放入border中就可以*/
     border: solid 5px blue;

}

画圆

通过border-radius可以实现圆角边框

div {
    height: 100px;
     100px;
    border-radius: 50%;
}

display属性

display用于控制HTML标签的显示效果

display:"none"：标签存在，但在浏览器中不显示
display:"block"：默认占满页面整个宽度，如果设置了指定的宽度，剩下的用margin填充
display:"inline"：按照行内标签格式显示
display:"inline-block"：让标签具有行内标签和块级标签的特点

display:"none"与visibility:"hidden"的区别

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS盒子模型

盒子模型中包含了border（边框）、margin（外边距）、padding（内边距/内填充）以及标签（也称之为元素）

margin：外边距，设置标签与标签之间的距离

border：边框，标签的边框

padding：内边距，标签内部文本与边框之间的距离

margin-外边距属性

.d1 {
     200px;
    height: 200px;
    /*顶部(上方)外边距*/
    margin-top: 10px;
    /*左侧外边距*/
    margin-left: 20px;
    /*底部(下方)外边距*/
    margin-bottom: 30px;
    /*右侧外边距*/
    margin-right: 40px;
}
.d2 {
    /*简写方式*/
    margin: 10px 20px 30px 40px;
}

#d2 {
    /*1个属性值，表示所有的外边距*/
    margin: 10px;
    /*2个属性值：第一个值是上下外边距，第二个值是左右外边距*/
    /*margin: 20px 40px;*/
    /*3个属性值：第一个值是顶部(上方)外边距，第二值是左右外边距，第三个值是底部(下方)外边距*/
    /*margin: 20px 30px 40px;*/
    /*4个属性值 上 右 下 左 顺时针*/
    /*margin: 20px 30px 40px 50px;*/
}

PS：一般浏览器都会自动给body标签增加8px的外边距，如果需要，需要我们自己取消

网页内的便签都水平居中，则通过设置margin处理

margin: 0 auto; /*水平居中*/

padding内填充

.d1 {
     200px;
    height: 200px;
    /*顶部(上方)内填充*/
    padding-top: 10px;
    /*左侧内填充*/
    padding-left: 20px;
    /*底部(下方)内填充*/
    padding-bottom: 30px;
    /*右侧内填充*/
    padding-right: 40px;
}
.d2 {
    /*简写方式*/
    padding: 10px 20px 30px 40px;
}

#d2 {
    /*1个属性值，表示所有的内填充*/
    padding: 10px;
    /*2个属性值：第一个值是上下内填充，第二个值是左右内填充*/
    /*padding: 20px 40px;*/
    /*3个属性值：第一个值是顶部(上方)内填充，第二值是左右内填充，第三个值是底部(下方)内填充*/
    /*padding: 20px 30px 40px;*/
    /*4个属性值 上 右 下 左 顺时针*/
    /*padding: 20px 30px 40px 50px;*/
}

浮动（float）

在css中，任何元素都可以浮动

浮动元素会产生一个块级框，二不论它本事是何种元素

关于浮动的两个特点

浮动的框可以向左或向右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在一样

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

<style>
    body {
        margin: 0;
    }
    .c1 {
        height: 100px;
         100px;
        background-color: red;
        float: left;
    }
    .c2 {
        height: 100px;
         100px;
        background-color: green;
        float: right;
    }
</style>

详情： https://www.w3school.com.cn/css/css_positioning_floating.asp

清除浮动

clear属性规定元素的哪一侧不允许其他浮动元素

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧不允许浮动元素
none	默认值，允许浮动元素出现在两侧
inherit	规定应该从父元素继承 clear 属性的值。

PS：clear属性只会对自身起作用，而不会影响其他元素。

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

固定高度
伪元素清除法
overflow：hidden

伪元素清除法（使用较多）

.clearfix:after {
            content: " ";
            display: block;
            clear: both;
}

overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow x （设置水平方向）
overflow y（设置垂直方向）

圆形头像实例

body {
            margin: 0;
            background-color: antiquewhite;
        }
        .c1 {
            height: 100px;
             100px;
            border-radius: 50%;
            border: 5px solid white;
            /*background-image: url("111.png");*/
            /*background-repeat: no-repeat;*/
            overflow: hidden;
        }
        img {
            max- 100%;
        }