一:盒模型
什么是盒模型:在了解盒模型之前,要先来了解一下盒子是什么,通俗的来说,盒子就是用来装东西的,那在这里,就是用来存储网页上的所有元素的,在Css中,它包含content(内容),padding(内边框),margin(外边距),border(边框)。所以,一个盒子的重要属性包括:width(一般不用设置,由内容撑开),height,padding,border,margin。
盒子的总宽度:内容宽度+左右两边填充+边框线+左右两边外边距
盒子的总高度:内容高度+上下两边填充+边框线+上下两边外边距
- padding
padding是内填充的意思,是内容到边距的距离,padding有4个方向,描述方法有两种:小属性和简写属性。
小属性:padding-top,padding-right,padding-bottom,padding-left.
简写属性:padding:4px;padding:20px 20px;padding:10px 10px 20px; padding:10px 10px 20px 20px;
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Padding练习</title>
<style type="text/css">
.pad{
/* 设置div的高度,一般不进行设置,由内容撑开. */
height: 100px;
/* 设置div的宽度 */
width: 200px;
background-color:#425865 ;
/* 小属性设置 */
/* padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
*/
/* 简写属性设置 */
/* padding: 20px; */
/* padding: 20px 30px; */
/* padding: 20px 30px 20px; */
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="pad">
<div class="son">
“江澄竟然让这厮嚣张了这么久,换了是我,当初魏某人叛逃时就不是捅他一刀,而是直接清理门户,否则也不会让他做出后来那些丧心病狂之事。还讲什么同门同修青梅竹马的情面。”
</div>
</div>
</body>
</html>
效果:
- margin
margin,是外边距,是盒子与盒子之间的距离,也有四个方向,两种表示方法,与padding 的用法相似。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Margin练习</title>
<style type="text/css">
.pad{
/* 设置div的高度,一般不进行设置,由内容撑开. */
height: 100px;
/* 设置div的宽度 */
width: 200px;
background-color:#425865 ;
/* 小属性设置 */
/* margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
*/
/* 简写属性设置 */
/* margin: 20px; */
/* margin: 20px 30px; */
/* margin: 20px 30px 20px; */
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="pad">
<div class="son">
“江澄竟然让这厮嚣张了这么久,换了是我,当初魏某人叛逃时就不是捅他一刀,而是直接清理门户,否则也不会让他做出后来那些丧心病狂之事。还讲什么同门同修青梅竹马的情面。”
</div>
</div>
</body>
</html>
效果:
- margin塌陷现象
margin塌陷现象:就是两个兄弟元素如果都设置了margin,那么margin的值取两个元素中margin值最大的那个。
注意:浮动的元素是没有他先现象的。并且这个现象也只是发生在竖直方向上,水平方向是没有的。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin塌陷现象</title>
<style type="text/css">
.brother1{
width: 100px;
height: 100px;
background-color: #4169E1;
margin: 30px;
}
.brother2{
width: 100px;
height: 100px;
background-color: #FFAAAA;
margin: 30px;
}
</style>
</head>
<body>
<div class="brother1"></div>
<div class="brother2"></div>
</body>
</html>
效果:
- margin居中
margin不仅仅能够设置外边距,还能使元素居中。
当Margin的左右外边距为auto时,盒子水平居中,但是要注意,在使用居中的时候,要注意一定要设置好他的宽高,否则盒子就会占满整个屏幕,并且,这里的居中只能用于盒子,如果想要文本居中的话,还是要用我们之前讲的text-align。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用margin使盒子居中</title>
<style type="text/css">
.mar{
width: 100px;
height: 100px;
background-color: #4169E1;
/*设置盒子水平居中,上外边距为100px*/
margin: 100px auto;
}
</style>
</head>
<body>
<div class="mar">
</div>
</body>
</html>
效果:
- 善于使用元素的父元素的padding而不是子元素的margin
我们想要使子元素与祖辈元素之间存在距离,要尽可能地使用父元素的padding而不是子元素的margin,原因是有时候设置了子元素的margin后,父元素会随着子元素一起移动。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>善用父元素的padding而不是子元素的margin</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.ps1{
width: 300px;
height: 300px;
background-color: #4169E1;
padding-top: 50px;
}
.ps2{
width: 100px;
height: 100px;
background-color: #808080;
}
</style>
</head>
<body>
<div class="ps1">
<div class="ps2">
</div>
</div>
</body>
</html>
效果:
- border
border是外边框的意思,它总共有三个关键要素:粗细(1px),线的类型(solide),显得颜色(red)。这里线的颜色可以省略,如果不特别设置,颜色为黑色。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border边框线</title>
<style type="text/css">
.bo{
height: 100px;
width: 100px;
background-color: #4169E1;
border: 1px solid salmon;
}
</style>
</head>
<body>
<div class="bo">
</div>
</body>
</html>
效果:
二:display属性
display 属性可以设置将隐藏的元素显示或者将显示的元素隐藏,也可以将行内元素转换成块级元素和将块元素转换成行内元素。它的重要属性有三个:none,block,inline。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display属性</title>
<style type="text/css">
.ha{
/* display: none; */
display: block;
height: 40px;
width:200px ;
background-color: #4169E1;
color: white;
font-size: 20px;
text-align: center;
line-height: 40px;
}
.ku{
display: block;
height: 40px;
width:200px ;
background-color: #4169E1;
color: white;
font-size: 20px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<h3 class="ha">我是行内元素</h3>
<div class="ku">
我是块级元素
</div>
</body>
</html>
效果:
小案例:
之前的导航栏案例中,只有将鼠标对准链接文字的时候,链接才会进行horver的改变,在这里,可以利用display属性,让鼠标在标签周围标签就能有变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动小总结</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 20px;
font-family: "微软雅黑";
background-image: url(../img/beijing.jpg);
}
.th{
width: 960px;
height: 40px;
margin-left: auto;
margin-right: auto;
}
ul{
list-style: none;
}
ul li{
float: left;
width: 160px;
height: 40px;
background-image: url(../img/diwenbiaoti.jpg);
text-align: center;
line-height: 40px;
}
a{
text-decoration: none;
color: #000000;
display: block;
width: 160px;
height: 40px;
}
a:hover{
color: #4169E1;
font-size: 24px;
font-weight: bold;
background-color: white;
}
</style>
</head>
<body>
<div class="th">
<ul>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
<li><a href="">标题</a></li>
</ul>
</div>
</body>
</html>
效果: