前端——CSS属性相关
前端——CSS属性相关
宽和高
width：属性可以为标签设置宽度
height：属性可以为标签设置高度
注意：块级标签才能设置宽度，行内标签的宽度由内容决定
<style>
div {
width: 200px; /*设置宽度*/
height: 400ps; /*设置高度*/
}
</style>
字体属性
文字类型
font-family可以选择文字的类型（比如：微软雅黑、宋体、楷体……）
p {
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
}
字体大小
font-size：控制字体大小
p {
font-size: 16px;
}
字重（粗细）
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;
width: 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-width: 5px;
/*边框每一边都可以设置独有的样式、颜色、粗细*/
border-top-style: dashed;
/*边框属性也支持简写 都放入border中就可以*/
border: solid 5px blue;
}
画圆
通过border-radius可以实现圆角边框
div {
height: 100px;
width: 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 {
width: 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 {
width: 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;
width: 100px;
background-color: red;
float: left;
}
.c2 {
height: 100px;
width: 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;
width: 100px;
border-radius: 50%;
border: 5px solid white;
/*background-image: url("111.png");*/
/*background-repeat: no-repeat;*/
overflow: hidden;
}
img {
max-width: 100%;
}
