【DIV + CSS 标准化页面布局实战】DIV + CSS布局介绍，浮动属性

DIV + CSS 标准化页面布局实战
HTML5新特性页面布局实战
响应式页面布局实战
使用弹性盒移动页面布局实战
用流行栅格框架布局页面实战

1.DIV+CSS布局布局介绍

页面布局常用标签

  <div>无意义块砖元素便签</div>
  <span>无意义行内元素标签</span>
  <p>段落标签</p>
  <ul>无序列表</ul>
  <li>列表项</li>
  <a>超链接标签</a>
  <img />
  <i>斜体标签</i>
  <b>粗体标签</b>

页面布局常用选择器

  id选择器 #id
  类选择器 .class
  关系选择器 div p、div>p、div,p
  伪类选择器 hover
  结构性伪类选择器：
  E:after、E:before、E:nth-child()、E:first-child、E:last-child

页面布局常用属性

  字体属性：font-size
  文本属性：text-decoration、text-align
  首行缩进：text-indent
  行高：line-height
  宽高属性：width、height、min-height、max-height
  背景属性：background
  列表属性：list-style-type
  字体颜色：color

页面布局应用属性

  定位属性：position
  布局属性：display
  浮动属性：float，clear
  (css3)盒子模型：border，margin，padding
  (css3)圆角边框：border-radius
  阴影：text-shadow，box-shadow

浮动定位指

将元素排除在普通流之外（也就是说脱离文档流，到了另外一层）
元素将不在页面中占据空间（也就是有自己的位置）
讲浮动元素放置在包含框的左边或者右边
浮动元素依旧位于包含框之内

浮动的框可以向左或向右移动，
直到他的外边缘碰到包含框或另一个浮动框的边框为止

浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动，只会左右浮动
任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行

语法：float:none/left/right

请看案例

<style>
  /*浮动属性:会脱离文档流,而且不会占据原有的空间 */
  #box{
    width: 600px;
    height: 600px;
    background:deeppink
  }
  #box>div:first-child{
    width: 200px;
    height: 200px;
    background:rebeccapurple;
    /* 左浮动 */
    /* float:left; */
  }
  #box>div:nth-child(2){
    width: 200px;
    height: 200px;
    background:rgb(233, 230, 47)
  }
  #box>div:last-child{
    width: 200px;
    height: 200px;
    background:rgb(231, 123, 60)
  }
</style>
<body>
  <div id="box">
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

浏览器显示结果：
在这里插入图片描述
如果我们给第一个加上了左浮动

  #box>div:first-child{
    width: 200px;
    height: 200px;
    background:rebeccapurple;
    /* 左浮动 */
    float:left;
  }

在这里插入图片描述
为了更明显，我们试着改一下宽高

说明它浮动上来了，并且没有占据宽高

我们试着设置成右浮动

  #box>div:first-child{
    width: 300px;
    height: 300px;
    background:rebeccapurple;
    /* 左浮动 */
    /* float:left; */
    /* 右浮动 */
    float: right;
  }

在这里插入图片描述
我们上面说：

浮动的框可以向左或向右移动，
直到他的外边缘碰到包含框或另一个浮动框的边框为止

接下来我们来试一试

在这里插入图片描述
所以我们可以很清晰的看见，当两个元素都被设置成浮动时，
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止

我们知道，div特性：独占一行
现在我们设置成浮动的两个元素都处于浮动状态
我们没有浮动的第三个元素，所以它的呈现状态是这样的
在这里插入图片描述
假设我们给它一个浮动
在空间不够的情况下，它会自动下来

我们可以很清晰的看见，它下来了~~~
这个也说明了，浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠，浮动元素不会上下浮动，只会左右浮动

我们知道，行内元素特点：没有宽高，并且不会独占一行

  <span>
    成就自己只需要一套精品
  </span>

我们给它设置一下宽高

  span{
    background: rgb(204, 142, 142);
    width: 200px;
    height: 200px; 
  }

浏览器显示结果：
在这里插入图片描述
我们发现我们给它设置的宽高是不起作用的
那么这时候如果我们给它加上浮动的属性

  span{
    background: rgb(204, 142, 142);
    width: 200px;
    height: 200px; 
    float: left;
  }

浏览器显示结果：
在这里插入图片描述
接下来我们继续测验

  <span>
    成就自己只需要一套精品
  </span>
  <span>
    成就自己只需要一套精品
  </span>

浏览器显示结果：
在这里插入图片描述
所以说，任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行，有利于我们的排版，right？

回到我们之前的小例子

假设我们不给我们的父元素设置宽高，并把它的三个子元素的浮动先去掉

 /*浮动属性:会脱离文档流,而且不会占据原有的空间 */
  /* div特性：独占一行 */
  #box{
    /* width: 600px; */
    /* height: 600px; */
    background:deeppink
  }
  #box>div:first-child{
    width: 200px;
    height: 200px;
    background:rebeccapurple;
    /* 左浮动 */
    /* float:left; */
    /* 右浮动 */
    /* float: right; */
  }
  #box>div:nth-child(2){
    width: 200px;
    height: 200px;
    background:rgb(233, 230, 47);
    /* 右浮动 */
    /* float:right; */
  }
  #box>div:last-child{
    width: 200px;
    height: 200px;
    background:rgb(231, 123, 60);
    /* float:right; */
  }

浏览器显示结果：
在这里插入图片描述
说明我们的父元素是能够感知我们的子元素的高度的

如果我们的第一个元素设置浮动了
在这里插入图片描述
我们可以发现父元素的高度明显降低了，因为第一个元素浮动了（可以理解为它离家出走了）
那么父元素只能感知到其他两个子元素的高度

同理，如果第二个设置了浮动，那么父元素只能感知到一个子元素的高度
如果第三个也设置了浮动，那么父元素就没有了
在这里插入图片描述
那么怎么解决这种问题？

1. 给父元素设置宽高

但是我要是不想设置宽高，应该怎么操作呢

2. 给父元素加----overflow: hidden

 /* 在不设置宽高的情况下，让父类可以感知子类的高度 */
    overflow: hidden;

3. 给父元素加浮动
设置完浮动之后，为了能够看见效果,我们再加一个div
在这里插入图片描述
我们设置的宽高是400*400，但是很明显，被浮动着的元素挡住了，这个时候，我们可以设置一下清除浮动

除了设置清除浮动，我们还可以给元素左浮动或者右浮动

因为父元素没有设置宽高，所以它可以尽情的浮动
父元素的宽高是根据子元素宽高决定的