发表于： 2016-04-10 01:04:54
3 1637
好几天没写日报了。电脑进水，彻底报废。 最可气的是宿舍的人都不承认是他们弄的。那天就两个人在宿舍。世态炎凉啊！
收拾心情，买了台笔记本。今天更新日报。
任务详情:完成自适应九宫格。
基础知识:盒子模型介绍。
文本内容: 可以是 文本，图片块等其他元素。
内边距:用来指内容和边框之间的距离。
边框：可以设置边框线的粗细、颜色、样式。
外边距：用来指内容与内容之间的距离。可以当成块级元素之间间隙。
盒子的背景包括：border+padding+content。
标准盒子模型的宽度指的是内容的宽度。即width=content。
对于microsoft的ie来说，盒子的宽度为 width=content+paddind+border。
而整个盒子的宽度为content+padding+border+margin。
默认情况下 border、padding、margin、content设置都为0。
如果用ie浏览器选择W3C的标准盒子模型必须在html头部声明
DOCTYPE。
使用 DIV+CSS来完成九宫格的制作。之前是使用table+img的方式来制作。但是感觉还要加载图片。网上查询思路。参考各位师兄日报,才最后选择这个方式。
代码：
先设计一个大的块级元素。
.box
{
width：500px;
Height:500px;
border:1px solid red;
}
宽高都为500px;边框为实线，宽度为1px。
在编写一个块级元素 。嵌套在 box里。
.dia
{
margin:0.5%;
padding:16.16%;
background-color:#e8830d;
float:left;
border-radius:5%;
}
九宫格为3×3的方式排列。
设置单个块元素的margin为0.5%。 则块与块之间的距离为1% 。
每行有三个，总的margin的宽度为1%×3=3% 。
padding：(100%-3%)÷3÷2约等于16.16% 。
显示效果如下:
关于对浮动的介绍，我引用脚本之家
float属性介绍：http://m.jb51.net/css/22702.html
下面是我个人根据介绍自己理解的。
float可以浮动左边或者右边，直到接触到其他的边框。
float元素有4个值
right
left
none(默认 不浮动)
inherit(继承父元素的值 自己没有尝试过，不是很理解。)
设置了float属性，元素就会脱离普通的文档流。
出现塌陷。
解决方法：使用clear：both；或者overflow：hidden 。
overflow介绍：
overflow有四个属性值：
分别是：
visible （默认值）
hidden
scroll
auto
visible:
假设有两个块元素，一个父级块，一个嵌套块。
当嵌套块的内容超出父级块的大小时，嵌套块的
内容则溢出父级块显示。并且不会影响布局。
例子如下：
.boxx
{
width:70px;
height:70px;
border:1px solid black;
overflow:visible;
}
.vis
{
color:red;
}
.......
<body>
<div class="boxx">
<div class="vis">
我是一只小鸟。我是一只小鸟。我是一只小鸟。我是一只小鸟。我是一只小鸟。我是一只小鸟。
</div>
</div>
<h2 color="black"> 没有遮住我</h2>
</body>
显示效果如下：
hidden
将溢出父级块的内容全都隐藏掉。
例子如下：
.boxx
{
width:70px;
height:70px;
border:1px solid black;
overflow:hidden;
}
显示效果如下：
scroll:
系统将提供一个滚动条将超出父级块的内容显示出来。在IE浏览器中
滚动条的大小也算在父级块的宽度里。
例子如下：
.boxx
{
width:70px;
height:70px;
border:1px solid black;
overflow:scroll;
}
显示效果如下：
auto：
即便在没有超出父级块时，也显示滚动条。
代码如下：
.boxx
{
width:100px;
height:100px;
border:1px solid black;
overflow:scroll;
}
显示效果如下：
清除浮动：
将父级块overflow属性的值设置成hidden 或 auto。父级块的大小将自动
扩展到能盛放嵌套类所需要的大小。
.boxx
{
width:100px;
border:1px solid black;
}
.vis
{
height:50px;
width:50px;
background-color: #952da0;
float:left;
margin:10px;
}
.......
<div class="boxx">
<div class="vis">我是一只小鸟。</div>
<div class="vis">我是一只小鸟。</div>
<div class="vis">我是一只小鸟。</div>
</div>
<h2 color="black"> 没有遮住我</h2>
</body>
显示效果如下：
在.boxx中加入
overflow：auto或者overflow：hidden
显示效果如下：
clear属性：
border-radius:5%;可以是块级元素出现圆角的效果。
关于自适应：
1.定义了父级元素的宽度和高度后嵌套的元素块使用百分比。
2.在文件头部head meta中加入
‘name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"’
#####################
全部代码如下。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <title>position</title> <style>
.box
{
max-width:500px; margin:auto; border:1px solid red; padding:0.5%
}
.clear
{
clear:both;
}
.dia
{
margin:0.5%; padding:16.16%; background-color:#e8830d; float:left;
border-radius:5%;
}
</style>
</head>
<body>
<div class="box"> <div class="dia"></div> <div class="dia"></div> <div class="dia"></div> <div class="dia"></div> <div class="dia"></div> <div class="dia"></div> <div class="dia"></div> <div class="dia"></div> <div class="dia"></div> <div class="clear"></div> </div>
</body>
</html>
返回列表
评论