标签：color 布局 100px height width background 200px CSS 页面
css页面布局方式
1.标准流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标准流: 行内的一排一排摆放. 块级的自动换行*/
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
.box3 {
background-color: black;
}
.box4 {
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">
11111
</div>
<div class="box2">22222</div>
<span class="box3">3333</span>
<span class="box4">44444</span>
</body>
</html>
2.浮动流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
浮动流是一种半脱离文档流的一种方式:
1. 什么是脱离文档流:
不在受块级or行级的限制. 都可以设置width和height
2. 什么是半脱离:
是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：
（1）同一个方向上谁先浮动，谁在前面
（2）不同方向上左浮动找左浮动，右浮动找右浮动
-->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
float: left;
/*浮动流不能居中显示*/
margin: 0 auto;
}
.box2 {
width: 300px;
height: 300px;
background-color: black;
}
</style>
</head>
<body>
<span class="box1">32113123</span>
<div class="box2"></div>
</body>
</html>
3.浮动流案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: purple;
float: right;
}
.box4 {
width: 400px;
height: 400px;
background-color: pink;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
4.浮动流的贴靠问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 50px;
height: 50px;
background-color: red;
}
.box2 {
width: 800px;
height: 800px;
border: 5px dotted black;
}
.son1 {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.son2 {
width: 200px;
height: 200px;
background-color: #2f0099;
float: left;
}
.son3 {
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
/*当盒子宽度不够. 会顺着盒子向下贴靠*/
.son4 {
width: 400px;
height: 400px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
</div>
</body>
</html>
5.浮动流-字围现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">321321
21111
2111121111
21111
21111
21111
21111
21111
</div>
</body>
</html>
字围现象效果1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*让图片浮动靠左. 带有文字的段落会向上挤并实现字围效果*/
img {
width: 100px;
float: left;
}
p {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<img src="img/sg.jpg" title="这是一个帅气的狗子" alt="">
<p>原产于日本，是一种古老的品种，经长期豢养培育，养成忠实、服从、忍耐的天性。 柴犬的警觉性高，平时习惯警觉地站在高处向下观望，个性机敏、独立，身体强健，动作敏捷，色泽如木柴，以前主要是被人类训练用来猎捕小动物，曾是穿梭于深山林间的狩猎好手，故称之为柴犬。 柴犬外观和日本秋田犬比较好像是它的缩小版。</p>
</body>
</html>
字围现象效果2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*字围现象不仅仅是文字会包围浮动元素. inline-block元素也会包围浮动元素*/
.box1 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2 {
width: 10px;
height: 10px;
background-color: green;
border: 1px dotted black;
display: inline-block;
}
.box3 {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
6.浮动流-实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉内边距外边距*/
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background-color: #d4d4d4;
}
.header {
height: 10%;
width: 80%;
background-color: red;
padding: 10px;
/*想要设置的边框和内边距的值是包含在width内的.*/
box-sizing: border-box;
/*居中*/
margin: 0 auto;
}
/*这里设置的高度100%需要注意. 是box-sizing综合的结果
1. 先设置内边距10px.
2. 再后面高度的100%是处了内边距之外的. 就自动排好了边距
*/
.logo {
width: 20%;
height: 100%;
background-color: pink;
float: left;
}
.title {
width: 70%;
height: 100%;
background-color: yellow;
float: right;
}
.content {
width: 80%;
height: 78%;
background-color: green;
margin: 0 auto;
margin-bottom: 1%;
margin-top: 1%;
padding: 10px;
box-sizing: border-box;
}
.guide {
width: 20%;
height: 100%;
background-color: purple;
float: left;
}
.article {
width: 70%;
height: 100%;
background-color: deepskyblue;
float: right;
}
.footer {
width: 80%;
height: 10%;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="title"></div>
</div>
<div class="content">
<div class="guide"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
</body>
</html>
7.浮动流-实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动流排版练习3</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.header {
height: 100px;
width: 980px;
background-color: #f6c2d2;
margin: 0 auto;
}
.content {
height: 400px;
width: 980px;
background-color: #fefefe;
margin: 0 auto;
margin-top: 10px;
}
.content .aside {
width: 320px;
height: 400px;
background-color: #fcfd00;
float: left;
}
.content .article {
width: 650px;
height: 400px;
background-color: #fefefe;
float: right;
}
.content .articleTop {
width: 650px;
height: 350px;
background-color: #fefefe;
}
.content .articleTopLeft {
width: 400px;
height: 350px;
background-color: #fefefe;
float: left;
}
.content .articleTopLeft .new1 {
width: 400px;
height: 200px;
background-color: #e9289c;
}
.content .articleTopLeft .new2 {
width: 400px;
height: 140px;
background-color: #3dd1fd;
margin-top: 10px;
}
.content .articleTopRight {
width: 240px;
height: 350px;
background-color: #acde3d;
float: right;
}
.content .articleBottom {
width: 650px;
height: 40px;
background-color: #b9950c;
margin-top: 10px;
}
.footer {
height: 40px;
width: 980px;
background-color: #ec6357;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="aside"></div>
<div class="article">
<div class="articleTop">
<div class="articleTopLeft">
<div class="new1"></div>
<div class="new2"></div>
</div>
<div class="articleTopRight"></div>
</div>
<div class="articleBottom"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
示范三
8.父级塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级塌陷</title>
<style>
/*儿子飘了. 父级就垮了*/
.box1 {
border: 1px solid black;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
9.父级塌陷解决方案
父级塌陷解决方案1:(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给父级加个高</title>
<style>
.box1 {
border: 1px solid black;
height: 100px
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
父级塌陷解决方案2:(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear: both</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
/*clear: both左右没有浮动标签*/
.box3 {
width: 200px;
height: 200px;
background-color: green;
clear: both;
/*是从贴靠开始计算的. 所以需要加上高度*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
父级塌陷解决方案3:外墙法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外墙法</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
/*设置外墙来清除浮动. 并隔离出空间*/
.wall {
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="wall"></div>
<div class="box3"></div>
</body>
</html>
父级塌陷解决方案3:内墙法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内墙法</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
.wall {
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="wall"></div>
</div>
<div class="box3"></div>
</body>
</html>
父级塌陷-终极方案:(内墙法+伪元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内墙法+伪元素</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
/*在box1后面插入一个标签并清除浮动*/
.box1:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
10.父级塌陷和margin-top问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.father{
width: 200px;
height: 200px;
background-color: green;
}
/*margin-top问题: son因为父级没有边框作为参照物. 直接将父级也拉下来了
1. 将父级加上一层边框
2. 在son前面加一个伪元素. 不占空间. 但是可以作为参照物
*/
.son {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 10px;
}
/*标准模板: 防止父级塌陷和margin-top问题
将clearfix加在有需要的父级盒子的属性后面!!!
*/
/*table配合空文本: 有标签. 但是不占空间*/
.clearfix {
*zoom: 1;
}
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="father clearfix">
<div class="son"></div>
</div>
</body>
</html>
11.初级博客页面
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix {
*zoom:1
}
.clearfix:before,.clearfix:after {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
.left {
/*display: none;*/
width: 20%;
height: 100%;
background-color: rgb(77,77,77);
position: fixed;
top: 0;
left: 0;
color: darkgrey;
}
.left .header-img {
width: 120px;
height: 120px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
margin: 20px auto;
}
.left .header-img img {
max-width: 120px;
}
.left .blog-title {
text-align: center;
}
.left .blog-info {
font-size: 12px;
text-align: center;
margin-top: 10px;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
.blog-link,.blog-tag {
margin-top: 20px;
text-align: center;
/*width: 100px;*/
/*border: 5px solid #000;*/
/*margin: 0 auto;*/
}
.blog-link a,.blog-tag a{
color: darkgrey;
}
.blog-link a:hover,.blog-tag a:hover{
color: white;
font-size: 14px;
}
.right {
width: 80%;
height: 1000px;
background-color: #eee;
float: right;
}
.article-list {
padding-left: 50px;
width: 80%;
}
.article-list .article {
background-color: white;
margin-top: 20px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
.article-list .article *{
padding: 10px;
}
.article-list .article .article-header p {
float: left;
font-size: 24px;
font-weight: bold;
border-left: 5px solid red;
}
.article-list .article .article-header span {
float: right;
margin: 10px 0;
}
.article-list .article .article-info {
border-bottom: 1px solid darkgrey;
}
</style>
</head>
<body>
<div class="left">
<div class="header-img">
<img src="o_tx.jpg" alt="">
</div>
<div class="blog-title">
<p>我的博客</p>
</div>
<div class="blog-info">
<p>这个人很懒，什么都没留下</p>
</div>
<div class="blog-link">
<ul>
<li><a href="#">关于我</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Golang</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="article-list">
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
</div>
</div>
</body>
</html>
12.补充: 无序列表居中问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.part {
width: 200px;
height: 200px;
background-color: red;
}
/*无序列表存在边距问题. 如果不去掉会导致不能居中*/
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
text-align: center;
}
</style>
</head>
<body>
<div class="part">
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
</div>
</body>
</html>
13.定位流-相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 10px;
left: 10px;
/*原来的位置加上外边距100px */
margin-top: 100px;
}
input {
height: 30px;
}
img {
height: 50px;
position: relative;
top: 21px;
left: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<!-- 加上验证码-->
<input type="text" placeholder="请输入验证码">
<img src="验证码图片url" alt="">
</body>
</html>
14.定位流-绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
/*绝对定位脱离文档流. 绝对定位参照其父级. 父级必须是定位流才会参照
所以想相对于父级的位置移动: 子绝父相
*/
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
}
/*设置相对位置*/
.box3 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box2"></div>
</div>
</body>
</html>
15.绝对定位-忽略父级的padding属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
}
.box3 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
padding: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box2"></div>
</div>
</body>
</html>
16.绝对定位的元素居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
/*绝对定位先相对父级居中. 而后移动半个边框的距离. 居中*/
.box2 {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
.box3 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box2"></div>
</div>
</body>
</html>
17.绝对定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style: none;
}
ul>li {
float: left;
width: 200px;
height: 50px;
background-color: rgba(155,155,155,0.09);
text-align: center;
line-height: 50px;
border: 1px solid red;
}
/*设置停留效果*/
ul>li:hover {
background-color: pink;
}
/*.bg {*/
/* background-image: url(img/img.png);*/
/* background-repeat: no-repeat;*/
/* background-size: 50px;*/
/* background-position: top right;*/
/*}*/
ul>li:nth-child(3) {
position: relative;
}
img {
position: absolute;
width: 40px;
top: -7px;
left: 78px;
}
</style>
</head>
<body>
<ul>
<li>basketball</li>
<li>football</li>
<li class="bg">
baseball
<img src="img/img.png" alt="">
</li>
<li>tennis</li>
<li>run</li>
</ul>
</body>
</html>
18.固定定位案例-回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
.box2 {
width: 1000px;
height: 200px;
background-color: green;
}
.box3 {
width: 300px;
height: 600px;
background-color: pink;
}
/*将标签改成行内块级. 可以设置宽高
改成固定定位就可以跟着屏幕移动
*/
a {
text-decoration: none;
text-decoration-color: rgba(21,0,10,0.99);
display: inline-block;
width: 100px;
height: 100px;
background: rgba(175, 167, 167, 0.14);
border-radius: 50%;
text-align: center;
line-height: 100px;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<a href="#">回到顶部</a>
</body>
</html>
19.z-index属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fathter1 {
width: 300px;
height: 300px;
background-color: red;
position: relative;
z-index: 10;
}
.son1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
bottom: -10px;
right: -50px;
z-index: 3;
}
.fathter2 {
width: 300px;
height: 300px;
background-color: green;
position: relative;
z-index: 1;
}
.son2 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: -20px;
right: -10px;
z-index: 4;
}
</style>
</head>
<body>
<div class="fathter1">
<div class="son1"></div>
</div>
<div class="fathter2">
<div class="son2"></div>
</div>
<form action="">
<input type="text" name="xx">
<input type="submit" value="1111">
</form>
</body>
</html>
标签：color,
布局,
100px,
height,
width,
background,
200px,
CSS,
页面
From： https://www.cnblogs.com/Maxs-message/p/16750168.html