学习笔记之自适应布局
学习笔记之自适应布局
这个只是我学习过程中从各处找资料整理的笔记,如果有不对的或者不准确的说法还希望各路大神能帮我指正,在此谢过!
尺寸
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学习笔记(6)--浮动,三列布局,高度宽度自适应
- iOS学习笔记--如何使九宫格布局图片的显示自适应大小
- 学习笔记之静态、自适应、流式、响应式四种网页布局区别
- CSS2.0下1行2列,左侧固定右侧自适应布局,兼容所有浏览器。[学习笔记]
- CSS2.0下1行2列,左侧固定右侧自适应布局,兼容所有浏览器。[学习笔记]
- React Native 学习笔记(六) -- 组件的宽和高及flexbox布局
- PyQt学习笔记01-Qt基本概念进阶篇之窗口布局,对话框
- html5学习笔记2-最简单的页面布局 (
- iPhone开发学习笔记003——UITableViewCell内容自适应高度
- 前端学习笔记--CSS--元素类型、布局模型
- C#学习笔记-WPF前端布局和控件的使用
- Silverlight3学习笔记3(布局初探)
- kshon学习笔记之android相对布局
- Silverlight学习笔记:布局之stackpanel
- 电磁兼容性设计学习笔记--PCB中地的布局
- Flex(弹性布局)学习笔记。
- Android(java)学习笔记93:Android布局详解之一:FrameLayout
- 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
- Androidx学习笔记(7)--常见布局--相对布局
- ANDROID基础学习笔记_2_几种常见的布局方式