IT修真院 CSS1 九宫格

IT修真院 CSS1 九宫格

 

文件名：F:\IT_School\CSS_1

 

1.在div中插入图片为什么会有空隙?

<div>

   <img src=”images/1.gif” alt=”” />

</div>

把div的border打开，你发现图片底部不是紧贴着容器底部的，有空隙，是img后面的空白字符(换行)造成，要消除必须这样写：

<div>

<img src=”images/1.gif” alt=”” /> </div> 后面两个标签要紧挨着。

最好的解决方案：给img设定 display:block。

 

2.非浮动块中的浮动，会撑不开。给非浮动块加overflow：hidden

浮动中的块，会将浮动撑开。

 

3.代码思想：

<div id="container">

    <div class="box">

     <img src="image/1.jpg" alt="" />

</div>

···*8

</div>

 

#container块，设置宽，使得放不下四个box，overflow：hidden

.box设置浮动

img设置宽高如100px，100px。设置成块display：block，撑开.box

 

4.响应式设计

<div id="container">

    <div class="box">

     <img src="images/1.jpg" alt="" />

</div>

······

</div>

 

#container{

width: 98%;           /*相对于body，即屏幕宽度*/

margin: 0px;

padding: 0px;

overflow: hidden;

}

.box{

width: 30%;        /*百分比值得要求：25% < xx%+padding+margin < 33%，才能*/

float: left;          /*正好一行三个。*/  

padding: 0px;

margin: 1px;

}

.box img{

display: block;  /*box没有width时，我们在img里加尺寸和padding、margin，此时*/

width: 100%;   /*img的尺寸是自由的。但是这里box有width，img的width是固*/

height: auto;   /*定的。而width是内容区宽度，若是在img里加padding、margin */

}                 /*造成冲突。*/

 

编程思想：

1.画container，宽度为屏幕的98%

2.画box，内容区宽度为container的30%，再加上padding，margin，

要求25% < 30%+padding+margin < 33%，使得浮动后，一行三个

3.img宽度为box内容区宽度。

 

5.手机访问

①打开nginx

②确保手机，电脑在同一WiFi下。

③查看电脑ip：win+R -> cmd -> ipconfig ->回车，查看ip地址，如192.168.1.11

④在手机端输入网址：192.168.1.11即可。