3.常见样式
1.字体样式-font-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>
p {
/* font-size :字体大小 字号 */
/* font-family 字体 */
font-family: "微软雅黑";
/* 字体粗细 400:正常 700：加粗 */
/* font-weight: bold; */
font-weight: 700;
/* 字体样式 font-style */
/* font-style: normal; */
/* style weight size family 字号和字体必须同时存在 */
/* font: italic 700 20px '宋体'; 不推荐 */
/* css层叠性 属性名相同时，后边的样式会将前面的样式覆盖掉 */
}
</style>
</head>
<body>
<p>我是一段文字，你有本事打我呀！</p>
</body>
</html>
2.文本缩进-text-indent: 0em;
<!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 {
text-indent: 20px;
} */
p {
font-size: 20px;
/* text-indent: 32px; */
text-indent: 2em;
}
</style>
</head>
<body>
<p>
陈丹青:“如果你没有背景，
还要选择做一个好人，
几乎肯定会落入社会底层，
哪怕你才华横溢，有真知灼见，
社会的筛子会把你筛落掉。
越是循规蹈矩，刚正不阿，
天性善良，越容易被淘汰，
你所有的优点会成为竞争中的劣势。”
</p>
<p>
陈丹青:“如果你没有背景，
还要选择做一个好人，
几乎肯定会落入社会底层，
哪怕你才华横溢，有真知灼见，
社会的筛子会把你筛落掉。
越是循规蹈矩，刚正不阿，
天性善良，越容易被淘汰，
你所有的优点会成为竞争中的劣势。”
</p>
</body>
</html>
3.文本对齐方式(水平居中)-text-align: center；
<!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 {
/* 对齐方式：text-align 居中的是内容*/
text-align: center;
}
.box2 {
width: 300px;
height: 400px;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">我是一个小盒子</div>
<div class="box2">
<img src="../day1/灰太狼.jpg" alt="" width="200px">
<p>我是文字</p>
</div>
</body>
</html>
4.文本修饰-text-decoration
<!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 {
/* 清除a链接默认样式 */
/* text-decoration: none; */
/* text-decoration: line-through; */
/* text-decoration: underline; */
text-decoration: overline;
}
</style>
</head>
<body>
<a href="#">去百度</a>
</body>
</html>
5.text-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>
ul li:nth-child(1) {
text-transform: uppercase;
}
ul li:nth-child(2) {
text-transform: lowercase;
}
</style>
</head>
<body>
<ul>
<li>gouxin我是第1个li</li>
<li>GOUXIN 我是第1个li</li>
</ul>
</body>
</html>
6.行高-line-height: 0px;
<!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>
p {
line-height: 50px;
}
div {
width: 400px;
height: 200px;
background-color: pink;
text-align: center;
/* 单行文本借助行高垂直居中 */
line-height: 200px;
}
</style>
</head>
<body>
<p>
ullam!
Modi alias exercitationem perferendis beatae aspernatur dolores ea nulla quo harum aut? Earum saepe, voluptatem
</p>
<div>
我是一段文字
</div>
</body>
</html>
7.文本溢出-overflow: auto;
<!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: 500px;
background-color: yellow;
overflow: auto;
/* overflow: hidden; */
/* overflow: scroll;
/* white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam totam similique ab perspiciatis sint optio,
inventore maxime debitis, doloremque consequatur natus magnam exercitationem dignissimos, dicta veritatis
suscipit voluptas omnis excepturi!
Nesciunt deleniti at debitis quod magnam commodi modi neque perferendis laudantium quas eveniet reiciendis et,
in maiores ducimus. Iste recusandae temporibus, corporis eligendi molestiae autem? Quaerat, doloribus! Autem,
aliquid voluptas?
Omnis soluta, temporibus aperiam reprehenderit inventore accusantium alias repellendus esse dolorum, repellat
tempore excepturi doloremque reiciendis labore laborum nesciunt? Voluptate, nobis cupiditate nemo sequi eius
magnam doloremque obcaecati aliquid similique!
Odio rerum quae commodi sequi sunt laboriosam doloremque debitis dolores, aliquam qui deserunt, fugit impedit
ipsa nihil unde esse omnis neque ad rem. Ullam voluptate enim architecto rerum excepturi officiis.
Vel doloribus accusamus, explicabo officia provident iure odit distinctio id quo, velit neque error sunt
delectus sequi. Doloribus quis facilis quibusdam ex? Voluptatem sequi esse unde, quia laboriosam aliquid eius.
</div>
</body>
</html>
8.背景相关-backgroud-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>
body {
/* width: 3000px; */
height: 3000px;
/* background-color: pink;
background-image: url(./背景.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom; */
background: pink url(./背景.jpg) no-repeat right bottom;
/* background-size: ; */
}
</style>
</head>
<body>
</body>
</html>
backgroud可以复合属性
9.列表样式-list-style
<!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>
li {
/* 去除li默认样式的 */
list-style: none;
list-style: decimal;
}
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
</ul>
</body>
</html>
10.元素显示模式转换-display
<!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>
span {
/* 将行内元素转化为行内块元素 */
display: inline-block;
width: 100px;
height: 50px;
background-color: pink;
}
div {
display: inline-block;
}
</style>
</head>
<body>
<span>小盒子</span>
<span>小盒子</span>
<span>小盒子</span>
<div>我是一段文字</div>
</body>
</html>
11.轮廓线-outline-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 {
outline-style: none;
outline-style: dashed;
/* outline-style: dotted;
outline-style: double; */
outline-color: aqua;
/* outline-width: thick; */
/* outline-width: 40px; */
outline: none;
}
</style>
</head>
<body>
<input type="text" name="username">
</body>
</html>
12.边框-border-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>
div {
width: 300px;
height: 300px;
background-color: pink;
border-width: 3px;
border-color: rgb(33, 29, 29);
border-style: solid;
border-top-left-radius: 50%;
border-top-right-radius: 50px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.合并相邻边框
<!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 {
width: 40px;
height: 30px;
border: 3px solid black;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
14.颜色-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>
p {
/* 前景色 字体颜色 */
color: red;
color: rgb(33, 106, 178);
}
div {
width: 300px;
height: 300px;
background-color: rgb(230, 24, 24);
/* background-color: rgba(rgb(71, 15, 15), rgb(47, 118, 47), rgb(76, 76, 118), .3); */
/* opacity 0-1 0时，只是视觉上看不到，原来位置还在保留
设置透明度的 */
opacity: 0;
}
</style>
</head>
<body>
<p>我要红了</p>
<div>
</div>
</body>
</html>
15.元素隐藏的方式
** 1、设置透明度隐藏 0-1 保留原来位置*/
/* opacity: 0; */
/*2、 display :none 不保留原来位置*/
/* display: none; */
/* 3、visibility：hidden */
16.鼠标样式-cursor: initial;以及防拖拽-resize: none;
<!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;
/* 鼠标样式 */
cursor: initial;
}
</style>
</head>
<body>
<textarea cols="30" rows="10"></textarea>
<div></div>
</body>
</html>
17.绝对定位-position: relative;
<!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: relative;
width: 1200px;
height: 1200px;
background-color: aquamarine;
}
.father {
position: absolute;
top: 200px;
position: relative;
width: 600px;
height: 600px;
background-color: aqua;
}
.son {
width: 200px;
height: 200px;
font-size: 40px;
}
.son1 {
/* 绝对定位会放弃原来的位置 子绝父相 逐级查找父级元素是否有相对定位，如果有，以父亲为定位参考，如果没有，继续向上查找*/
position: absolute;
/* top: 50px; */
left: 90px;
bottom: 40px;
background-color: blue;
/* 显示的优先级 z-index*/
z-index: 2;
}
.son2 {
position: absolute;
bottom: 50px;
background-color: darkorange;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son son1">1</div>
<div class="son son2">2</div>
</div>
</div>
</body>
</html>
18.固定定位-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: 3000px;
background-color: pink;
}
.box1 {
/* 固定定位 相对于可视窗口进行定位 放弃原来位置 */
position: fixed;
top: 100px;
width: 100px;
height: 100px;
background-color: aqua;
}
.box2 {
width: 100px;
height: 100px;
background-color: rgb(227, 19, 206);
}
</style>
</head>
<body>
<div class="box1">
nihao
</div>
<div class="box2"></div>
</body>
</html>
19.粘性定位-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>
p {
position: sticky;
top: 20px;
background-color: pink;
}
</style>
</head>
<body>
m dolores voluptatibus tempore explicabo. Iste deleniti animi eius exercitationem
quidem.
Dignissimos saepe recusandae sed, officiis similique repellat sapiente quos cupiditate repellendus deleniti. Odio
possimus tenetur dolorum voluptatum fugit architecto. Accusantium minima ullam dolor eum numquam voluptates quas,
consequatur nemo quibusdam.
Explicabo a, cumque maiores iusto vero error perferendis quasi suscipit consequuntur. Cumque obcaecati sunt minus
explicabo ab. Fugiat, quis fuga animi laudantium deserunt ipsum ex dolorem, cumque in porro sequi?
</html>
4.盒子模型
组成
内容区（content）
内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。
填充（padding）
填充是内容区和边框之间的空间。填充的属性有五种 ，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。
边框（border）
边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名 。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。设置盒子背景色属性时，在IE中背景不会延伸到边框区域，但在FF等标准浏览器中，背景颜色可以延伸到边框区域，特别是单边框设置为点线或虚线时能看到效果 [1] 。
空白边（margin）
空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。空白边的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。对于两个相邻的（水平或垂直方向 ）且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。若二者邻近的空白边值大小不等，则取二者中较大的值。同时，CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素，这是CSS 布局技术中的一个重要方法。
盒子模型的定位
网页默认的布局方式
文档流指文档中能够明确显示对象在排列时所占用的具体方位。文档流不但是盒子模式定位的基础所在，它也是HTML中默认的网页布局模式，在没有特殊要求的情况下，页面中的块状元素呈现自上而下的动态分布形式，内联元素则是按照从左到右的方式存在。如果我们想要改动某一汉字或是符号在网页中的具体方位，只能有一种方式可以选择，就是通过操作网页结构中汉字或是符号的先后位置和分布位置来实现自己的目的和想法。
浮动
所谓浮动就是让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本身是何种元素。且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
Position定位
页面布局使用最多的是相对定位和绝对定位。
相对定位：这种定位方式下元素不脱离文档流，仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物，通过left、top、right和bottom四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。
绝对定位：这种定位方式下元素将脱离文档流，不占据空间，文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果
图片
边框
内边框
padding
/* padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px; */
padding: 20px;
/* 两个值时，第一个值待变上下的padding值，第二个值代表左右的padding值 */
padding: 10px 50px;
/* 三个值：上 左右 下 */
padding: 10px 40px 50px;
/* 四个值：上 右 下 左 */
padding: 10px 20px 30px 40px;
/* 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: 200px;
height: 200px;
border: 1px solid black;
/* padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px; */
padding: 20px;
/* 两个值时，第一个值待变上下的padding值，第二个值代表左右的padding值 */
padding: 10px 50px;
/* 三个值：上 左右 下 */
padding: 10px 40px 50px;
/* 四个值：上 右 下 左 */
padding: 10px 20px 30px 40px;
/* padding的值不能为负值 */
}
/* 行内元素的左右内边距可以准确设置 */
span {
background-color: pink;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div>
我是盒子的内容区域，你是谁？
</div>
<span>我是span</span>
</body>
</html>
外边距
margin
/* 上 右 下 左 */
margin: 10px 20px 30px 40px;
/* 实现元素的水平居中 */ margin: 0 auto;
<!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;
border: 2px solid black;
}
.box1,
.box2 {
display: inline-block;
}
.box1 {
margin-bottom: 20px;
margin-right: 20px;
margin-left: 20px;
margin-top: 40px;
/* 上 右 下 左 */
margin: 10px 20px 30px 40px;
}
.box3 {
/* 实现元素的水平居中 */
margin: 0 auto;
}
/* .box2 { */
/* margin-left: -30px; */
/* } */
</style>
</head>
<body>
<div class="box1">
我是盒子的内容区域，你是谁？
</div>
<div class="box2">
我是盒子的内容区域，你是谁？
</div>
<div class="box3">
我是盒子的内容区域，你是谁？
</div>
</body>
</html>
外边距塌陷
解决方法
1、给父元素加边框 */
/* border: 1px solid black; */
/* 2、给父元素添加内边距 */
/* padding: 10px; */
/* 3、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>
.father {
width: 800px;
height: 800px;
background-color: pink;
/* 1、给父元素加边框 */
/* border: 1px solid black; */
/* 2、给父元素添加内边距 */
/* padding: 10px; */
/* 3、overflow: hidden; 偏方 */
overflow: hidden;
}
.father>div {
width: 100px;
height: 100px;
}
.son1 {
background-color: aqua;
margin-bottom: 20px;
margin-left: 20px;
/* 父盒子里，第一个子盒子的margin-top值会被父盒子强调抢掉*/
margin-top: 200px;
}
.son2 {
background-color: blueviolet;
margin-bottom: 30px;
}
.son3 {
background-color: chocolate;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
</div>
<p>cbjdscdsc</p>
</body>
</html>
避免pading将盒子撑爆
解决padding影响盒子大小 */
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: 30px;
/* 解决padding影响盒子大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
dncjdcjndcnjcndjcdj
</div>
</body>
</html>
flex布局##
当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关，所以有必要在一开始首先理解它。
主轴
主轴由
flex-direction定义，可以取 4 个值：
row
row-reverse
column
column-reverse如果你选择了
row或者row-reverse，你的主轴将沿着 inline 方向延伸。
选择
column或者column-reverse时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。
/* 改子元素排列方式 */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* 改变主轴对其方式 */
/* space-between:两边贴边，中间评分剩余空间 */
justify-content: space-between;
/* space-around：平分在子项的两边 */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
/* justify-content: center; */
/* 允许换行 */
flex-wrap: wrap;
/* 侧轴单行 */
align-items: center;
/* 侧轴对齐方式 */
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
<!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: flex;
/* 改子元素排列方式 */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* 改变主轴对其方式 */
/* space-between:两边贴边，中间评分剩余空间 */
justify-content: space-between;
/* space-around：平分在子项的两边 */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
/* justify-content: center; */
/* 允许换行 */
flex-wrap: wrap;
/* 侧轴单行 */
align-items: center;
/* 侧轴对齐方式 */
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
width: 800px;
height: 1000px;
background-color: pink;
margin: 0 auto;
}
.box>div {
/* flex: ; 占用剩余空间的多少 */
width: 170px;
height: 100px;
background-color: aqua;
}
/* .box div:nth-child(3) {
background-color: pink;
} */
.box div:nth-of-type(3) {
/* background-color: red; */
/* order 值越小，排列越靠前 没有设置的子项目，默认为0 */
order: -1;
}
/* ul {
display: flex;
} */
</style>
</head>
<body>
<div class="box">
<div>我是盒子1</div>
<div>我是盒子2</div>
<div>我是盒子3</div>
<div>我是盒子4</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
</div>
<!-- <ul>
<li><a href="#">去百度</a></li>
<li><a href="#">去百度</a></li>
<li><a href="#">去百度</a></li>
<li><a href="#">去百度</a></li>
</ul> -->
</body>
</html>
去除标签默认外边距
* {
margin: 0;
padding: 0;
字体
定义字体
@font-face {
font-family: gouxin;
src: url(./翩翩体-简.ttf);
应用字体
font-family: gouxin;
渐变
<!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-image: linear-gradient(to right, red, pink, green, blue);
background-image: repeating-linear-gradient(45deg, yellow, pink, red);
background-image: radial-gradient(red, pink, blue, greenyellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
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>
.father {
color: pink;
border: 1px solid black;
}
/* 会继承的css属性 ：字体属性 、文本属性、文字颜色…… */
/* 不会继承的：边框、背景、内外边距、宽高…… */
</style>
</head>
<body>
<div class="father">
father
<div>son</div>
</div>
</body>
</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>
<style>
.father {
background-color: rgb(39, 53, 155);
}
.son1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.son2 {
/* 左浮动 */
float: left;
width: 300px;
height: 200px;
background-color: aqua;
}
.son3 {
float: left;
width: 600px;
height: 100px;
background-color: red;
}
p {
/* 清除浮动 */
clear: both;
}
ul li {
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
<p>我是一段文字</p>
</div>
<ul>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
</ul>
</body>
</html>
2d转换
/* 移动 */
/* transform: translateX(200px) translateY(100px); */
/* transform: translateY(100px); */
/* 单独写会发生覆盖，复合：x ，y */
/* transform: translate(50px, 50px); */
/* 旋转 */
/* transform: rotateZ(45deg); */
/* 缩放 */
/* transform: scaleX(1.5) scaleY(2); */
/* transform: scale(0.5); */
/* transform: translateX(100px) translateY(100px) rotateZ(45deg); */
/* transform: scale(0.5) translate(100px, 100px) rotateZ(45deg); */
/* 改原点 对移动无影响，对旋转、缩放有影响*/
<!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: 200px auto;
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* 移动 */
/* transform: translateX(200px) translateY(100px); */
/* transform: translateY(100px); */
/* 单独写会发生覆盖，复合：x ，y */
/* transform: translate(50px, 50px); */
/* 旋转 */
/* transform: rotateZ(45deg); */
/* 缩放 */
/* transform: scaleX(1.5) scaleY(2); */
/* transform: scale(0.5); */
/* transform: translateX(100px) translateY(100px) rotateZ(45deg); */
/* transform: scale(0.5) translate(100px, 100px) rotateZ(45deg); */
/* 改原点 对移动无影响，对旋转、缩放有影响*/
transform-origin: top left;
transform: scale(0.5);
}
</style>
</head>
<body>
<div class="father">
<div class="son">i love you</div>
</div>
</body>
</html>
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: 200px auto;
transform-style: preserve-3d;
perspective: 800px;
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* 移动 */
transform: translateZ(-200px);
/* 旋转 */
transform-origin: left;
transform: rotateX(45deg);
transform: rotateY(45deg);
/* transform: scaleZ(2); */
/* 背部可见性 */
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="son">i love you</div>
</div>
</body>
</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>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/* transition-property: width, height, background-color;
transition-duration: 5s; */
transition: all 3s steps(120);
}
div:hover {
width: 1200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画
/* animation-name：定义的动画名字 */
animation-name: movie;
/* animation-duration：动画执行所需时间 */
animation-duration: 3s;
/* animation-delay:动画延迟时间 */
/* animation-delay: 1s; */
/* animation-timing-function 动画方式 */
/* animation-timing-function: steps(12); */
/* 控制动画执行次数 */
animation-iteration-count: infinite;
/* 动画方向 */
animation-direction: alternate;
animation-fill-mode: forwards;
<!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>
/* 1、定义动画 */
@keyframes movie {
from {
border-radius: 0;
transform: translateX(0) rotateZ(0);
}
to {
border-radius: 50%;
transform: translateX(1100px) rotateZ(360deg);
}
}
.father {
width: 1200px;
height: 100px;
border: 2px solid black;
margin: 100px auto;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
/* animation-name：定义的动画名字 */
animation-name: movie;
/* animation-duration：动画执行所需时间 */
animation-duration: 3s;
/* animation-delay:动画延迟时间 */
/* animation-delay: 1s; */
/* animation-timing-function 动画方式 */
/* animation-timing-function: steps(12); */
/* 控制动画执行次数 */
animation-iteration-count: infinite;
/* 动画方向 */
animation-direction: alternate;
animation-fill-mode: forwards;
}
.father:hover .son {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
扫一扫
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
