目录
一.长度单位
1.像素和百分比
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
div
{
width: 200px;
height: 200px;
background-color: blue;
}
.red{
width: 25%;
height: 25%;
background-color: red;
}
</style>
</head>
<body>
<div>
<div class="red"></div>
</div>
</body>
</html>
2.em与rem
rem是根据html文字大小
二.颜色单位
1.RGB
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.blue
{
width:100px;
height: 100px;
background-color: rgb(125, 125, 200);
}
.red{
width:100px;
height: 100px;
background-color: rgba(23, 77, 200,.5);
}
</style>
</head>
<body>
<div class="blue">
</div>
<p class="red">
</p>
</body>
</html>
2.HSL（了解）
三.文档流（normal flow）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.t{
width: 25px;
background-color: royalblue;
}
.s{
background-color: salmon;
}
</style>
</head>
<body>
<div class="t">first</div>
<div class="t">first</div>
<span class="s">second</span> <span class="s">second</span> <span class="s">second</span>
</body>
</html>
四.盒子模型(importance)
1.初识
平时直接设定的都是内容区
2.边框
当你指定一个border的时候
border-width: 111px;
border-color: salmon;
border-style: double;
这样有点麻烦 可以直接
border:111px salmon double
这个没有顺序要求
3.内边框
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.t{
width: 200px;
height: 200px;
background-color: seagreen;
border: 10px orange solid;
/*padding: 12px ;*/
}
.q{
width: 100%;
height: 100%;
background-color: orange;
}
</style>
</head>
<body>
<div class="t">
<div class="q"></div>
</div>
</body>
</html>
4.外边距
可以为负值哦
5.水平方向的布局
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.outer{
width: 800px;
height: 200px;
border: solid red 10px;
}
.inner{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
<div class="outer">
<div class="inner"> </div>
hello
</div>
这说明子类占用了一整个
水平居中！！！！！！！！
width为固定值
margin:0 auto;
垂直居中！！！！！！！！
让文字在父元素中垂直居中的方法是设置line-height与父类一致
.n .item{
height: 25px;
/*让文字在父元素中垂直居中的方法是设置line-height与父类一致*/
line-height: 25px;
/*margin-left就错了！！！！！！*/
padding-left: 15px;
/*这里虽然元素宽度变大了 但是 注意盒子模型未指定width 它是auto 自动调整的！
可以试一下指定宽度的时候情况！
*/
}
6.垂直方向的布局
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.outer{
background-color: rosybrown;
}
.inner{
width: 100px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"> </div>
</div>
</body>
</html>
父元素高度不写 就被子元素撑开 他们就一样
下面：
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，就溢出，撑开了
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.box1{
width: 200px;
height:200px;
background-color: #bfa;
}
.box2{
width: 100px;
height:400px;
background-color: royalblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"> </div>
</div>
</body>
</html>
处理
overflow: hidden;
可见是：visible
这样会导致这个状况，会把一个完整的文字
还有一种方式：scroll
生成滚动条的形式
但是它虽然不用下面的滚动条，他也会生成，所以有一个更好的auto
overflow: auto;
7.外边距的折叠
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.box1,.box2{
width: 200px;
height:200px;
font-size: 100px;
}
.box1{
background-color: #bfa;
margin-bottom: 100px;
}
.box2{
background-color: royalblue;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="box1"> </div>
<div class="box2"> </div>
</body>
</html>
外边距设置了两个 但是结果只是显示了一个！
这个问题叫垂直外边距的重叠
兄弟元素的
父子元素
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.box1{
width: 200px;
height:200px;
background-color: #bfa;
margin-bottom: 100px;
}
.box2{
width: 100px;
height:100px;
background-color: royalblue;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"> </div>
</div>
</body>
</html>
子元素加了一个
margin-top: 100px;
把父元素也下移了
父子元素间相邻外边距，子元素的会传递给父元素（上外边距)父子外边距的折叠会影响到页面的布局，必须要进行处理（以后再说）
8.行内元素的盒模型
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.box1{
background-color: #bfa;
margin: 50px red solid;
border: blue 50px solid;
padding: yellow 50px solid;
}
.box2{
width: 100px;
height:100px;
background-color: royalblue;
margin-top: 100px;
}
</style>
</head>
<body>
<span class="box1">
hello
</span>
<div class="box2">
</div>
</body>
</html>
属性display和visibility
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
.box1{
width: 100px;
height:100px;
border: blue 10px solid;
}
</style>
</head>
<body>
<div class="box1"> </div>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
可以看到第一个块和浏览器是有缝隙的 所以我们可以消除
body{
margin: 0;
}
p之间的距离消除
p
{
margin:0;
}
一一一一一一一一一一一一一一一一一一一一一一一一一一一一
以上处理方法十分麻烦
简单页面可以这样写
*{
margin: 0;
padding:0;
}
引用css文件
<link rel="stylesheet" href="/css/reset.css">