目录
css相关参数介绍
边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
/* margin-left: -110px; */
/* 内边距 : 边框距离内容的长度*/
/* padding:100px; */
/* 上下内边距 左右边距*/
/* padding: 100px 500px; */
/* 上 右 下 左 */
/* padding: 10px 100px 200px 300px; */
/* 距离上边界的长度 */
/* padding-top: 100px; */
/* 距离左边界的长度 */
/* padding-left: 100px; */
/* 距离底边界的长度 */
/* padding-bottom: 100px; */
/* 距离右边界的长度 */
/* padding-right: 100px; */
/* 外边距 ：边界距离其他标签或者页面的长度*/
/* margin:100px 200px ; */
/* margin: 10px 100px 200px 400px; */
/* 左边距 */
/* margin-left: 100px;
margin-top: 100px;
margin-right: 100px;
margin-bottom: 100px; */
border: 1px solid red;
/* 默认情况下块元素的宽跟页面相同，高的默认值是0 */
}
</style>
</head>
<body>
<div>11111111111</div>
<p>22222222222</p>
</body>
</html>边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
/* border缩略写法*/
/* border: dashed 1px red; */
/* 以下三个属性完全等价于上面的边框 */
border-width: 1px;
/* border-color: red; */
border-style: solid;
/* 将四个角进行圆化处理 */
/* border-radius: 50%; */
/* 左上角圆化 */
/* border-top-left-radius: 50%; */
/* 右下角圆化 */
/* border-bottom-right-radius: 50%; */
/* 右上 */
/* border-top-right-radius: 50%; */
/* 左下 */
/* border-bottom-left-radius: 50%; */
/* 左边绿色 */
border-left-color: green;
border-top-color: red;
border-right-color: yellow;
border-bottom-color: purple;
border-left-style: dashed;
border-top-style: dotted;
border-right-style: groove;
border-bottom-style: solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html>伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
/* ul>li{
border: 1px solid red;
} */
/* 标签中的文字的第一个字符做渲染 */
/* ul>li::first-letter{
font-size: 50px;
color: rebeccapurple;
} */
/* ul>li::first-line{
font-size: 50px;
color: rebeccapurple;
} */
ul>li::before{
/* 在写before伪元素是，content必须存在，否则整个伪元素无效 */
content: "";
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid blue;
margin-right: 10px;
margin-top: 20px;
background-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<ul>
<li>壹234567890</li>
<li>贰asdasdfsdf</li>
<li>叁ccccccc</li>
</ul>
</body>
</html>太极图案例实现、
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: burlywood;
}
div{
width: 0;
height: 200px;
border-left-width: 100px;
border-left-color: white;
border-left-style: solid;
border-right-width: 100px;
border-right-color: black;
border-right-style: solid;
border-radius: 50%;
}
div::before,div::after{
content: "";
width: 25px;
height: 25px;
display: block;
background-color: white;
border: 37.5px black solid;
border-radius: 50%;
margin-left: -50px;
}
div::after{
border-color: white;
background-color: black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>