CSS(三)
盒子模型
页面的所有元素都放在盒子(容器标记)中,无拼版不盒子
盒子模型
盒子由3部分组成
- 边界(外边距),盒子外面的部分
- 填充(内边距),盒子的内部
- 边框:盒子本上的4个边
标准流的注意事项
- 块显示标记默认宽带100%,高度是0px,上下排列,可以设定宽高
- 行显示标记,默认宽度0px,高度0px,左右排列,不能设置宽高
- 盒子是可以被撑开的
- 文字和图片不能放在图片之上,如果字在图上,或者图在图上,那么这个图必定是背景图
- 如果看到图片重复出现,这个图必定是背景图
例题(银杏的优点)
结果预览
难点分析
代码实现
<style type=”text/css”>
body{
background-image:url(images1/bg7.jpg); /*设置背景*/
background-repeat:no-repeat; /*背景不平铺*/
}
div{
background:url(images1/bg8.gif) repeat-y; /*银杏的叶子垂直平铺*/
padding-left:110px; /*文字距离div的宽度110px*/
font-size:18px; /*字号18px*/
}
</style>
</head>
<body>
<div>
<h1>银杏的优点</h1>
1. 叶色秀雅,花色清淡。<br />
2. 树体高大,寿命绵长,树粗可达4米,寿命可达3000年之多。固长与古老寺庙相配伍,以名山大川、风景名胜为伴。<br />
3. 树干光洁,愈伤力强,轻微的损伤很快便可愈合。<br />
4. 发芽晚落叶早,有利于早春和晚秋树下能及时得到和暧的阳光。<br />
5. 银杏冠大荫浓,具有降温作用;直射阳光下,气温高达40.20c,银杏树下的气温仅为35.30c。降温4.90c,优于其它树种。<br />
6. 萌蘖力强、耐修剪。根际萌蘖旺盛,可以形成五代同堂”,怀中抱孙”等自然风景。<br />
7. 银杏绝少病虫害,不污染环境,是著名的无公害树种。<br />
8. 抗旱力较强。<br />
9. 抗烟尘、抗火灾、抗有毒气体(如二氧化硫、氨气、臭氧等),抗辐射能力也强。
</div>
浮动(float)
浮动可以左浮动,也可以右浮动,只要浮动的元素都会脱离标准流
<style type=”text/css”>
#aa,#bb{
width:200px;
height:100px;
background-color:#F00;
float:left; /*左浮动*/
}
#bb{
background-color:#060;
}
#cc{
width:200px;
height:130px;
background-color:#00F;
}
</style>
<div id=”aa”></div>
<div id=”bb”></div>
<div id=”cc”></div>
运行结果
例题一(全部左浮动):
例题二(全部右浮动)
例题三(有左浮动,有右浮动)
脚下留心:盒子里面的子盒子浮动起来,子盒子就脱离标准流了,这时父盒子就不能精确的检测到它内部的内容到底有多高,父盒子会变成一根线;我们可以给父盒子加一个overflow:hidden属性让它精确检测一下内部的高度。盒子就会自动撑开了。
解决:给父盒子添加overflow:hidden
例题(春季)
难点分析
代码实现
<style type=”text/css”>
body{
background-color:#5B8A00;
color:#c4f762;
font-size:18px;
}
img{
float:right;
}
#first{
font-size:80px;
font-family:’黑体’;
float:left;
/*margin-right:20px;*/ 这两种方法都行
padding-right:20px;
}
</style>
<img src=”images4/mainroad.jpg” />
<span id=”first”>春</span>季,地球的北半球开始倾向太阳,受到越来越多的太阳光直射,因而气温开始升高。随着冰雪消融,河流水位上涨。春季植物开始发芽生长,许多鲜花开放。冬眠的动物苏醒,许多以卵过冬的动物孵化,鸟类开始迁徙,离开越冬地向繁殖地进发。许多动物在这段时间里发情,因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。
对农民来说,春季是播种许多农作物的季节。在春季,地球的北半球开始倾向太阳,受到越来越多的太阳光直射,因而气温开始升高。随着冰雪消融,河流水位上涨。春季植物开始发芽生长,许多鲜花开放。冬眠的动物苏醒,许多以卵过冬的动物孵化,鸟类开始迁徙,离开越冬地向繁殖地进发。许多动物在这段时间里发情,因此中国也将春季称为“万物复苏”的季节。
清除浮动
浮动属性会影响到其他的盒子
解决:清除c盒子的左浮动的影响
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除所有浮动
多学一招:Clear属性不但能清除float属性,还能清除margin属性,如果用了clear属性的盒子就不能再使用margin属性。
解决方法:在上下的盒子之间插入一个空div,专门用来清除浮动的影响。
定位
定位有四种
- absolute:局对定位
- relative:相对定位
- fixed:固定定位
- static:静态定位(默认)
除了默认定位以外,其他三种定位必须结合如下的属性使用
top:距上 left:距左 right:距右 bottom:距下
absolute(绝对定位)
- 要脱离标准流
- 以浏览器客户端的左上角为原点
- 不保留原先位置的占位
<style type=”text/css”>
div{
width:200px;
height:200px;
}
#aa{
background-color:#F00;
position:absolute; /*绝对定位*/
top:100px;
left:100px;
z-index:10 /*图层顺序*/
}
#bb{
background-color:#060;
position:absolute;
top:0px;
left:0px;
z-index:2; /*图层顺序*/
}
</style>
<div id=”aa”></div>
<div id=”bb”></div>
relative(相对定位)
- 保留原先位置的占位
- 默认原点是自身左上角
fixed(固定定位)
<style type=”text/css”>
#win{
width:100px;
height:100px;
background-color:#F00;
position:fixed; /*固定定位*/
right:0px; /*距右0px*/
bottom:0px; /*距下0px*/
}
</style>
<body style=”height:2000px;”>
<div id=”win”></div>
定位例题(通过绝对定位盒子居中)
分析:
例题
<style type=”text/css”>
div{
width:200px;
height:200px;
background-color:#F00;
position:absolute; /*绝对定位*/
left:50%; /*距左边界50%*/
top:50%; /*距上边界50%*/
margin-left:-100px; /*将盒子左移动100px;*/
margin-top:-100px; /*将盒子上移100px;*/
}
</style>
<div></div>
定位例题(以父级元素为原点)
口诀:父级相对,子级绝对,这个子级就以父级的左上角为原点。
内减模式
默认情况下,盒子的尺寸是外加模式,盒子实际宽度=盒子的宽度+填充+边框粗细。所以很多情况下,指定了填充以后,盒子尺寸会变大,解决方法:我们可以使用內减模式,就是指定盒子的宽度就是总宽度,如果指定填充,盒子中内容的宽度-填充=实际内容的宽度。这是css3增加的属性
<style type=”text/css”>
div{
width:200px;
height:200px;
border:#000 solid 1px;
padding-left:50px;
box-sizing:border-box; /*内减模式*/
}
</style>
<div>锄禾日当午</div>
例题(导航栏)
难点:
- 很多标签本身带有边界和填充,我们拼版的第一步是清除这些距离。
*{ /*所有标签都清空自带的距离*/
margin:0px;
padding:0px;
}
- 元素居中(左边界自动,右边界自动)
margin-left:auto;
margin-right:auto;
- 去除无序列表的前面的点
list-style-type:none; /*去除小圆点*/
- 导航内容垂直居中(设置行高)
line-height:30px; /*内容可以垂直居中*/
实现方法
<style type=”text/css”>
*{ /*所有标签都清空自带的距离*/
margin:0px;
padding:0px;
}
ul{
width:780px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
list-style-type:none; /*去除小圆点*/
overflow:hidden; /*重新测定子元素的高度*/
background-color:#060;
}
li{
float:left;
font-size:14px;
font-family:’微软雅黑’;
width:130px;
line-height:30px; /*内容可以垂直居中*/
text-align:center; /*文本居中*/
border-right:#930 solid 1px;
box-sizing:border-box; /*内减模式*/
}
a{
text-decoration:none;
color:#FFF;
}
a:hover{
background-color:#090;
display:block;
}
</style>
</head>
<body>
<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>
运行结果
例题(图片排版)
<style type=”text/css”>
*{
margin:0px;
padding:0px;
}
#con{
width:440px;
margin:auto;
list-style-type:none;
overflow:hidden;
}
#con li{
float:left;
width:110px;
}
</style>
<ul id=”con”>
<li><img src=”images14/ba1.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba2.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba3.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba4.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba5.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba6.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba7.jpg” width=”100″ height=”167″ /></li>
<li><img src=”images14/ba8.jpg” width=”100″ height=”167″ /></li>
</ul>
css3和css2的区别
CSS3比CSS2 多了一些属性,在做特效上功能变得很强大。
广义上的h5=html5+css3+js+js框架
css3的新增属性
- 內减模式:默认情况下,盒子的尺寸是外加模式,盒子实际宽度=盒子的宽度+填充+边框粗细。所以很多情况下,指定了填充以后,盒子尺寸会变大,解决方法:我们可以使用內减模式,就是指定盒子的宽度就是总宽度,如果指定填充,盒子中内容的宽度-填充=实际内容的宽度。
<style type=”text/css”>
div{
width:200px;
height:200px;
border:#000 solid 1px;
padding-left:50px;
box-sizing:border-box; /*内减模式*/
}
</style>
<div>锄禾日当午</div>
css3的新增属性选择器
CSS2有4个属性选择器,CSS3添加了3个。
CSS3新增的伪类选择器
选择器 | 含义 |
:root | 文档的根,就是html |
E:nth-child(n) | E的父元素的第n个子元素,n是从1开始 |
li:nth-child(even) | li父元素(ul)的第偶数个子元素 |
li:nth-child(odd) | li父元素(ul)的第奇数个子元素 |
li:first-child | li父元素(ul)的第1个子元素 |
li:last-child | li父元素(ul)的最后一个子元素 |
li:empty | li中不包含内容的元素 |
li:first-of-type | 第一个li |
li:last-of-type | 最后一个li |
li:nth-of-type(n) | 第n个li元素 |
CSS3新增的伪对象选择器
E:before 在E元素里面前面插入一个盒子(行显示)
E:after 在E元素的里面的后面插入一个盒子(行显示)
注意:这个两个伪对象必须和content属性一起使用
例题:
<style type=”text/css”>
*{
margin:0px;
padding:0px;
}
div{
width:290px;
height:25px;
border:#000 solid 1px;
margin:100px auto;
}
div:before,div:after{
content:”;
width:25px;
height:25px;
display:inline-block;
margin:0px 10px;
background:url(images17/tu1.png) no-repeat;
vertical-align:middle; /*盒子的居中对齐*/
}
input[type=’text’]{
height:25px;
width:200px;
border:none;
}
div:after{
background:url(images17/tu2.png) no-repeat;
}
</style>
<div><input type=”text” name=”con” /></div>
作业:
- 实现如下效果
- 实现如下效果
- 实现如下导航
拼版