目录
1、css的三种引用方式
1.内部样式：
css的基本结构：
选择器{
属性名：属性值;
属性名：属性值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内部样式 -->
<style>
.box1 {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">我是盒子</div>
</body>
</html>效果图：
2.内行样式（不推荐）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body>
<!-- 行内样式：不推荐 -->
<div style="width: 300px; height: 300px; background-color: green;"></div>
</body>
</html>效果图：
3.外部样式（推荐）：
css：
.box2 {
width: 300px;
height: 300px;
background-color: blue;
}html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式 推荐！！！！！ -->
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div class="box2">我是box2</div>
</body>
</html>效果图：
2.选择器
1、基本选择器
1.标签选择器
p{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 标签选择器 选中所有的p标签*/
p {
color: aqua;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>效果图：
2、id选择器
#box1{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* id选择器 */
#box1 {
color: pink;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>效果图：
3.类选择器：
.box2{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 类选择器 */
.box2 {
color: blueviolet;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>效果图：
4.通配符选择器（选中所有的内容）
*{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 通配符选择器 */
*{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>效果图：
2.包含选择器
1.子代选择器
.a>li{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 子代选择器 选中亲生儿子*/
.a>li {
background-color: pink;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</body>
</html>效果图：
2.后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器 找到后代所有要找的元素*/
.a li {
background-color: blueviolet ;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</body>
</html>效果图：
3.复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div {
color: pink;
}
p {
color: pink;
}
span {
color: pink;
} */
div,
p,
span {
color: red;
}
</style>
</head>
<body>
<div>小菜</div>
<p>坤坤</p>
<span>鸡哥</span>
<ul>
<li>nb</li>
</ul>
</body>
</html>效果图：
4.属性选择器
type^="te" 以te开头
type$="l" 以l结尾
type*="e" type值里边包含e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
background-color: pink;
}
input[type="password"] {
background-color: aquamarine;
}
div[id] {
width: 300px;
height: 300px;
background-color: blue;
}
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
}
/* type$="l"以l结尾 */
input[type$="l"] {
background-color: green;
}
/* type*="e" type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
}
</style>
</head>
<body>
<input type="text"><br />
<input type="password"><br />
<input type="search"><br />
<input type="url"><br />
<input type="number"><br />
<div id="aquamarine">1</div>
<div>2</div>
</body>
</html>效果图：
5.伪类选择器
link ： 表示鼠标点击之前，也称为原始状态
hover ： 表示鼠标悬停状态
active ： 表示鼠标点击状态
visited ： 表示鼠标点击之后状态
<注>这四个选择器有先后之分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
a:link {
color: aqua;}
a:hover{
font-size: 40px;
}
a:active{
background-color: blue;
font: 80px;
}
a:visited{
color: brown;
}
</style>
</head>
<body>
<a href="#">这是一个链接</a>
</body>
</html>6.结构伪类选择器
E:first-child : 匹配父元素中的第一个元素E
E:last-child : 匹配父元素中的最后一个元素E
E:nth-child(n) : 匹配父元素中的第n个元素E(odd是单数，even：偶数)
E:nth-last-child(n) : 匹配父元素中倒数第n个元素EE:first-of-type : 指定类型E中的第一个
E:last-of-type : 指定类型E中的最后一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:first-child {background-color: aqua;
}
ul li:nth-child(4)
{
font-size: 30px;
}
ul li:nth-child(odd)
{
font-family: 'Courier New', Courier, monospace;
}
p:first-of-type {
color: red;
}
p:last-of-type {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>ads</li>
<li>xzc</li>
<li>qwe</li>
<li>rtu</li>
</ul>
<h6>1</h6>
<p>2</p>
<h6>3</h6>
<p>4</p>
</body>
</html>效果图:
<注>
e：nth-child（n）选择e元素的第n个子元素，无论它是什么类型。
e：nth-of-type（n）选择e元素的第n个同类型兄弟元素，即与e元素同类型的元素中的第n个。
如下图所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:nth-child(2) {
background-color: pink;
}
ul li:nth-of-type(4) {
background-color: rgb(215, 30, 61);
}
div span:nth-child(2) {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<p>我是文字</p>
<li>1</li>
<li>2</li>
</ul>
<div>
<span>1</span>
<span>kjdscnkdscn</span>
</div>
</body>
</html>效果图
7.伪元素选择器
<注>before和after必须用到content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li::before {
content: ">";
}
ul li::after {
content: "<";
}
/* input::placeholder 表单提示词 */
input::placeholder {
color: rgb(62, 226, 56);
}
/* ::selection 选中时 */
ul li:nth-child(4)::selection {
color: pink;
}
</style>
</head>
<body>
<input type="text" name="" id="" placeholder="这里是表单提示词">
<ul>
<li>caixvkun</li>
<li>penghan</li>
<li>zhangjie</li>
<li>tangxiaofeng</li>
</ul>
</body>
</html>效果图：
3.样式
1.字体的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体</title>
<style>
div {
cursor: pointer;
/* 字体大小 */
font-size: 40px;
/* 字体加粗 */
font-weight: bolder;
/* 字体粗细（100-900 400=normal 800=bold 100-900越来越粗） */
font-weight: 900;
/* 字体是否倾斜 */
font-style: italic;
/* 修改字体 */
font-family: "微软雅黑";
/*聚合写法*/
/* italic 900可省略，字体大小，font-family必须存在 */
/* font: italic 900 70px "微软雅黑"*/
}
</style>
</head>
<body>
<div>
我是图图小淘气，面对世界很好奇
</div>
</body>
</html>效果图：
2.文本的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 100px;
background-color: pink;
text-indent: 2em;
/* 文段缩进 */
/* 文本水平对齐方式 */
text-align:center;
/* 防止文本溢出 */
overflow: auto;
/* 行高 可实现单行文本垂直居中：行高=元素高度*/
line-height: 50px;
}
a {
color: pink;
text-decoration: none;
/*文本装饰,去除了链接的下划线*/
}
</style>
</head>
<body>
<div>这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</div>
<a href="https://www.baidu.com">去百度</a>
</body>
</html>效果图：
3.背景的样式
background-repeat :图片重复方式:
background-attachment ：背景图像的位置是在视 口内固定，或者随着包含它的区块滚动。
background-position 控制图片在页面中的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
/* 高度 */
height: 4000px;
/* 背景颜色 */
background-color: aqua;
background-image: url(https://pic.52112.com/180710/JPG-180710_433/lIN3nivexm_small.jpg);
/* 取消图片重复 */
background-repeat: no-repeat;
/* 将图片固定在背景，只让内容变化 */
background-attachment: fixed;
/* 控制图片在页面中的位置 */
background-position: top right;
/* 下面是复合属性 */
/* background: fixed url(https://pic.52112.com/180710/JPG-180710_433/lIN3nivexm_small.jpg) no-repeat; */
}
</style>
</head>
<body>
</body>
</html>效果图：
4.边框设置
1 边框样式设置
border-width ： 边框宽度
border-style ：边框样式
border-color ：边框颜色
border-radius: 边框颜色
border-top-left-radius: 单独设置左上角的边框弧度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* border-width 边框宽度 */
border-width: 20px;
/* 边框样式 */
border-style:dashed;
/* 边框颜色 */
border-color: rgb(35, 223, 18);
/* 下面是连写方式 */
/* border: 4px solid black; */
/* border-radius: 50%; 边框弧度*/
/* 单独设置一个角的边框弧度 */
border-top-left-radius: 40%;
}
</style>
</head>
<body>
<div>
我是一个盒子
</div>
</body>
</html>效果图：
2.边框的合并
cellpacing : 单元格之间的间距
border-collapse ： 控制表格边框的合并方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
/* 合并相邻边框 */
border-collapse: collapse;
}
td {
border: 5px solid red;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td>dsnkd</td>
<td>cdcdzc</td>
<td>cdcd</td>
</tr>
</table>
</body>
</html>效果图：
5.阴影设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 盒子阴影 */
width: 300px;
height: 300px;
background-color: pink;
box-shadow: 20px 20px 10px 10px black;
}
p {
/* 文本阴影 */
text-shadow: red 5px 5px;
}
</style>
</head>
<body>
<div>
bvdjvdjc
</div> <br>
<p>woshi wenzi</p>
</body>
</html>效果图 ：
6.轮廓线
outline-style ：设置一个元素轮廓的样式
outline-color : 设置一个元素轮廓的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#qwe {
/* 去除轮廓的样式 */
outline-style : none;
}
#asd {
/* 设置边框的颜色 */
outline-color: aqua;
}
</style>
</head>
<body>
<input type="text"id="qwe">
<input type="text"id="asd">
</body>
</html>效果图：
7.文本域防拖拽
resize ： 设置元素是否可调整尺寸，以及可调整的方向
vertical-align： 改变与文字的对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
/* 防止文本拖拽 */
resize: none;
/* vertical-align改变与文字的对齐方式 */
vertical-align: top;
/* vertical-align: middle;
vertical-align: bottom; */
}
</style>
</head>
<body>
<span>请输入个人介绍：</span>
<textarea name="xsnsmx" id="" cols="30" rows="10"></textarea>
</body>
</html>效果图：
8.隐藏元素
display: none 脱离文档流位置不保留
visibility: hidden; 元素隐藏，位置保留
opacity ： 指定了一个元素的不透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
}
.box1 {
/* display: none; 脱离文档流，原来的位置不再保留*/
display: none;
}
.box2 { /*visibility: hidden; 元素隐藏，位置保留 */
visibility: hidden;
background-color: aquamarine;
}
.box3 {
/* opacity:指定了一个元素的不透明度 */
opacity:0 ;
background-color: rgb(161, 127, 255);
}
.box4 {
background-color: rgb(255, 127, 193);
}
</style>
</head>
<body>
<div class="box1">111</div>
<div class="box2">111</div>
<div class="box3">111</div>
<div class="box4">111</div>
</body>
</html>效果图：
9.定位
1.绝对定位
position: absolute; 绝对定位：不保留原来位置
position: relative 相对定位
子绝父相 父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动如果都没找到，则相对于浏览器进行定位
<注>位置属性值为负数时，说明在反方向上
z-index 当元素有重合时，定位中显示的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grandfather {
/* position: absolute; 绝对定位：不保留原来位置 子绝父相 父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动
如果都没找到，则相对于浏览器进行定位
*/
position: relative;
width: 1200px;
height: 1200px;
background-color: aquamarine;
}
.father {
width: 600px;
height: 600px;
background-color: pink;
margin: 200px;
}
.son {
position: absolute;
top: -20px;
left: 250px;
width: 100px;
height: 100px;
background-color: aqua;
}
.son2 {
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: rgb(203, 131, 131);
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son">1</div>
<div class="son2">2</div>
</div>
</div>
</body>
</html>效果图：
2.固定定位
position: fixed; 相对于可视区域进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 4000px;
}
div {
/* 固定定位:相对于可视区域进行定位 */
position: fixed;
right: 40px;
top: 50%;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
这是内容
</div>
</body>
</html>效果图：
3.粘性定位
position: sticky ： 让选中的内容会一直处于顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 2000px;px;
}
.one {
/* 粘性属性 ： 让选中的内容会一直处于顶部 */
position: sticky;
top: 0;
background-color: pink;
}
</style>
</head>
<body>
<p>
这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容</p>这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内<p></p>容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这<p class="one">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内<p>
容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这<p></p>是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是<p>内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这<p>是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这<p>是内容这是内<p></p>容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容<p>这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内<p></p>容这是内容这是内容这是内容<p></p>这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容<p></p>这是内容这是内容这是内容这是内容这是内容<p>这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是<p></p>内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这<p></p>是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是<p></p>内容这是内容<p></p>这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这<p></p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内<p></p>容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这是内容这是内容这这是内容这是内容这是内容这是内容这是内容这
</body>
</html>效果图：
4.列表的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* css具有层叠行，后面的指令会覆盖前面的 */
ul li {
height: 30px;
list-style: none;
/* 去除列表前的标记 */
list-style: circle;
/* 设置列表前的标记为空心圆 */
}
</style>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
</ul>
</body>
</html>效果图：
5.元素显示模式转换
display: none 将元素隐藏，脱离文档流
display: inline; 将元素转换为行内元素
display: inline-block; 将元素转换为行内块元素
display: block; 将元素转换为块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
/* display: none;隐藏元素，脱离文档流 */
display: none;
width: 300px;
height: 200px;
background-color: rgb(55, 255, 0);
}
.box1{
/* 块元素独占一行 转化为行内元素(不可设置宽高) */
display: inline;
width: 300px;
height: 200px;
background-color: aqua;
}
.box2{
/* 转化为行内块元素 */
display: inline-block;
width: 300px;
height: 200px;
background-color: rgb(170, 0, 255);
}
.box4{
/* 行内元素无法设置宽、高 转换为行内块元素 */
display: inline-block;
width: 300px;
height: 200px;
background-color: pink;
}.box5{
/*转换为块元素(独占一行) */
display: block;
width: 300px;
height: 200px;
background-color: rgb(255, 251, 192);}
</style>
</head>
<body>
<div class="box">2222222</div>
<div class="box1">这是一个盒子</div>
<div class="box2">3333333333333</div>
<span class="box4" >我是一个盒子</span>
<span class="box5" >4444444444444</span>
</body>
</html>效果图：
7.盒子模型
<注> 盒子大小：content+padding+border(不建议用盒子来布局)
1.padding（内边距 ）：
设置元素内边距。 （不允许使用负值。）
用法（顺时针旋转）：
padding:（一个值）上下左右内边距均为这个值
padding:（两个值）第一个值为上下内边距，第二个值左右内边距
padding:（三个值）第一个值为上内边距，第二个值为左右内边距，第三个值为下内边距。
padding:（四个值）第一个值为上内边距，第二个值为右内边距，第三个值为下内边距，第四个值为左内边距。（从上开始顺时针转一圈）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
padding-left: 40px;
border: 3px solid red;
}
</style>
</head>
<body>
<div>
这是一个盒子
</div>
</body>
</html>效果图：
2. margin （外边距） ：
给指定元素上下左右四个方向设置外边距
使用方式和padding一样（顺时针旋转），详见上文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
list-style: none;
background-color: pink;
margin-bottom: 30px;
}
span {
display: inline-block;
width: 50px;
background-color: pink;
margin-right: 5px;
margin: 40px;
margin: 40px 30px;
margin: 40px 30px 23px;
margin: 40px 2px 34px 40px;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<span>1</span><span>2</span><span>3</span><span>4</span>
</body>
</html>效果图：
3.解决padding和border对盒子大小的影响
box-sizing: border-box; 定义了浏览器应该如何计算一个元素的总宽度和总高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
padding: 40px;
border: 2px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quisquam aliquam dolores eligendi neque illo
velit facere deleniti nam, laboriosam quasi, ut nisi qui quae rerum. Atque ea excepturi deleniti.
</div>
</body>
</html>效果图：
3.外边框塌陷问题
父元素的第一个子元素的margin-top值会被父元素抢走
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 800px;
height: 800px;
background-color: aquamarine;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
}
.son2 {
margin-top: 10px;
}
.son3 {
margin-top: 10px;
}
.son1 {
margin-top: 300px;
}
/* margin塌陷问题
父元素的第一个子元素的margin-top值会被父元素抢走 */
</style>
</head>
<body>
<div class="father">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
</div>
</body>
</html>效果图：
解决方法：
1. 给父元素添加边框
2.给父元素加一个防溢出属性
3.给父元素加一个padding值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 800px;
height: 800px;
background-color: aquamarine;
/* 方法一：给父元素加一个边框属性 */
border: 1px solid red;
/* 方法二：给父元素加一个padding值 */
padding: 5px;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
/* 方法三：给父元素加一个防溢出属性---偏方 */
overflow: hidden;
}
.son2 {
margin-top: 10px;
}
.son3 {
margin-top: 10px;
}
.son1 {
margin-top: 300px;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
</div>
</body>
</html>效果图：
5.防文本溢出
overflow : auto 通过设置滚动条的方式防止文本溢出
overflow: hidden; 将滚动条隐藏 （看不到后面的内容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 200px;
background-color: pink;
/* 通过设置滚动条的方式防止文本溢出 */
overflow: auto;
/* 将滚动条隐藏 （看不到后面的内容） */
overflow: hidden;
/* overflow: visible;s */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed reiciendis veritatis iure provident mollitia
digns sapiente repellendus
voluptatibus eum.
Voluptatum molestiae error veniam enim corporis maxime beatae temporibus officiis earum quas magnam dignissimos,
quaerat nemo iure asperiores numquam repudiandae. Laudantium quidem sit illum veniam quo, ullam laborum beatae?
Dicta.
Aspernatur aut, dolorem ullam qui tenetur atque enim dolore, fugiat non dignissimos, obcaecati tempora a magni?
Repellat distinctio repudiandae mollitia voluptate voluptatem praesentium, quis illo, modi, quibusdam nesciunt
eaque incidunt!
Aliquid praesentium dolor reiciendis? Iusto debitis quidem velit, praesentium officiis eligendi in repudiandae
dolorem odio cum? Eveniet porro sed, suscipit voluptatum voluptatem iusto quae facere veniam animi? Ullam, quasi
voluptatem!
Molestiae ratione deleniti minus ad delectus quod molestias adipisci corrupti, praesentium reiciendis, laborum
aut dolorem, at tempora facere corporis odio iusto. Maxime illo exercitationem labore. Mollitia omnis ipsam
consequatur laudantium.
</div>
</body>
</html>6.样式继承
对父元素的设置会自动使用在子元素上
<注>不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
a链接最好在自身中修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
color: #807474;
}
/* div,
div span,
div a {
font-size: 40px;
} */
div {
font-size: 50px;
color: #807474;
}
</style>
</head>
<body>
<div>
文字<br>
<span>caixukun</span><br>
<a href="#">jige</a><br>
<i>cdjckdd </i>
</div>
</body>
</html>效果图：
7.flex布局
flex-direction: 决定排列方式
flex-wrap: wrap; 让flex布局变为多行
justify-content: 主轴上的布局
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小 */align-items: 侧轴上的布局 （和主轴上的布局相似）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 800px;
height: 800px;
background-color: pink;
/* 使用flex进行布局 */
display: flex;
/* 排列方式 */
/* flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse; */
flex-direction: row;
/* 让flex布局变为多行 */
flex-wrap: wrap;
/* 主轴上的布局 */
/* justify-content: center;
justify-content: end;
justify-content: space-around;
justify-content: space-evenly;*/
justify-content: space-between;
/* 侧轴 */
/* align-content: start; */
/* align-content: end; */
/* align-content: center; */
align-content: space-between;
/* align-content: space-around; */
/* align-content: space-evenly; */
}
.son {
width: 170px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
<div class="son">6</div>
<div class="son">7</div>
<div class="son">8</div>
</div>
</body>
</html>效果图：
flex : 1 将区域中所有空间填满，多个子项设置时意味着平分剩下的区域
order 值越小，排列时排在越靠前的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
display: flex;
width: 800px;
height: 800px;
background-color: pink;
justify-content: space-between;
}
.son {
width: 300px;
background-color: aqua;
}
.son1{
/* 将区域中所有空间填满，多个子项设置时意味着平分剩下的区域 */
flex : 1;
}
.son2 {
/* order 值越小，排列时排在越靠前的位置 */
order: -3;
}
</style>
</head>
<body>
<div class="father">
<div class="son1 son">1</div>
<div class="son2 son">2</div>
<div class="son3 son">3</div>
</div>
</body>
</html>效果图：
8.float
可用于文字围绕图片
浮动，会脱离文档流 不再保留原来位置 会造成在其下方的兄弟元素位置发生变化
当子元素全部发生浮动时，其父元素的高度可能发生塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 1000px;
background-color: pink;
}
/*会脱离文档流 不再保留原来位置 会造成在其下方的兄弟元素位置发生变化 */
/* 当子元素发生浮动时，其父元素的高度发生塌陷 */
.son { float :left; /* 使用浮动 */
width: 200px;
height: 200px;
background-color: aqua;
}
.son2 {
background-color: blue;
}
.son3 {
background-color: black;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
<div class="son son3"></div>
</div>
</body>
</html>效果图：
解决办法
1.给父级元素加高度
2.使用 clear： both； 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
height: 600px;
background-color: yellowgreen;
}
.son{
float: left;
background-color: rgb(163, 98, 98);
width: 200px;
height: 200px;
}
.son2{
/* clear 清除浮动 */
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son1 son">2222</div>
<div class="son2 son">3333</div>
<div class="son3 son">这是不会动的盒子</div>
</div>
</body>
</html>效果图：
8.渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 800px;
background-image: linear-gradient(to right, green, pink, yellow, red);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>效果图：
9.字体图标
在阿里巴巴矢量图标库中下载，并附带有教程
效果图：
10、2D
transform: translate 平移
transform: rotateZ 旋转（单位：deg）【注】旋转永远放在最后一个
transform: 放大倍数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* 平移 */
/* transform: translate(-40px, 40px); */
/* 旋转 */
/* transform: rotateZ(40deg); */
/* 旋转永远放在最后一个 */
/* 放大 */
/* transform: scale(1.5); */
/* transform: skew(40deg); */
/* 复合写法 向右下移动100px 旋转45度 缩放1.5 */
transform: translate(100px, 100px) scale(1.5) rotate(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
</body>
</html>效果图：
11.3D
transform-style: preserve-3d; 给父级元素加上该属性开启3D
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* 改变观测者与被观测者的相对位置 */
/* perspective-origin: 100px 200px; */
}
.son {
width: 300px;
height: 300px;
background-color: pink;
transform: rotateX(45deg);
/* 复合写法 */
/* transform: rotate3d(1, 1, 0, 45deg);*/
/* 旋转到背面时隐藏 */
backface-visibility: hidden;
/* 沿着底边旋转 */
transform-origin: bottom;
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
</body>
</html>效果图：
12.过渡
transition: all 5s 设置过渡动作 （谁变化给谁加）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
}
.son {
/* transition 谁变化给谁加 */
transition: all 5s;
width: 300px;
height: 300px;
background-color: pink;
}
.son:hover {
width: 800px;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
</body>
</html>效果图：
13.动画
keyframes 在动画序列中定义关键帧的样式来控制动画
animation 动画的名称
infinite alternate 往复循环动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 两步变化 */
/* @keyframes myMovie {
from {
width: 200px;
background-color: pink;
}
to {
width: 800px;
background-color: aqua;
}
} */
/* 多步变化 */
@keyframes myfirst {
0% {
width: 200px;
background-color: pink;
}
20% {
width: 400px;
background-color: green;
}
80% {
width: 800px;
background-color: red;
}
100% {
width: 1200px;
background-color: aquamarine;
}
}
div {
width: 200px;
height: 50px;
background-color: aqua;
/* animation: mymovie 5s infinite alternate steps(4); */
/* 设置动画的帧数（400） */
animation: myfirst 5s infinite alternate steps(400);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>效果图：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
