学习笔记之自适应布局

原创 2016年05月30日 21:53:01

学习笔记之自适应布局

这个只是我学习过程中从各处找资料整理的笔记,如果有不对的或者不准确的说法还希望各路大神能帮我指正,在此谢过!

尺寸
1. 百分比 (相对于父对象)
2. auto(块级水平方向的auto,块级元素的margin border padding content宽度之和等于父元素width)
3. 包裹性(元素被设定为浮动,width变成内容的宽度,此时width:auto不管用)

浮动

* 元素脱离文档流
* 使用width/height,margin/padding将元素定位

example圣杯布局

  1. left:宽度固定,高度可固定也可由内容撑开
  2. right:宽度固定,高度可固定也可由内容撑开 
  3. center:可以自适应浏览器宽度,高度可固定也可由内容撑开

DOM

<div class="con">
    <div class="center">centeer</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

样式

<style>
    body{padding:0;margin:0}
    .con{
        padding-left:150px;
        padding-right:190px;
    }
    .left{
        background: #E79F6D;
        width:150px;
        float:left;
        margin-left:-100%;
        position: relative;
        left:-150px;
    }
    .center{
        background: #D6D6D6;
        width:100%;
        float:left;
    }
    .right{
        background: #77BBDD;
        width:190px;
        float:left;
        margin-left:-190px;
        position:relative;
        right:-190px;
    }
</style>

左右侧栏定宽并浮动,中部内容区放最前不浮动width:100%并设置父对象内边距,让左右侧边栏浮动到上面,再将其相对定位出去

注意
子元素设置为浮动之后,父对象的高度会坍塌,需要设置父对象后的元素清除浮动,这样父对象的高度才能被浮动子元素撑起来。
撑起方法:

1. 让父对象也脱离文档流,浮动(但是这样就不能实现宽度自适应)
2. 将浮动元素的边框边界拉下来,就是在后面的元素里加clear语句(clear与BFC)

example双飞翼布局

DOM

<div class="con">
    <div class="center">
        <div class="inner">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

css样式

<style>
    body{padding:0;margin:0}
    .left{
        background: #E79F6D;
        width:150px;
        float:left;
        margin-left:-100%;
    }
    .center{
        background: #D6D6D6;
        width:100%;
        float:left;
    }
    .right{
        background: #77BBDD;
        width:190px;
        float:left;
        margin-left:-190px;
    }
    .inner{
        margin-left:150px;
        margin-right:190px;
    }
</style>

其中:

1. html中要让center放前面,然而left要跑到center的前面,所以center必须浮动否则由于他们都是块元素会分两行
2. 浮动之后要让center宽度自适应,则width:100%,在父对象中设width:auto;也就是说,让父对象宽度自适应,center只是继承con的宽度
3. 对left、right使用负的margin让它们浮动到上面

总结

使用浮动进行布局时清除浮动可以用伪类after来清除;
在元素较多而且元素高度尺寸不一的情况下,单纯使用浮动只能实现上端对齐,对于适应多种设备的布局不太好用。

普通流布局

display:inline-block;

ps : inline-block元素会有4px左右的空隙,这是因为写代码时的换行符所致

解决办法:

1. 在inline-block的父元素设置样式font-size:0;letter-spacing:-4px;
2. 设置inline-block的所有兄弟元素 font-size:值;letter-spacing:值px;
3. 恢复正常的显示

inline-block默认是基线对齐的,而inline-block基线又跟文本基线一致,所以在内容不同的时候不能水平对齐。只需要用vertical-align显示声明一下top/bottom/middle对齐即可。

基线:

1. 无文字:容器的margin-bottom下边缘,与容器内部的元素无关;
2. 有文字:最后一行文字的下边缘,和文字块(即p/h等)的margin、padding无关

问题:

为什么内联元素的层叠顺序要比浮动元素和块状元素要高?

答:浮动元素和块状元素都用作布局,但是内联元素都是内容,而网页中内容的层叠顺序一定要高,这样重要的文字图片什么的才能优先出现在屏幕上。

总结

相比浮动inline-block更加容易理解,对于元素高度不同的情况,目前浮动布局的做法都是将元素做成等高元素进行展现;但是inline-block有vertical-align属性,可以解决元素高度不同而带来的布局问题。

绝对定位

position : absolute;

单纯使用绝对定位进行自适应布局的情况很少,一般绝对定位都用在尺寸固定的元素定位上

相关文章推荐

css学习笔记之三栏布局及中间栏自适应

下面记录我所了解的三栏自适应布局。 1.margin负边距 3 column adaptive_1 html,body{ ...

自适应四元数kalman滤波matlab学习笔记(三)

1、EKF的matlab实现: 卡尔曼最初提出的滤波理论只适用于线性系统,Bucy,Sunahara等人提出并研究了扩展卡尔曼滤波(Extended Kalman Filter,简称...

unity3d学习笔记(十四)--NGUI用Sprite动画和屏幕自适应制作游戏

本系列文章由Aimar_Johnny编写,欢迎转载,转载请标明出处,谢谢。 http://blog.csdn.net/lzhq1982/article/details/12856597 ...

unity3d学习笔记(十四)--NGUI用Sprite动画和屏幕自适应制作游戏开始场景

通过前面十三篇文章的介绍,我的游戏场景基本搭建完成了,我们在玩任何一款手游产品时,都是先上来个logo界面,游戏欢迎界面等,这就意味着我们要做一款游戏需要多个场景,场景之间来回切换实现游戏逻辑,uni...
  • lzhq1982
  • lzhq1982
  • 2013年10月19日 15:24
  • 10552

【Android学习笔记】ScrollView下使用无滚动条ListView,即ListView的item内容自适应拉伸

在写Android项目中,ListView是b

Android工作学习笔记之图片自适应imageview属性android:scaleType

安卓的适配一直是一件头疼的事情. 特别是图片.有的时候总是忽大忽小. 以前习惯于从服务器下载图片后,再写一个工具类来缩减成指定的大小,然后放进指定控件. 其实不用那么麻烦,ImageView...

Unity3D学习笔记01:GUI自适应屏幕分辨率

GUI通常情况下用来制作游戏的菜单界面和游戏运行时的工具栏等,不同型号的手机的屏幕分辨率往往不同,这样我们就会遇到自适应屏幕这个问题,下面我们就来说一下解决办法。        首先我们来看谈一下实现...
  • jukai7
  • jukai7
  • 2013年08月14日 23:27
  • 3662

Emgu 学习笔记(二)---图像二值化,自适应阈值化,Otsu二值化

图像二值化,自适应阈值化,Otsu二值化 Emgu灰度化、二值化操作方法和OpenCV中区别不大,Threshold()来实现的。 自适应阈值是整幅图像使用一个阈值,自适应阈值是图像的不同区域使用...

OpenCV学习笔记-自适应阈值化

自适应阈值化的函数为:AdaptiveThreshold自适应阈值方法void cvAdaptiveThreshold( const CvArr* src, CvArr* dst, double ma...

自适应四元数kalman滤波matlab学习笔记(一)

1、Matlab中的clc,clear,close命令区别? clc:清除命令窗口的内容,对工作环境中的全部变量无任何影响; clear:清除工作空间的所有变量; clear all:清除工作空...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习笔记之自适应布局
举报原因:
原因补充:

(最多只允许输入30个字)