博客
关于我
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中interactive_timeout和wait_timeout的区别
查看>>
mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
查看>>
mysql中json_extract的使用方法
查看>>
mysql中json_extract的使用方法
查看>>
mysql中kill掉所有锁表的进程
查看>>
mysql中like % %模糊查询
查看>>
MySql中mvcc学习记录
查看>>
mysql中null和空字符串的区别与问题!
查看>>
MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
查看>>
MYSQL中TINYINT的取值范围
查看>>
MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>
MySQL中一条SQL语句到底是如何执行的呢?
查看>>
MySQL中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>