博客
关于我
2-4 CSS布局1-Float布局(IE)
阅读量:186 次
发布时间:2019-02-28

本文共 3404 字,大约阅读时间需要 11 分钟。

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最后一个会对不齐
在这里插入图片描述

  1. 做平均布局时只需要在中间加一个x图层
  2. 其中图层x的margin-right为负数,值为每一个y值(间距)。
.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.案例

顶部条:

用户名
*{   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;}

导航栏:

  
*{   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里面所有字体变成白色*/}

主要内容区

.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去

.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的宽度*/}

转载地址:http://pfvi.baihongyu.com/

你可能感兴趣的文章
mysql 自增id和UUID做主键性能分析,及最优方案
查看>>
Mysql 自定义函数
查看>>
mysql 行转列 列转行
查看>>
Mysql 表分区
查看>>
mysql 表的操作
查看>>
mysql 视图,视图更新删除
查看>>
MySQL 触发器
查看>>
mysql 让所有IP访问数据库
查看>>
mysql 记录的增删改查
查看>>
MySQL 设置数据库的隔离级别
查看>>
MySQL 证明为什么用limit时,offset很大会影响性能
查看>>
Mysql 语句操作索引SQL语句
查看>>
MySQL 误操作后数据恢复(update,delete忘加where条件)
查看>>
MySQL 调优/优化的 101 个建议!
查看>>
mysql 转义字符用法_MySql 转义字符的使用说明
查看>>
mysql 输入密码秒退
查看>>
mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
查看>>
mysql 通过查看mysql 配置参数、状态来优化你的mysql
查看>>
mysql 里对root及普通用户赋权及更改密码的一些命令
查看>>
Mysql 重置自增列的开始序号
查看>>