在HTML以及CSS学习过程中遇到的主要问题

     

问题一：div的内容物，如图片，溢出div时（父容器塌陷问题）

       当容器内的全部元素浮动（由于浮动元素自动形成块元素，脱离文档流不占据位置，会导致父容器高度为零）或者内部不浮动的元素,不足以撑起父容器时，父容器高度会为0或者不足以满足我们对页面布局的要求，那么，我们必须想一些办法来解决这儿问题，有几个办法：

　　  1、给父容器设置一个高度

　　  2、设置父容器overflow：hidden或者overflow：auto；          

   .Clearfix{
          Overflow:auto;
          Zoom:1;
 }

　　  3、设置父元素浮动（不推荐）

　　  4、设置空元素对其（clearfix：both）

　　  5、给父元素应用以下样式:

 .clearfix:before,.clearfix:after{
      content:"";
      display:table;
}
 .clearfix:after{
       clear:both;
}

 

 

 

    问题二：clearfix问题

   Clear和cleafix

   Clear: clear 属性规定元素的哪一侧不允许其他浮动元素

left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值

 

   .Clearfix{

       Overflow:auto;

       Zoom:1;

    }

 

问题三：连续无空格的英语单词不换行

    （原因）浏览器默认解析英文或者数字时，是按照单词进行解析。也就是说，每个单词是一个整体，所以遇到空间不足时，不会对单词进行拆分。

     解决方法：

             1. word-wrap: break-word;此时，若单词过长，也不会进行换行，只是分割整个单词到下一行

             2.word-break : break-all;分割字母，单词过长会进行换行

 

问题四：实现图片两面、三面、四面环字

1. 两面环字：将图片放在文字之前，并且对图片进行浮动。
2.  三面四面，用另一个p标签进行定位，但是效率不高以及日后的维护不方便，还在寻找。

问题五：关于position问题

•   relative定位：应用了relative定位的元素（盒子模型）不脱离标准文档流，可以对它设定top、left、right、bottom值，实现对元素（盒子模型）相对于原来位置的微调，top即元素相对于原来的位置下移（可以设定负值，作用相当于设置正值bottom），left是元素相对于原来的位置右移。相同的， right为左移，bottom是上移。

1 position:relative;
2 top:xxpx;
3 left:xxpx;

• absolute定位：应用了absolute定位的元素会脱离文档流，好像它从来没有存在过，这时它的定位是相对于他的应用了relative定位的祖先元素而言的。而且它还有一个很重要的特性：就是会根据设定的位移值实现“跨越”（-xx），对其设定top、left、right、bottom是相对于他的祖先元素（盒子）的边界而言的。如果对其设定哪个位移方向，此元素（盒子）会先移动到那个方向的边界，然后相对于边界去移动

 

• fixed定位：fixed定位同样是脱离了标准文档流，不过他是相对于浏览器的窗口而言的，不会随着滚动条或者是界面的移动而改变，同样可以设定top、left、right、bottom值。

 

问题六：关于float问题

       浮动，主要有两种float：left；和float：right；

       浮动可以让块级元素脱离标准文档流（所以后面的元素会自动补上，但浮动的元素仍然在父元素内，故造成水填石现象），可以理解成为定义了浮动的元素，就要向所定义方向去移动，直到被阻挡住或者碰到了父容器边界。如果当行剩宽度不足，那么所浮动的盒子就会浮动到下一行。

　　在HTML的文档对象模型里，采用的是流式布局，也就是说，块级元素是独占一行的，想让块级元素并排，主要是两种办法，一种是在CSS里设置块级元素的display为inline-block。但是很多时候并不适合用这种办法，更多时候我们会采用浮动的办法。

　　浮动为实现页面布局提供了一种解决方案。

　　但是，有时候通过简简单单的浮动不能达到我们对界面布局的需求。这时候定位的重要性就体现了出来，定位可以分为四种：relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、static。当我们不对元素应用定位属性时，即默认状态为static。

      浮动的盒子比标准流盒子高，能够遮挡住标准流盒子，遮挡不住里面的图片和文字。

 

 

问题七：关于半透明层的问题

    一般来说是使用div设置背景颜色，然后设置alpha值

    filter: alpha(opacity=50);  /*在ie浏览器中*/ 

    opacity: .5; /*在除ie以外的浏览器中*/

    而当遇到需要背景半透明，内容文本不透明的情形时，可以使用定位，将文字相对于大盒子absolute,定位在小盒子上方

 

问题八：小知识---浮动的盒子相互影响

• 浮动的盒子千万不要让他超出父盒子，宁愿撑破父盒子即设置父盒子的高也不要不设置父盒子的高度而去把父盒子撑大。例如左边的商品菜单。
• 超出父盒子的部分会影响下面盒子中的浮动的子盒子。

        

 

问题九：什么时候用margin和padding（不考虑宽高）

1.需要使用背景图的时候必须用padding。

2.会出现外边距合并或者margin塌陷的时候用padding。

3.行内元素上下只能设置padding，不能设置margin。（行内高16px） 

4.看border，如果是a连接，看能不能让字体变色，或者显示小手。 

5.看需求。

 

问题十：隐藏盒子问题

 overflow：hidden;   隐藏盒子超出的部分。

 display: none;   隐藏盒子，而且不占位置。(用的最多)

 visibility: hidden;   隐藏盒子，而且占位置。

 opacity: 0;   隐藏盒子，而且占位置。

 position/top/left/...-9999px  隐藏盒子，而且占位置。

 

 

 

转载于:https://www.cnblogs.com/zp0818/p/8530555.html