html和CSS基础学习(八)
2017-09-23 20:39
351 查看
overfolw:对溢出元素的处理(子元素的内容超出父元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height:200px ;
background-color: red;
/*overflow: auto;这个比较智能化可以自动调节滚动框*/
overflow: scroll;
}
.box2{
width: 100px;
height:500px ;
/*子元素的高度超过父元素的高度叫做溢出*/
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
元素的浮动
(1) 在游览器中,块元素默认在文档流中垂直排列
图片默认垂直排列
为了让元素水平排列我们可以使元素脱离文档流,如图所示向左浮动;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: gold;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height:200px ;
background-color: red;
/*overflow: auto;这个比较智能化可以自动调节滚动框*/
overflow: scroll;
}
.box2{
width: 100px;
height:500px ;
/*子元素的高度超过父元素的高度叫做溢出*/
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
元素的浮动
(1) 在游览器中,块元素默认在文档流中垂直排列
图片默认垂直排列
为了让元素水平排列我们可以使元素脱离文档流,如图所示向左浮动;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: gold;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
相关文章推荐
- HTML&CSS基础学习笔记1.30-颜色的表达
- C#学习笔记8:HTML和CSS基础学习笔记
- 学习笔记(一) HTML+CSS基础课程
- HTML/CSS基础知识学习笔记
- 学习笔记-《零基础学习HTML5—html+css基础 》4.CSS基础样式(上)
- HTML/CSS基础课程学习手记
- 网页制作之html基础学习6-CSS浏览器兼容问题
- html和CSS基础学习(十五)
- HTML&CSS基础学习笔记1.31-元素选择器
- HTML&CSS基础学习笔记1-简单网页中有哪些标签?
- HTML&CSS基础学习笔记1.25-input标签提交数据
- HTML+CSS基础课程/1-4单学习记录
- HTML&CSS基础学习笔记5-添加常用的标签
- HTML&CSS基础学习笔记1.22-一个简单的注册页面
- html和CSS基础学习(九)
- (清华大学HTML+CSS+JavaScript入门到精通学习笔记)第二章 HTML基础
- HTML&CSS基础学习笔记1.19-DIV标签2
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
- HTML&CSS基础学习笔记1.11-导航栏
- 在慕课上学习的,HTML和CSS基础学习笔记8