<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.parent {
position: relative;
width: 210px;
height: 250px;
background-color: yellow
}
div {
width: 200px;
height: 200px;
}
#relative {
background-color: red;
position: absolute;
left:10px;
top:10px;
z-index: 1;
}
.general {
background-color: grey;
width: 100%;
height: 220px;
}
#absoulte {
background-color: red;
position: relative;
left:10px;
top:10px;
}
</style>
</head>
<body>
<div class="parent">
<div id="relative">
relative相对于自己原来的位置偏移 left:10px;top:10px;不占位
</div>
<div class="general"></div>
</div>
<hr>
<div class="parent">
<div id="absoulte">
absoulte以父层做为定位基线的话，在父层应用absolute或relativ属性就可以，left:10px;top:10px;占位
</div>
<div class="general"></div>
</div>
</body>
</html>
html viewport的学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1">
<title>width</title>
<style>
body {
padding:0;
margin:0;
}
.container {
margin: 0;
padding: 0;
background-color: red;
}
/* @media all and (max-device-width: 320px) {
.container {
width: 100px;
}
} */
</style>
</head>
<body>
<div class="container" id="container">
hello world
</div>
<script>
alert("window.innerWidth = " + window.innerWidth);
alert("screen.width = " + screen.width);
alert("container = " + document.getElementById('container').clientWidth);
</script>
</body>
</html>
html中float的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
#float_left {
float: left;
}
#float_right {
float: right;
height: 250px;
}
.general {
/* clear: left; */
/* clear: right; */
clear: both;
background-color: grey;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="float_left">float left,不占位，可以通过clear:left清除</div>
<div id="float_right">float left,不占位，可以通过clear:right清除</div>
<div class="general"></div>
</body>
</html>
CSS3 columns的使用
<!DOCTYPE html>
<html>
<head>
<title>column attr</title>
<meta charset="utf-8" />
<style type="text/css">
div.col-3 {
column-count: 3;
column-gap: 5px;
}
div.col-3 h3 {
column-span: all;
text-align:center;
background: #eee;
}
</style>
</head>
<body>
<div class="col-3">
<h3>这是表头</h3>
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。
</div>
</body>
</html>
CSS3 box-sizing的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
div {
width: 200px;
height: 200px
}
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
padding:5px;
border:5px solid blue;
box-sizing: border-box; /*这个属性包含了border、padding*/
}
</style>
</head>
<body>
<div id="div1">content</div>
<div id="div2">content</div>
</body>
</html>