css flex布局 padding,css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）...

本篇文章给大家带来的内容是关于LNMP以源码的方式记录环境搭建的过程(详细)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果图：

圣杯布局

圣杯

.container{

padding:0 200px 0 180px;

height:100px;

}

.left{

float:left;

width:180px;

height:100px;

margin-left:-100%;

background:red;

position:relative;

left:-180px;

}

.main{

float:left;

width:100%;

height:100px;

background:blue;

}

.right{

float:left;

width:200px;

height:100px;

margin-left:-200px;

background:green;

position:relative;

right:-200px;

}

middle

left

right

双飞翼布局

双飞翼

.main{

float:left;

width:100%;/*左栏上去到第一行*/

height:100px;

background:blue;

}

.left{

float:left;

width:180px;

height:100px;

margin-left:-100%;

background:red;

}

.right{

float:left;

width:200px;

height:100px;

margin-left:-200px;

background:green;

}

left

right

Flex布局

Flex

.flex {

display: flex;

flex-flow: row;

}

.left{

width: 180px;

height: 100px;

background-color: red;

}

.main{

flex: 1;

height: 100px;

background-color: blue;

}

.right {

width: 200px;

height: 100px;

background-color: green;

}

left

middle

right

如果main要给左边的left模块和右边的right模块都让出一定宽度来的话，只有padding：0 100px 0 200px;或者margin：0 100px 0 200px;这两种方式！

这两条路线：

如果走margin路线，一路走下去，你会发现最后你写出的代码就是双飞翼；

如果走padding路线，那就是圣杯！

css flex布局 padding,css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）...相关推荐

html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...
浏览器默认css样式表在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:div>label>Open... maoguiyou 2016年09月13日 ...
css卷轴动画小程序,微信小程序动画两种实现方式
开发小程序,实现动画功能,有两种实现方式,下面来看看具体怎么做: JS动画利用小程序API提供的wx.createAnimation(OBJECT)实现,API中是这样说:创建一个动画实例anima ...
集合详解（三）----Map的两种遍历方式
第一种取值方式第二种取值方式 Map是以键值对(key-value)的方式来存取值的,那么该怎么把Map中的值取出来的,有两种方式,往下看.先定义一个Map,向里面存放一些数据. HashMap m ...
html怎么设置左侧内边距,CSS 内边距(Padding)
CSS 内边距(Padding) CSS 内边距(Padding)属性定义元素边框与元素内容之间的空间.有时候也称CSS 内边距(Padding)为填充(Padding). 内边距(Padding) ...
[css] 使用flex实现三栏布局，两边固定，中间自适应
[css] 使用flex实现三栏布局,两边固定,中间自适应同意里面的一个回答,现在有很多简单的实现方式,传统的这个也是一种hack的方式,真的没必要去追究了,但是核心知识点可以掌握.1.把 cent ...
六种方法实现CSS三栏布局
方法一:浮动+margin 实现方法:左栏向左浮动,右栏向右浮动,中间栏不设宽度,用左右margin来撑开距离. <!DOCTYPE html> <html><head& ...
CSS || 三栏布局，两边固定，中间自适应
1 float实现基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margin ...
CSS三栏自适应布局，左中右，上中下
本文对可以实现三栏布局的方法进行了整理左右固定宽度,中间自适应(5种方法) 1.float方法 2.absolute方法 3.flexbox方法 4.table方法 5.grid方法 <htm ...
css三栏布局技巧,CSS-三栏布局的常用6种方法
三栏布局一般指左右两栏固定宽度,中间一栏自适应的布局方法,也是许多网站常用的布局方式.如下图: 该示例在一个html文件中编写,为方便起见,预先写好一个通用的css,左右宽度都为100px: 1.浮动 ...

css flex布局 padding,css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）...

css flex布局 padding,css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）...相关推荐

最新文章

热门文章