HTML-CSS布局-4

2017-07-07 本文已影响33人张盛泽

HTML-CSS布局相关元素小心得

<pre>
在这里分享给大家一些HTML-CSS的相关知识，供新人学习，老人查阅,共勉。
------DanlV
</pre>

标准文档流

网页在解析的时候，遵循从上向下，从左向右的一个顺序，而这个顺序就是标准文档流。标准文档流 -- 》定义了标签的特性以及网页的解析顺序。标准文本流 -- 》指的是网页中文字
如果想要让行内元素和块级元素不再遵循本身的特性，除了转换（display）以外，还可以通过float和position来实现。*因为通过float（浮动）和 position(定位) 可以让元素脱离"标准文档流"。
TIPS：
1. position 定位可以让元素即扩里文档流，也脱离文本流
2.float 让元素脱离了标准文档流，但是没有让元素脱离标准文本流

遵循规则

网页解析顺序 :上 - > 下左 -> 右
块级元素和行内元素的规则:
1.块级元素自己霸占一行，不能与其他元素并列显示；可以设置宽度和高度；如果不设置宽度，块级元素会默认沾满整个父元素的宽；
2.行内元素能够与其他的行内元素并排显示；不能够设置宽度和高度，宽度是内容的宽度，高度是内容的高度；
高矮不齐，底边对其
单词写满一行，自动换行
如果单词没有写完(没有空格)，那么单词不换行
一个元素摆脱标准文档流限制的三种方式
1.浮动
2.绝对定位
3.固定定位

盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
我们把网页中任意一个元素都称之为盒子模型。

原理

内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

属性

1.width、height指的是盒子中内容的宽度和高度
2.padding--内边距指的是内容距离盒子边框的距离（在写css代码的时候，能够使用简写就不要使用其他的写法。）

width: 300px;
height: 300px;
border: 2px solid purple;
background-color: orange;
margin: 1px;
/*上下左右内边距都死10px*/
padding: 10px;
/*上下为10px 左右为20px*/
padding: 10px 20px;
/*上为10px 左右为20px 下为30px*/
padding: 10px 20px 30px;
/*上为10px 左为20px 下为30px 右为40px*/
padding: 10px 20px 30px 40px;

3.margin塌陷现象：两个盒子分别设置左边距，右边距，显示的结果显示值大的一个边距。

div {
    width: 300px;
    height: 200px;
    /*display: inline-block;*/
    float: left;
}
.d1 {
    background-color: red;
    /*margin-bottom: 20px;*/
    margin-right: 20px;
}
.d2 {
    background-color: blue;
    /*margin-top: 30px;*/
    margin-left: 10px;
}

<div class="d1"></div>
<div class="d2"></div>

4.盒子居中
.test {
width: 300px;
height: 300px;
background-color: red;
margin: 100px auto;/将左右的margin设置为auto将会居中/
}
<div class="test"></div>

浮动

浮动，让元素脱离标准文档流，float:left/right。

浮动的特性

元素脱离标准文档流
存在相互贴靠的效果
字围

清除浮动方案

因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。
而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。
解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

父级定义height，只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
父级元素结尾处加空div标签设属性clear:both（内墙法）

父级元素之后加空div标签设属性clear:both（外墙法）

      .box1 ul li {
          float: left;
          width: 30px;
          height: 40px;
          margin-left: 10px;
          background-color: orange;
      }
      
      .clear {
          clear: both;
      }
  </style>

</head>
<body>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

</div>

<div class="clear"></div>

  <div class="box2">
      <ul>
          <li>11</li>
          <li>22</li>
          <li>33</li>
          <li>44</li>
      </ul>
  </div>

</body>

父级div定义伪类:after和zoom

     <style type="text/css"> 
       .div1 {
            background: #000080;
            border: 1px solid red;
            }
       .div2 {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px
            }
       .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
            }
       .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
            }
       
       /*清除浮动代码*/
       .clearfloat:after{
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
            }
       .clearfloat { 
            zoom: 1
            }
       </style> 
    <div class="div1 clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    </div>
    <div class="div2">
       div2
    </div>

父级div定义overflow:hidden，不能和position配合使用，因为超出的尺寸的会被隐藏
父级div定义overflow:auto，内部宽高超过父级div时，会出现滚动条
父级div也一起浮动，可能会产生新的浮动问题

父级div定义display:table，将div属性变成表格，可能产生新的未知问题

  <style type="text/css"> 
     .div1 {
      background: #000080;
      border: 1px solid red;
      width: 98%;
      /*解决代码*/
      display: table;
      margin-bottom: 10px;
      }
     .div2 {
      background: #800080;
      border: 1px solid red;
      height: 100px;
      width: 98%;
     }
     
     .left {
      float: left;
      width: 20%;
      height: 200px;
      background: #DDD
     }
  
     .right {
      float:  right;
      width: 30%;
      height: 80px;
      background: #DDD
     }
     </style> 
  <div class="div1"> 
  <div class="left">Left</div> 
  <div class="right">Right</div>
  </div>
  <div class="div2">
     div2
  </div>