自适应+两栏三栏布局

自适应

宽度自适应
高度自适应
窗口的自适应
动态计算宽度和高度
如何实现两栏或者三栏布局

宽度自适应

概念：不设置宽度的话就是宽度自适应，通常情况下，默认不设置宽度，width的取值为auto
特点：默认占父元素/屏幕的一整行
因此，宽度自适应有三种情况：

1）width：auto即不设置宽度
2）width：100%
3）不给元素添加盒子模型
因为只要添加了盒子模型，元素实现的效果不一样。
width：auto auto+内边距不会把盒子撑大
但是width：100%，100%+内边距=具体数值，比如父元素宽度为2000px，内边距为200px，那么此时的宽度为2000+200=2200px

高度自适应

  概念：给元素不设置高度，就是高度的自适应。默认的不设置高度的元素。使用方法：height：auto；此时的高度是有文本撑开或者子元素撑开。问题：添加不添加height都存在问题添加height的话，1）如果文本过少，留白会太多，2）如果文本过多的话，容易出现溢出效果。解决上面的问题，使用最值属性：最小最大高度使用的是最小高度问题：min-height,最小高度====最少就这么多了，不能比他还小了。但是超过他的话，能实现自适应高度。同样的，还有min-width、max-width、min-height、max-height

窗口的自适应

   在设置百分比的基础上，元素会根据窗口的大小发生改变。元素设置的宽度高度是需要设置成百分比，但是百分比单位有继承，继承的是父元素的大小。

html,body{height:100%;}

动态计算宽度和高度

    动态计算宽度和高度：当屏幕大小发生改变的时候，盒子有一个区域是固定的宽度。如何去求剩余的宽度使用了一个calc(参数1 - 参数2)函数，里面有两个参数，参数中间的运算符前后需要带空格，必须携带。运算符：+-*/%

除了使用calc()函数实现左右两块布局之外，还有；另外一种方法实现左右两块布局。
左边的盒子固定宽度或者高度，然后让他浮动，右边的盒子自适应+内边距。如下：

.lef{
width:200px;
height:200px;
backgroud-color:red;
float:left;}
.right{
height:300px;
bakground-color:green;
padding-left:200px}

如何实现两栏或者三栏布局

两栏布局：一左一右
三栏布局：左中右，左右固定高度，中间自适应
第一种方法：使用calc函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0px;padding: 0px;}.lef,.reg{width: 200px;height: 200px;background-color: red;float: left;}.cen{width: calc(100% - 400px);height: 200px;background-color: green;float: left;}</style>
</head>
<body><div class="lef"></div><div class="cen"></div><div class="reg"></div></body>
</html>

第二种：使用宽度自适应加内边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0}.lef,.rig{width: 200px;height: 200px;background-color: orange;}.lef{float: left;}.rig{float: right;}.cen{margin:0px 200px;height: 200px;background-color: green;}</style>
</head>
<body><!-- rig一定要放在cen的前面，left的后面 --><div class="lef"></div><div class="rig"></div><div class="cen"></div></body>
</html>

第三种：使用定位
当右边的布局放在中间布局后面后，使用定位就可以解决

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0}.lef,.rig{width: 200px;height: 200px;background-color: orange;position: absolute;}.rig{top:0px;right: 0px;}.cen{margin:0px 200px;height: 200px;background-color: green;}</style>
</head>
<body><div class="lef"></div><div class="cen"></div><div class="rig"></div></body>
</html>

自适应+两栏三栏布局相关推荐

css：两栏三栏布局
两栏布局左边固定右边自适应 1.浮动方式 <!DOCTYPE html> <html lang="en"> <head><style> ...
在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
通过宽高自适应设计两栏布局和三栏布局
1.两栏布局我们要实现下面这样一个东西:两栏,左边一栏,右边一栏,左边宽高固定,右边宽高自适应,见下图: ✍我们有两种解决办法:(1)给右边盒子加外边距(2)calc函数的运用第一种方法:(1)给 ...
两栏布局，三栏布局，等高布局，流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...
假设高度已知,请写出三栏布局,其中左右各位300px,中间自适应 1.左右浮动 .left { float: left; width: 300px; background: red; } .right ...
div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...
css布局：table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...
Web实现：flex弹性布局三栏自适应布局
效果:整个页面分为三栏,左右两栏都是固定宽度,中间栏根据屏幕大小宽度相应变化. 实现: HTML部分: <!DOCTYPE html> <html lang="en&quo ...