2-4 CSS布局1-Float布局(IE)

一生注定学霸命

于 2021-04-14 10:22:26 发布

阅读量150

点赞数

分类专栏： HTML与CSS基础文章标签： css

本文链接：https://blog.csdn.net/qq_40282016/article/details/115432112

版权

HTML与CSS基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

CSS布局
1 布局是什么？
-把页面分成一块一块，按左中右、上中下等排列。

2 布局分类

两种布局
固定宽度布局：一般宽度为 960、1000、1024px
不固定宽度布局：手机上使用，主要靠文档流的原理来布局。（文档流本来就是自适应的，不需要添加额外的东西就会根据页面大小进行排列，注意不要设置宽度。）
第三种布局：响应式布局
PC上固定宽度，手机上不固定宽度，也就是一种混合布局。

3 布局的两种思路

从大到小：先做大框架，再完成小布局
从小到大：先完成小布局，组合成大布局

4 用什么布局
不兼容IE9则意思为只兼容手机端。
在这里插入图片描述

Float布局

1.步骤

子元素上加 float: left 和 width
在父元素上加 .clearfix
注意：由于在div上加了float，因此两个元素已经脱离文档流，而block元素的高度是由内部的文档流元素决定，因此要加上clearfix后head才能包裹住里面的浮动元素

2.负margin(平均布局时使用)
在平均布局时加上margin-left最后一个会对不齐
在这里插入图片描述

做平均布局时只需要在中间加一个x图层
其中图层x的margin-right为负数，值为每一个y值（间距）。

  <div class="imagelist ">
    <div class="x clearfix">
    <!--clearfix只在父级，注意要调换位置，由于imagelist的margin已经被占用了所以要添加一个x-->
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
  </div>

.imagelist>.x{
  margin-right: -12px;/*x原本的宽度为800px，在右边加上一个-12px就是812的宽度*/
}

2.注意事项：

一般最后一个div不设定宽度，可以根据页面总长设定一个最大值。
调试时border-box的border会占位置，改为outline就不占空间
float布局不需要做响应式，这个布局是专门为IE做的。
IE6/7存在双倍的margin bug，解决办法有两个
一、针对IE6/7把margin减半_margin-left: 5px;
二、加上：display: inline-block

3.案例
顶部条：

<body>
<header class="clearfix"><!--让header包裹住浮动元素-->
  <div class="logo">logo</div>
  <nav>导航</nav><!--导航栏用nav-->
  <div class="user">用户名</div>
</header>
</body>

*{margin:0;padding:0; box-sizing: border-box;}/*先reset一下*/

.clearfix:after{
  content:'';
  display: block;
  clear:both;
}

.logo{
  border: 1px solid red;
  height: 40px;
  width: 100px;
  float: left;/*脱离文档流，两个块级元素靠拢到一排*/
  margin-top: 5px;/*让LOGO和导航居中对齐*/
  margin-left: 10px;
  display: inline-block;/*其他浏览器会跳过，只有IE6/7认识*/
}

nav{
  border: 1px solid green;
  width:100px;
  height: 50px;
  float: left;/*脱离文档流，两个块级元素靠拢到一排*/
}

.user{
  border: 1px solid blue;
  height: 50px;
  float: left;
  max-width: 100px;/*限定最大宽度，不会超过页面即可*/
}

header{
    border: 1px solid black;
}

导航栏：

<body>
  <header class="clearfix">
    <div class="logo">
      <img src="https://img-blog.csdnimg.cn/20210403114706585.jfif?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
    </div>
    <ul class="clearfix nav">
      <!--两个名字，css中任意一个选择器均可以使用-->
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
</body>

*{margin:0;padding:0;box-sizing: border-box;}

ul,ol{
  list-style:none;/*将list前面的小圆点去掉*/
}

img{
  max-width: 100%;/*图片最大宽度不能超过这一行*/
}

.logo{
  background: grey;
  display: inline-block;
  float: left;
  margin-top: 8px;/*根据图片高度和文字行高计算出来对齐的高度*/
  margin-left: 10px;/*图片距离做左边距*/
}

.logo > img{
  height: 26px;/*LOGO里面的img设定高度，高度在对齐的时候比较好计算*/
  vertical-align: top;/*如果图片下面由多余的东西则用该行代码*/
}

.clearfix::after{
  content:'';
  display: block;
  clear:both;
}

.nav{
  float: left;
}

ul > li{
  float:left;/*竖列变成行，脱离文档流*/
  padding: 4px 0.5em;/*1em等于当前字体的大小，高度必须确定数值*/
  line-height: 32px;/*设置行高方便对齐*/
}

ul{
  display: inline-block;/*宽度为内部元素的宽度*/
  margin-left: 10px;/*调整文字与图片的距离*/
}

header{
  background: grey;
  color: white;/*header里面所有字体变成白色*/
}

主要内容区

<div class="content clearfix">
  <aside>一行有六个字</aside>
  <!--边栏-->
  <main></main>
  <!--主要内容区-->
  <div class="ad"></div>
  <!--广告-->
</div>

.content{
  outline:1px solid red;/*outline不占空间，border占空间 ，border-box会算在里面*/
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  /*让页面居中，这两句更好，因为没有覆盖上下的margin*/
}

.content>aside{
  width: 190px;
  background: #999;
  height: 300px;
  float: left;
}

.content>main{
  width: 500px;
  background: #ccc;
  height: 300px;
  float: left;
}

.content> .ad{
  width: 110px;
  background: #000;
  height: 300px;
  float: left;
}
/*完成后要将border删掉，不然在border-box中会占据位置*/

平均布局：
要注意float元素边缘不会合并，因此当格子超过一行时，中间的间距会变成两倍，解决办法是将margin-top删掉，变成单个margin-bottom，最上方的边距放到外面imagelist去

  <div class="imagelist ">
    <div class="x clearfix"><!--clearfix只在父级，注意要调换位置-->
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
  </div>

.imagelist{
  outline: 1px solid red;
  width: 800px;
  margin-left: auto;
  margin-right: auto;/*位置居中*/
  margin-top:10px;
}

.imagelist>.x>.image{
/*要注意父子级关系*/
  width: 191px;
  height: 191px;
  background: #777;
  float: left;
  margin-top: 10px;
  margin-right: 12px;
}

.imagelist>.x{
  margin-right: -12px;/*x原本的宽度为800px，在右边加上一个-12px就是812的宽度*/
}

一生注定学霸命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-4 CSS布局1-Float布局(IE)

CSS布局1 布局是什么？-把页面分成一块一块，按左中右、上中下等排列。2 布局分类两种布局固定宽度布局：一般宽度为 960、1000、1024px不固定宽度布局：手机上使用，主要靠文档流的原理来布局。（文档流本来就是自适应的，不需要添加额外的东西就会根据页面大小进行排列，注意不要设置宽度。）第三种布局：响应式布局PC上固定宽度，手机上不固定宽度，也就是一种混合布局。3 布局的两种思路从大到小：先做大框架，再完成小布局从小到大：先完成小布局，组合成大布局4 用什么布局不兼容
复制链接

扫一扫

专栏目录