目录
浮动属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动属性</title>
<style>
/* float:表示标签漂浮起来了 */
/* right -> 右漂浮
left -> 左漂浮
none -> 无漂浮
① 空出来的空间会随着文档流补位
② 右浮动遵循先来后到，原先最上面的位置，经过右浮动后到位置的最右边
③ 见缝插针式的放置
滚动放大缩小页面大小可以看一看奇特的效果*/
.red{
width: 100px;
background-color: red;
float: right;
text-align: center;
}
.blue{
width: 300px;
background-color: blue;
float: right;
text-align: center;
}
.green{
width: 200px;
background-color: green;
float: right;
text-align: center;
}
.red2{
height: 300px;
width: 300px;
background-color: red;
float: left;
text-align: center;
}
.blue2{
height: 200px;
width: 200px;
background-color: blue;
float: left;
text-align: center;
}
.green2{
height: 100px;
width: 100px;
background-color: green;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div class="red">红色块1</div>
<div class="blue">蓝色块1</div>
<div class="green">绿色块1</div>
<div class="red2">红色块2</div>
<div class="blue2">蓝色快2</div>
<div class="green2">绿色快2</div>
</body>
</html>清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>消除浮动</title>
<style>
.box1,.box2{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3{
width: 150px;
height: 100px;
background-color: yellow;
/* 清除浮动:需要加在前一个有浮动的盒子后面那个没有浮动的盒子上 */
/* left,right,both,none */
clear: left;
}
</style>
</head>
<body>
<!-- 解决高度塌陷问题 -->
<!-- 方案一: 写固定高度，硬生生补上塌陷的位置 -->
<!-- 方案二: 清除浮动 clear -->
<div class="box1"></div>
<!-- 方案三: 内联样式清楚浮动-->
<div class="box2" style="clear:both"></div>
<div class="box3"></div>
<!-- 方案四: 清楚浮动而且不会影响结构，让浮动元素计算高度 overflow:hidden; -->
</body>
</html>盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
.box1{
width:500px;
height: 300px;
text-align: justify;
background-color: aqua;
padding: 30px;
/*
① 内边距:
padding: all-in ()
padding: top&bottom left&right
padding: top left&right bottom
padding: top right bottom left
*/
}
.box2{
width: 500px;
height: 200px;
text-align: justify;
background-color: bisque;
border: 10px solid blue;
/*
② 边框 border:
样式: solid double dashed dotted
背景色: 也能蔓延到边距
四种设置模式: border-top border-right border-bottom border-left
border-width
border-style
border-color
*/
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
float: left;
}
.box4{
width: 100px;
height: 100px;
background-color: red;
margin: -30px;
float: left;
/*
③ 外边距:
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px;
margin-top margin-right margin-bottom margin-left
背景色 无法蔓延到外边距
{margin: 0px; padding: 0px;} 取消默认大小间距
margin: 支持负值;
margin: 10px auto; 横向居中(非常重要)
*/
}
</style>
</head>
<body>
<div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit.
um magnam praesentium necessitatibus harum libero modi.
Omnis error, minus quasi minima esse cupiditate excepturi
rerum provident alias soluta ipsum laudantium nobis.</div>
<div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Architecto debitis voluptate culpa blanditiis modi dolorum ex perspiciatis
commodi voluptas laboriosam ea excepturi ipsum, repellat sed voluptates
doloribus id maiores fuga!</div>
<div class="box3">我是第一个盒子</div>
<div class="box4">我是第二个盒子</div>
</body>
</html>外边距特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距的特性</title>
<style>
.box1,.box2,.box3,.box4{
width: 100px;
height: 100px;
}
/* 特性一: 兄弟关系
- 垂直方向,外边距取最大值
- 水平方向,外边距是两边距之和 */
.box1{
background: red;
margin-bottom: 50px;
}
.box2{
background-color: aqua;
margin-top: 100px;
}
.box3{
background-color: aquamarine;
margin-right: 50px;
float:left;
}
.box4{
background-color: brown;
margin-left: 100px;
float:left;
}
/* 特性二: 父类关系 */
.box5{
width: 200px;
height: 200px;
background-color: black;
clear: both;
/* ① padding (100px) + box5 (200px) + box6 (100px) */
/* padding-top: 100px; */
/* ③ 如果此时想要输出正确的位置,可以为大盒子加上边框,小盒子加上外边距后就会乖乖的下来100px */
/* transparent 透明 */
/* border: 10px solid transparent; */
/* float: left; */
overflow: hidden;
}
.box6{
width: 100px;
height: 100px;
background-color: aliceblue;
/* ② margin-top 此时加给了父类,而不是子类 */
margin-top: 100px;
/* float:left; */
}
/* ④ 给大盒子和小盒子加上浮动效果也可以输出正确的位置
⑤ overflow: hidden, BFC*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5">
<div class="box6"></div>
</div>
</body>
</html>溢出属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>溢出属性</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: aquamarine;
/* overflow: hidden; 隐藏溢出，文本裁切 */
/* overflow: visible; 默认属性，显示溢出 */
overflow: scroll; /* 滚动属性，添加滚动条 */
/* overflow-y: scroll; y 轴溢出属性 */
/* overflow-x: scroll; x 轴溢出属性 */
}
.box2{
width: 200px;
height: 200px;
background-color: brown;
margin-top: 30px;
/* 继承父元素 */
overflow: inherit;
/* 有溢出的话就会显示出滚动条，没有就正常显示 */
/* overflow: auto; */
}
</style>
</head>
<body>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores neque nulla,
consectetur quidem quaerat velit dolorum necessitatibus deserunt,
facere fugit aperiam. Perferendis corporis neque consequuntur inventore,
assumenda rerum atque quas.
</div>
<div class="box2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo consequatur
at similique vitae voluptatem aperiam rerum, aliquam iusto inventore amet
sint rem! Ex minus distinctio voluptates ducimus aliquid ea recusandae.
</div>
</body>
</html>空余空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空余空间</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: aquamarine;
overflow: scroll;
white-space: nowrap;
/*
① white-space 属性:
normal: 默认的正常显示
nowrap: 不进行换行，直到遇到换行 </br>
pre: 具有padding和margin属性的空位
pre-wrap: 换行,显示段落缩进
pre-line: 换行,无段落缩进
inherit: 继承属性
*/
text-overflow: ellipsis;
/*
② text-overflow 属性:
clip: 溢出部分没有省略号
ellipsis: 溢出部分有省略号，需要单行显示的情况下
*/
}
</style>
</head>
<body>
<div class="box1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident consequuntur accusantium aperiam tempore ipsa
aspernatur vitae illo totam veritatis a culpa natus, amet officia distinctio! Blanditiis sunt nam minima accusamus.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident consequuntur accusantium aperiam tempore ipsa
aspernatur vitae illo totam veritatis a culpa natus, amet officia distinctio! Blanditiis sunt nam minima accusamus.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident consequuntur accusantium aperiam tempore ipsa
aspernatur vitae illo totam veritatis a culpa natus, amet officia distinctio! Blanditiis sunt nam minima accusamus.
</div>
</body>
</html>元素的显示类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的显示类型</title>
<style>
.box1{
width: 200px;
height: 200px;
background: red;
}
/*
① display: block 块标签
display: list-item 列表标签
② display: inline 行内标签
*/
/* p标签可以放文本,但是不要再放块级元素 */
.box2{
background: brown;
}
.box3{
width: 200px;
}
</style>
</head>
<body>
<div class="box1">测试块元素</div>
<ul>
<li>测试列表元素</li>
</ul>
<p>测试段落标签</p>
<h1>测试标题元素</h1>
<!-- 行内标签没有特定形状,不会一行独占 -->
<b>测试加粗标签</b>
<em>测试em倾斜标签</em>
<!-- 一旦加上颜色后spam标签就会有形状 -->
<span class="box2">测试行内span标签</span>
<strong>测试加粗标签</strong>
<a href="">链接标签</a>
<br>
<!-- 行内块标签具有块标签具有一定形状,也有行内标签具有可以一行内多个标签书写的特性 -->
<input type="text" placeholder="测试文本" class="box3">
</body>
</html>元素类型的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素类型的转换</title>
<style>
/*
inline
inline-block
block
*/
/* img{
display: block;
} */
div{
width: 200px;
height: 200px;
background: yellow;
display: inline;
}
</style>
</head>
<body>
<!-- img 默认是 inline -->
<img src="./小王冠.png" alt="">
<p>文字</p>
<div>block转换成inline元素</div>
</body>
</html>二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二级菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 0 auto;
}
ul{
list-style: none;
}
.box .item{
float: left;
width: 148px;
text-align: center;
background: blue;
line-height: 40px;
color: white;
}
.item:hover{
background: lightblue;
}
.item ul{
display: none;
color: black;
}
.item:hover ul{
display: block;
background:white;
}
.item li>a:hover{
color: blue;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">视频教程
<ul>
<li><a href="">全部视频教程</a></li>
<li><a href="">HTML5视频教程</a></li>
<li><a href="">Java视频教程</a></li>
<li><a href="">python视频教程</a></li>
</ul>
</li>
<li class="item">认证考试
<ul>
<li><a href="">pmp</a></li>
<li><a href="">红帽</a></li>
</ul>
</li>
</ul>
</body>
</html>静态定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态定位</title>
<style>
div{
width: 100px;
height: 100px;
}
.box1{
background: red;
}
.box2{
background: yellow;
/* position: relative; 相对于自己初始的位置移动 */
/* position: static; 默认*/
top: 50px;
left: 50px;
/* 可以是负值 */
}
.box3{
background: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态定位</title>
<style>
div{
width: 100px;
height: 100px;
}
.box1{
background: red;
}
.box2{
background: yellow;
/* position: relative; 相对于自己初始的位置移动 */
/* position: static; 默认*/
top: 50px;
left: 50px;
/* 可以是负值 */
}
.box3{
background: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>固定定位和粘性定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位和粘性定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
background: yellow;
}
.nav{
width: 600px;
height: 50px;
background: red;
margin: 0 auto;
position: sticky;
top:0px;
}
.body{
width: 100%;
height: 2000px;
background: green;
margin: 0 auto;
}
.body .box{
width: 100px;
height: 100px;
background: blue;
position: fixed;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="header"></div>
<!-- ② 粘性定位 position: sticky 可以作吸顶效果 CSS3.0 新出特性 兼容性不好-->
<div class="nav"></div>
<div class="body">
<!-- ① 固定定位 position: fixed 固定在页面中的一个位置: 脱离文档流-->
<div class="box"></div>
</div>
</body>
</html>
扫一扫
757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
