江苏华江建设集团有限公司网站,东莞营销型高端网站建设,多商户开源商城,中视频自媒体平台注册文章目录 一、两栏布局的实现1. floatmargin2. flaotBFC3. 定位margin4. flex 布局5. grid布局 二、三栏布局的实现1. float margin2. float BFC3. 定位 margin(或者定位BFC)4. flex布局5. 圣杯布局6. 双飞翼布局 一、两栏布局的实现
两栏布局其实就是左侧定宽#xff0c;… 文章目录 一、两栏布局的实现1. floatmargin2. flaotBFC3. 定位margin4. flex 布局5. grid布局 二、三栏布局的实现1. float margin2. float BFC3. 定位 margin(或者定位BFC)4. flex布局5. 圣杯布局6. 双飞翼布局 一、两栏布局的实现
两栏布局其实就是左侧定宽右侧自适应的布局
1. floatmargin
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}/style/headbodydiv classcontainerdiv classleft/divdiv classright/div/div/body
/html
2. flaotBFC
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}/style/headbodydiv classcontainerdiv classleft/divdiv classright/div/div/body
/html 知识课堂 先来看两个相关的概念: ●Box: Box是CSS布局的对象和基本单位一个页面是由很多个Box组成的这个Box就是我们所说的盒模型。 ●Formatting context: 块级上下文格式化它是页面中的一块渲染区域并且有一 套渲染规则它决定了其子元素将如何定位以及和其他元素的关系和相互作用。 块格式化上下文(Block Formatting Context, BFC) 是Web页面的可视化CSS渲染的一部分是布局过程中生成块级盒子的区域也是浮动元素与其他元素的交互限定区域。 通俗来讲: BFC是一 -个独立的布局环境可以理解为一个容器在这个容器中按照一定规则进行物品摆放并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件则BFC中的元素布局不受外部影响。 创建BFC的条件: ●根元素: body; ●元素设置浮动: float除none以外的值; ●元素设置绝对定位: position (absolute、 fixed); ●display值为: inline-block、 table-cell、 table-caption、 flex等 ; ●overflow值为: hidden、 auto、 scroll; BFC的特点: ●垂直方向上自.上而下排列和文档流的排列方式-致。 ●在BFC中上下相邻的两个容器的margin会重叠 ●计算BFC的高度时需要计算浮动元素的高度 ●BFC区域不会与浮动的容器发生重叠 ●BFC是独立的容器容器内部元素不会影响外部元素●每个元素的左margin值和容器的左border相接触 3. 定位margin
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {padding: 0;margin: 0;box-sizing: border-box;}.left {position: absolute;left: 0;width: 100px;height: 300px;background: red;}.right {margin-left: 100px;height: 300px;background: green;}/style/headbodydiv classleft/divdiv classright/div/body
/html
4. flex 布局
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}/style/headbodydiv classcontainerdiv classleft/divdiv classright/div/div/body
/html
5. grid布局
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.container {display: grid;grid-template-columns: 100px 1fr;box-sizing: border-box;height: 300px;}.left {background: red;}.right {background: green;}/style/headbodydiv classcontainerdiv classleft/divdiv classright/div/div/body
/html
二、三栏布局的实现
左右定宽中间自适应
1. float margin
!DOCTYPE html
html langenheadmeta charsetUTF-8 /titleCSS实现三栏布局1/titlestyle typetext/css.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}/style/headbodydiv classleft左栏/divdiv classright右栏/divdiv classmiddle中间栏/div/body
/html
2. float BFC
!DOCTYPE html
html langenheadmeta charsetUTF-8 /titleCSS实现三栏布局1/titlestyle typetext/css.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;overflow: hidden;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}/style/headbodydiv classleft左栏/divdiv classright右栏/divdiv classmiddle中间栏/div/body
/html
注意上面两种方法都必须先渲染right,否则right会被middle挤下来
3. 定位 margin(或者定位BFC)
!DOCTYPE html
html langenheadmeta charsetUTF-8 /titleCSS实现三栏布局3/titlestyle typetext/css.container {position: relative;}.left {width: 200px;height: 300px;background-color: #dc698a;position: absolute;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {position: absolute;right: 0;top: 0;width: 200px;height: 300px;background-color: #3eacdd;}/style/headbodydiv classcontainerdiv classleft左栏/divdiv classmiddle中间栏/divdiv classright右栏/div/div/body
/html
4. flex布局
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.container {height: 300px;display: flex;}.left,.right {width: 100px;background: red;}.center {flex: 1;background: green;}/style/headbodydiv classcontainerdiv classleft/divdiv classcenter/divdiv classright/div/div/body
/html
5. 圣杯布局
!DOCTYPE html
html langenheadmeta charsetUTF-8 /titleTitle/titlestyle.container {height: 200px;overflow: hidden;padding: 0 200px;}.center {width: 100%;height: 200px;background-color: green;float: left;}.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;position: relative;left: -200px;}.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;position: relative;right: -200px;}/style/headbodydiv classcontainerdiv classcenter/divdiv classleft/divdiv classright/div/div/body
/html
6. 双飞翼布局
