黔江网站建设,qq推广大联盟,python 做的网站,济南网站建设招标一、两列布局
两列布局#xff1a;一列定宽(也有可能由子元素决定宽度)#xff0c;一列自适应的布局。
创建一个父盒子#xff0c;和子盒子 div classcontainer clearfixdiv classleft 定宽/divdiv classright…一、两列布局
两列布局一列定宽(也有可能由子元素决定宽度)一列自适应的布局。
创建一个父盒子和子盒子 div classcontainer clearfixdiv classleft 定宽/divdiv classright 自适应/div
/div基本CSS样式如下
body {margin: 0;
}.container {height: 50px;background-color: #fff;
}.left {height: 50px;width: 200px;background-color: antiquewhite;font-size: 12px;line-height: 50px;text-align: center;
}.right {height: 50px;background-color: azure;font-size: 12px;line-height: 50px;
}.mt5 {margin-top: 5px;
}/* 清除浮动 */
.clearfix:after {content: ;display: block;height: 0;clear: both;visibility: hidden;
}1.定宽浮动: float calc()函数
(1)左边列开启浮动
(2)右边列开启浮动
(3)右边列宽度为父级 100%减去左列的宽度 div classcontainer clearfixdiv classleft left-float-left定宽 float-left/divdiv classright right-float-left自适应 float-left calc(100% - 200px)/div
/div基本CSS样式如下
.left-float-left {float: left;
}.right-float-left {/* 右边列开启浮动 */float: left;/* 宽度减去左列的宽度 */width: calc(100% - 200px);
}
2.定宽浮动float margin-left
(1)左边列开启浮动
(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距
!-- 2.定宽块级元素水平居中 设置宽度设置margin0 auto; --
div classcontainer clearfix mt5div classleft left-float-left定宽 float-left/divdiv classright right-margin-left自适应 margin-left/div
/div基本样式如下
.left-float-left {float: left;
}/* 通过外边距的方式使该容器的左边有200px */
.right-margin-left {margin-left: 200px;
}
3.定宽定位 : absolute margin-left
(1)开启定位脱离文档流
(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距 div classcontainer clearfix mt5div classleft left-position-absolute定宽:position:absolute/divdiv classright right-margin-left自适应 margin-left/div
/divcss基本样式如下
.left-position-absolute {position: absolute;
}.right-margin-left {margin-left: 200px;
}4.浮动 :float overflow
(1)左侧元素开始浮动
(2)右侧自适应元素设置overflow会创建一个BFC完成自适应 div classcontainer clearfix mt5div classleft left-float-leftfloat-left/divdiv classright right-overflow-hiddenoverflow-hidden/div
/div基本样式如下
.left-float-left {float: left;
}.right-overflow-hidden {overflow: hidden;
}
5.flex布局 : flex-1
Flex布局通过 flex 属性实现: flex: 1; (表示 flex-grow: 1; 即该项占所有剩余空间) div classcontainer clearfix mt5 container-flexdiv classleft left/divdiv classright flex-1flex-1/div
/div基本样式如下
.container-flex {display: flex;
}.flex-1 {flex: 1;
}
6.Grid布局 : grid-template-columns属性
Grid 布局通过template属性实现: grid-template-columns: auto 1fr;(将其划分为两行其中一列有本身宽度决定 一列占剩余宽度) div classcontainer clearfix mt5 container-grid-1frdiv classleft 定宽/divdiv classright grid/div
/div基本样式如下
.container-grid-1fr {display: grid;grid-template-columns: auto 1fr;}二、三列布局
三列布局主要分为两种
1.第一种: 前两列定宽最后一列自适应这一种本质上与两列布局没有什么区别可以参照两列布局实现。
2.第二种 前后两列定宽中间自适应。
创建一个父盒子和子盒子
!-- 解决高度塌陷 --
div classcontainer clearfix mt5div classleft 左边/divdiv classcontent内容/divdiv classright右边/div
/div公共的 CSS 代码如下
body {margin: 0;
}.container {height: 50px;background-color: antiquewhite;
}.left {height: 50px;width: 100px;background-color: azure;
}.content {height: 50px;background-color: floralwhite;
}.right {height: 50px;width: 100px;background-color: #ccc;
}.left,
.content,
.right {font-size: 12px;line-height: 50px;text-align: center;
}/* 清除浮动 */
.clearfix:after {content: ;display: block;height: 0;clear: both;visibility: hidden;
}.mt5 {margin-top: 5px;
}1.左右浮动float overflow: hidden
(1)左列容器开启左浮动
(2)右列容器开启右浮动
(3)自适应元素设置overflow会创建一个BFC完成自适应
!-- 解决高度塌陷 --
div classcontainer clearfix mt5div classleft left-float-left左边/divdiv classright right-float-right右边/divdiv classcontent content-overflow-hidden内容/div
/div基本样式如下
.left-float-left {float: left;
}/* 自适应元素设置 overflow 会创建一个BFC 完成自适应 */
.content-overflow-hidden {overflow: hidden;
}.right-float-right {float: right;
}2.左右浮动float calc()函数
(1)左列容器开启左浮动
(2)右列容器开启右浮动
(3)使中间自适应的宽度为父级容器减去两个定宽的列
!-- 解决高度塌陷 --
div classcontainer clearfix mt5div classleft left-float-left左边/divdiv classright right-float-right右边/divdiv classcontent content-width-calc内容/div
/divcss样式如下
.left-float-left {float: left;
}.right-float-right {float: right;
}/* 使中间自适应的宽度为父级容器减去两个定宽的列 */
.content-width-calc {width: calc(100% - 100px);
}3.定位: 子绝父相 calc()函数 margin
(1)左右两列脱离文档流并通过偏移的方式到达自己的区域
(2)使中间自适应的宽度为父级容器减去两个定宽的列
(3)通过外边距将容器往内缩小
!-- 解决高度塌陷 --
div classcontainer clearfix mt5 container-position-relativediv classleft left-position-absolute左边/divdiv classcontent content-width-calc-margin内容/divdiv classright right-position-absolute右边/div
/div!-- 解决高度塌陷 --
div classcontainer clearfix mt5 container-position-relativediv classleft left-position-absolute左边/divdiv classright right-position-absolute右边/divdiv classcontent content-width-calc-margin内容/div
/divcss样式如下
.container-position-relative {position: relative;
}.left-position-absolute {position: absolute;left: 0;top: 0;
}.right-position-absolute {position: absolute;right: 0;top: 0;
}.content-width-calc-margin {width: calc(100% - 200px);margin-right: 100px;margin-left: 100px;
}4.flex布局 : flex-1
(1)开启 Flex 布局。 (2)设置 flex 属性,flex : 1。
!-- 解决高度塌陷 --
div classcontainer clearfix mt5 container-flexdiv classleft左边/divdiv classcontent flex-1内容 flex-1/divdiv classright 右边/div
/div
css样式如下
.container-flex {display: flex;
}.flex-1 {flex: 1;
}5.grid布局 grid-template-columns
(1)开启 grid布局。 (2)设置 grid 属性, grid-template-columns: auto 1fr auto;
!-- 解决高度塌陷 --
div classcontainer clearfix mt5 container-grid-1frdiv classleft左边/divdiv classcontent 内容/divdiv classright 右边/div
/div
css样式如下 .container-grid-1fr {display: grid;grid-template-columns: auto 1fr auto;
}三、等分布局
等分布局就是将一个容器平均分成几等份这里以 4 等分为例。
创建一个父盒子和子盒子
div classcontainer clearfixdiv classitem item1 /divdiv classitem item2 /divdiv classitem item3 /divdiv classitem item4 /div
/div基本CSS样式如下
body {margin: 0;
}
.container {height: 50px;background-color: #eee;
}
.item {height: 100%;
}
.item1 {background-color: skyblue;
}
.item2 {background-color: deepskyblue;
}
.item3 {background-color: lightskyblue;
}
.item4 {background-color: royalblue;
}
/* 清除浮动 */
.clearfix::after {content: ;display: block;height: 0;clear: both;visibility: hidden;
}
1.浮动百分比
开启浮动使每个元素占25%的宽度。
!-- 1.浮动百分比 --
div classcontainer clearfixdiv classitem item1 width-25 float-left/divdiv classitem item2 width-25 float-left/divdiv classitem item3 width-25 float-left/divdiv classitem item4 width-25 float-left/div
/div基本CSS样式如下
.width-25 {width: 25%;
}.float-left {float: left;
}
2.行内块级 百分比
!-- 行内块级元素 百分比 --
div classcontainer clearfixdiv classitem item4 width-24-5 display-inline-block/divdiv classitem item3 width-24-5 display-inline-block/divdiv classitem item2 width-24-5 display-inline-block/divdiv classitem item1 width-24-5 display-inline-block/div
/div
基本CSS样式如下
.width-24-5 {width: 24.5%;
}.display-inline-block {display: inline-block;
}
3.flex布局
1.设置父元素相对定位 position:relative; 子元素绝对定位 position:absolute; 2.设置偏移量 left: 50%; top: 50%; 3.外边距-宽度/高度的一半将元素移动: margin-left- 宽度的一半 ; margin-top: 高度的一半 ;
!-- flex --
div classcontainer clearfix display-flexdiv classitem item4 flex-1/divdiv classitem item3 flex-1/divdiv classitem item2 flex-1/divdiv classitem item1 flex-1/div
/div基本CSS样式如下
.display-flex {display: flex;
}.flex-1 {flex: 1;
}
4.grid布局
开启 grid 布局,使用 repeat 函数生成。
!-- grid --
div classcontainer clearfix display-grid grid-template-columns-repeatdiv classitem item2 /divdiv classitem item1 /divdiv classitem item4 /divdiv classitem item3 /div
/div基本CSS样式如下
.display-grid {display: grid;
}.grid-template-columns-repeat {grid-template-columns: repeat(4, 1fr);
}
