盒模型
认识width和height
一个盒子中主要的属性有5个：width、height、padding、border、margin。
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度。
padding是“内边距”的意思。
border是“边框”。
margin是“外边距”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px solid red;
padding: 50px;
}
</style>
</head>
<div>
昔时贤文，诲汝谆谆。集韵增广，多见多闻。
观今宜鉴古，无古不成今。
知己知彼，将心比心。
酒逢知己饮，诗向会人吟。相识满天下，知心能几人？
相逢好似初相识，到老终无怨恨心。
近水知鱼性，近山识鸟音。
易涨易退山溪水，易反易覆小人心。
</div>
<body>
</body>
</html>
通过审查元素，可以看出，盒子的内容width和height是200px，但是真是占有宽高是302*302(200+50+50+1+1)，这是因为还要加上padding,border,所以width和真实占有宽度，不是一个概念。
Padding
padding就是内边距。padding是4个方向的，所以我们能够分别描述4个方向的padding。
描述方式一：小属性
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;快捷键就是pdt、pdr、pdb、pdl 然后按tab
描述方式二:综合属性
每个数值对应是上右下左
/*上右下左*/
padding: 10px 20px 30px 40px;如果只写3个值
/*上右下左*/
padding: 10px 20px 30px ;那么左边的值将会和右边一样是20px。
如果只写2两个值
/*上右下左*/
padding: 10px 20px ;那么下面和上面的一样是10px，左边和右边一样是20px。
上面的等价于
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;要懂得用小属性层叠大属性
padding: 10px 20px ;
padding-left: 40px;一些元素默认带有padding,比如ul
做站的时候，便于控制，总是喜欢清除这个默认的padding
* {
margin: 0;
padding: 0;
}*的效率不高，所以我们使用并集选择器，罗列所有的标签。
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0
}border
就是边框。边框有三个要素：粗细、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。
border: 1px dashed blue;所有线形
border: 1px dashed blue;这个是大属性把4个边框，都设置为1px宽度、线形dashed、blue颜色
border属性能够被拆开，有两大种拆开的方式：
- 按3要素:
border-width、border-style、border-color - 按方向：
border-top、border-right、border-bottom、border-left
按3要素拆开：
/*宽*/
border-width: 10px;
/*线形*/
border-style: solid;
/*颜色*/
border-color: blue;等价于
border:10px solid blue;如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：
/*宽*/
border-width: 10px 20px;
/*线形*/
border-style: solid;
/*颜色*/
border-color: blue red;按方向拆分
border-top: 10px dashed red;
border-right: 20px solid green;
border-bottom: 30px ridge yellow;
border-left: 40px dotted orange;按方向还能进一步拆分，例如
border-top-width: 30px;
border-top-color: pink;
border-top-style: dotted;border可以没有
border: none;可以某一条边没有：
border-left: none;也可以调整左边边框的宽度为0：
border-top-width: 0;标准文档流
- 空白折叠现象
<img src="img/a.png" alt="">
<img src="img/b.png" alt="">图片之间有空白
如果想图片之间没有空白那么必须紧密相连
<img src="img/a.png" alt=""><img src="img/b.png" alt="">
2. 高矮不对齐，底边对齐。如上图所示。
块级元素和行内元素
标签分为两种等级
- 块级元素
- 霸占一行，不能与其他任何元素并列
- 能接受宽、高
- 如果不设置宽度，那么宽度将默认变为父亲的100%。
- 行内元素
- 与其他行内元素并排
- 不能设置宽、高。默认的宽度，就是文字的宽度。
在html中，标签分为:文本级和容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt,dd
在CSS中，和上面很像，就p标签不一样，所有的文本级标签都是行内元素，除了p标签，p是个文本级，但是是个块级元素，所有容器级标签都是块级元素。
块级元素和行内元素互换
块级元素可以设置为行内元素
行内元素可以设置为块级元素
.mydiv {
display: inline;
width: 500px;
height: 500px;
background-color: blueviolet;
}display是“显示模式”的意思，用来改变元素的行内、块级性质，inline就是“行内”的意思。
一旦，给一个标签设置display: inline;那么，这个标签将立即变为行内元素。此时div不能设置宽度、高度，可以和其他标签并排。
同样的道理
.myspan {
display: block;
width: 500px;
height: 500px;
background-color: blueviolet;
}block是“块”的意思，让标签变为块级元素，此时span能够设置宽高 ，无法与其他标签并排，如果不设置宽度，将撑满父亲，
标准文档流限制非常多，例如我们想要并排并且能设置宽高，在标准文档流中是非常困难的，所以我们必须脱离标准文档流。脱离标准文档流主要有三种方法
- 浮动
- 绝对定位
- 固定定位
浮动
浮动是css里面布局用的最多的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
float: left;
width: 300px;
height: 300px;
background-color: yellowgreen;
}
.box2 {
float: left;
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
两个元素并排了，并且两个元素都能够设置宽度、高度了，这在标准文档流就是不能实现的。
浮动有三个性质
- 浮动的元素脱离标准文档流
- 浮动的元素互相贴靠
- 浮动的元素有字围效果
浮动的元素脱离标准文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
width: 600px;
height: 300px;
background-color: yellowgreen;
}
.box2 {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>两个盒子都在标准文档流 ，效果是这样的
如果把第一个盒子左浮动，并修改宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
float: left;
width: 300px;
height: 300px;
background-color: yellowgreen;
}
.box2 {
width: 600px;
height: 600px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
一旦一个元素浮动了，那么能够并排，而且能设置宽高，无论是块级元素还是行内元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{
float: left;
background-color: orange;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<span>我是span1</span>
<span>我是span2</span>
<span>我是span3</span>
<span>我是span4</span>
<span>我是span5</span>
</body>
</html>浮动的元素互相贴靠
在上面5个span的例子中，通过改变浏览器的大小，我们能看到浮动的元素贴靠现象
浮动的元素有字围效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
float: left;
}
</style>
</head>
<body>
<div>
<img src="img/a.png" alt="">
</div>
<p>开始文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>
</html>
扫一扫
2425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
