开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
外部样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表：
<style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>
行类样式：
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
文本省略号：
/*单行省略号，超过一定宽度出现省略号 */
width:150px;
/*不换行 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*多行省略号，超过一定行数出现省略号 */
width: 100px;
height: 30px;
font-size: 14px;
line-height: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
垂直水平居中实现：
/* 文本水平居中 */
text-align:center;
/*水平居中*/
margin:auto;
/* 块元素垂直水平居中 */
/* 父元素相对定位 */
.parent {
/* 先来给父容器(父元素)设置宽高
width: 300px;
height: 300px;
background-color: skyblue;
position: relative;
}
/* 子元素绝对定位 */
.child {
width: 100px;
height: 100px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
/* 通过transform属性的进行位移 */
transform: translate(-50%,-50%); /*百分比是按照当前元素的宽高而定*/
/* 也可以写成 transform: translate(-50px,-50px); */
/* 这里已知宽高，也可以直接通过设置 margin-left: -50px 和margin-top: -50px 来实现位移*/
}
/* 弹性盒垂直水平居中 */
display:flex;
justify-content: center;
align-items: center;
盒子模型：
/*标准盒模型 ,width,height->content */
box-sizing: content-box;
/* 怪异盒模型,width,height->content+padding */
box-sizing: border-box;
边距：
/* 内边距 ,上右下左*/
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
/* 上下10px,左右20px */
padding:10px 20px 10px 20px;
/* 上下10px,左右20px */
padding:10px 20px;
/* 上下左右均为10px */
padding:10px;
/*margin 同理 */
