学习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>
/* 块级元素:独占一行,宽度是父级的100%,添加宽高属性生效 */
div {
width: 100px;
height: 100px;
/* 转换显示模式 为行内块显示模式*/
/* display: inline-block; */
/* 行内显示 不常用*/
/* display: inline; */
}
.div1 {
background-color: pink;
}
.div2 {
background-color: rgb(36, 36, 75);
}
/* 行内元素 */
/* 一行共存多个,字越多尺寸越大(由内容撑开尺寸) ,添加宽高属性不生效 背景色生效*/
span {
width: 200px;
height: 200px;
}
.span1 {
background-color: pink;
}
.span2 {
background-color: gold;
}
/* 行内块 */
/* 一行共存多个 默认尺寸由内容撑开 加宽高生效 */
img {
width: 100px;
height: 100px;
}
/* 转行显示模式 */
/* 属性名:display 属性值: block块级 inline-block行内块(常用前两个) inline行内*/
</style>
</head>
<body>
<!-- 块级元素 -->
<!-- 独占一行,宽度是父级的100%,添加宽高属性生效 -->
<div class="div1">文字</div>
<div class="div2">div标签</div>
<!-- 行内元素 -->
<!-- 一行共存多个,字越多尺寸越大(由内容撑开尺寸) -->
<span class="span1">span1</span>
<span class="span2">span2</span>
<!-- 行内块元素 -->
<!-- 一行共存多个 默认尺寸由内容撑开 加宽高生效 -->
<img src="./images/1.png" alt="">
<img src="./images/1.png" alt="">
<!-- 转行显示模式 -->
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
li:first-child {
background-color: green;
}
li:last-child {
background-color: red;
}
li:nth-child(3) {
background-color: blue;
}
/* :nth-child(公式) */
/* 根据元素结构关系查找多个元素 */
/* 偶数标签 2n 奇数标签 2n+1(或者2n-1) */
/* 五的倍数 5n,第五个之后的 n+5 第五个以前的 -n+5 */
/* li:nth-child(5n) {
background-color: gold;
} */
/* li:nth-child(n+5) {
background-color: gold;
} */
/* li:nth-child(-n+5) {
background-color: gold;
} */
/* E::before在E元素里面最前面添加一个伪元素
E::after在E元素里面最后面添加一个伪元素 */
/* 必须设置content:""属性，用来设置伪元素的内容，如果没有内容，则引号留空即可 */
/* 伪元素默认是行内显示模式 */
/* 权重和标签选择器相同 */
div{
width:300px;
height:300px;
background-color:pink;
}
div::before {
content: "老鼠";
width: 100px;
height: 100px;
background-color: brown;
/* display:block; */
}
div::after {
content: "大米";
width: 100px;
height: 100px;
background-color: orange;
/* display: inline-block; */
}
</style>
</head>
<body>
<!-- 结构伪类选择器 -->
<!-- 根据元素的结构关系查找元素 -->
<!-- 冒号后面是选择器的名字，冒号前面是要找的标签名 -->
<!-- E:first-child查找第一个E元素 -->
<!-- E:last-child查找最后一个E元素 -->
<!-- E:nth-child(N)查找第N个E元素（第一个元素N值为1） -->
<ul>
<li>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>li 8</li>
<li>li 9</li>
<li>li 10</li>
</ul>
<!-- 伪元素选择器 -->
<!-- 作用：创建虚拟元素（伪元素），用来放装饰性的内容 -->
<!-- E::before在E元素里面最前面添加一个伪元素 -->
<!-- E::after在E元素里面最后面添加一个伪元素 -->
<div>爱</div>
</body>
</html>
盒子模型
<!-- 盒子模型-组成 -->
<!-- 作用：布局网页，摆放盒子内容 -->
<!-- 内容区域-width&height -->
<!-- 内边距-padding(出现在内容与盒子边缘之间) -->
<!-- 边框线-border -->
<!-- 外边距-margin（出现在盒子外面） -->
<!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 {
/* 版心居中要求：盒子要有宽度 */
width: 1000px;
height: 200px;
background-color: pink;
/* 内边距 */
/* padding: 20px; */
/* 属性名：border(bd) 属性值：边框线粗细 线条样式 颜色（不区分顺序） */
/* 实线 */
/* border: 1px solid #000; */
/* 虚线 */
/* border: 1px dashed #000; */
/* 点线 */
/* border: 1px dotted #000; */
/* 外边距 不会撑大盒子 */
/* 拉开两个盒子之间的距离 margin与padding属性值写法含义相同*/
/* margin: 50px; */
/* 四个方向外边距 */
/* margin-left: 100px;
margin-right: 12px;
margin-top: 23px;
margin-bottom: 40px; */
/* 版心居中 */
margin: 0 auto;
/* 设置单方向边框线 */
/* 属性名：border-方位名词(bd+方位名词首字母，例如，bdl) */
/* 属性值：边框线粗细线条样式颜色（不区分顺序） */
/* border-left: 16px dotted #000;
border-right: 10px dashed #000;
border-top: 15px solid #000;
border-bottom: 14px solid #000; */
/* 内边距 */
/* 作用：设置内容与盒子边缘之间的距离 */
/* 属性名：padding/padding-方位名词 */
/* padding-left: 30px;
padding-right: 40px;
padding-top: 50px;
padding-bottom: 50px; */
/* 多值写法 */
/* 从最上面开始，顺时针转一圈 */
/* 四个值 上 右 下 左*/
/* padding: 10px 20px 30px 40px; */
/* 三个值 上 左右 下*/
/* padding: 10px 20px 30px; */
/* 两个值 上下 左右*/
/* padding: 10px 20px; */
/* 盒子模型-尺寸计算 */
/* 默认情况 盒子尺寸 = 内容尺寸 +border尺寸 + 内边距尺寸*/
/* 手动做减法，减掉border/padding的尺寸 */
/* width: 160px;
height: 160px; */
/* 内减模式：box-sizing:border-box */
/* box-sizing: border-box; */
}
</style>
</head>
<body>
<div>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>清除默认样式</title>
<style>
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
/* 內减模式 */
/* 不免撑大盒子 */
box-sizing: border-box;
}
/* 去掉列表的项目符号 */
li {
list-style: none;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>ppp</p>
<ul>
<li>li</li>
</ul>
</body>
</html>
元素溢出
<!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 {
width: 200px;
height: 200px;
background-color: pink;
/* 属性名：overflow */
/* 属性值hidden 溢出隐藏 */
/* overflow: hidden; */
/* scroll溢出滚动(无论是否溢出都显示滚动条位置) */
/* overflow: scroll; */
/* auto溢出滚动（溢出才显示滚动条位置） */
overflow: auto;
}
</style>
</head>
<body>
<div>111111111111111111
1111111111111111111
1111111111111111111
1111111111111111111
1111111111111111111
1111111111111111111
1111111111111111111
1111111111111111111
1111111111111111111
1111111111111111111
1111111111111111111
1111122222222222222
2222222222222222222
2222222222222222222
2222222222222222222
2222222222222222222
2222222222222222222
2222222222222222222
2222222222222222222
2222222222222222422
2424242222222222222
2222222222222222222
</div>
</body>
</html>
外边距问题-合并现象
<!-- 场景：垂直排列的兄弟元素，上下margin会合并 -->
<!-- 现象：取两个margin中的较大值生效 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并现象</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 20px;
}
.box2 {
width: 100px;
height: 100px;
background-color: gold;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</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>塌陷问题</title>
<style>
/* 塌陷问题 */
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
background-color: gold;
margin-top: 50px;
}
/* 解决方法： */
/* (规避问题)取消子级margin,父级设置padding */
/* .father {
width: 300px;
height: 300px;
background-color: pink;
padding-top: 50px;
box-sizing: border-box;
}
.son {
width: 100px;
height: 100px;
background-color: gold;
} */
/* 父级设置overflow:hidden */
/* .father {
width: 300px;
height: 300px;
background-color: pink;
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: gold;
margin-top: 50px;
} */
/* 父级设置border-top */
/* .father {
width: 300px;
height: 300px;
background-color: pink;
border-top: 1px solid black;
}
.son {
width: 100px;
height: 100px;
background-color: gold;
margin-top: 50px;
} */
</style>
</head>
<body>
<div class="father">
<div class="son">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>内外边距问题</title>
<style>
span {
/* 垂直位置不会改变 */
margin: 50px;
padding: 20px;
/* 想要改变垂直位置，要加行高 */
line-height: 100px;
}
</style>
</head>
<body>
<span>span</span>
<span>span</span>
</body>
</html>
浙公网安备 33010602011771号