css页面布局
时间:2020-05-30
本文章向大家介绍css页面布局,主要包括css页面布局使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
回顾复习css页面布局
三栏布局
左右固定中间自适应:
html部分同一如下
<div class='box1'></div>
<div class="box2"></div>
<div class="box3">
中间自适应
</div>
style方法一:
div {
height: 300px;
}
.box1 {
float: left;
width: 300px;
background: red;
}
.box2 {
float: right;
width: 300px;
background: blue;
}
.box3 {
background: yellow;
}
原理:利用第一和第二个盒子的左右浮动,使得与第三个盒子在一行
缺点:当宽度小于600px时,会繁发生换行;以及中间高度大于300px时,会有两边覆盖(其实中间的div宽度就是width:100%;可以利用overflow: hidden
解决)
style方法二:
div {
height: 300px;
}
.box1 {
width: 300px;
background: red;
position: absolute;
left: 0;
}
.box2 {
position: absolute;
right: 0;
width: 300px;
background: blue;
}
.box3 {
background: yellow;
height: 500px;
position: absolute;
left: 300px;
right: 300px;
}
原理:利用绝对定位,来实现left=300px; right=300px
优点:当中间自适应的高度大于两边时不会发生重叠;但是当视窗大小小于600px时,中间会发生重叠,不换行
style方法三:
<style>
.wrap {
display: flex;
}
.box {
height: 300px;
}
.box1 {
width: 300px;
background: red;
}
.box2 {
width: 300px;
background: blue;
}
.box3 {
background: yellow;
height: 500px;
flex: 1;
}
</style>
</head>
<body>
<div class="wrap">
<div class='box box1'></div>
<div class="box box3">
中间自适应
</div>
<div class="box box2"></div>
</div>
</body>
原理:外部flex布局;中间利用flex: 1;
即flex-basis: 0
宽度中间取其容器最大
优点:自适应强,宽度小于600时,会缩小两边宽度;
缺点:低版本浏览器对flex兼容性不好;
style方法四:
.wrap {
display: table;
width: 100%;
}
.box {
height: 300px;
display: table-cell;
}
.box1 {
width: 300px;
background: red;
}
.box2 {
width: 300px;
background: blue;
}
.box3 {
background: yellow;
height: 300px;
}
原理:利用table布局,来达到自使用,外部divwidth:100%
,不然无法填充
优点:自适应强
缺点:中间高度改变会影响两边
style方法五:
.wrap {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
.box3 {
background: blue;
}
原理:利用网格布局
优点:编写简单,自适应较强
两栏布局:
同理上面的·方法:
方法一 网格布局:
.wrap {
display: grid;
grid-template-rows: 100px;
grid-template-columns: 100px auto
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
.box3 {
background: blue;
/* height: 500px; */
}
方法二table布局
.wrap {
display: table;
width: 100%;
}
.box {
display: table-cell
}
.box1 {
width: 100px;
background: red;
}
.box2 {
background: blue;
}
方法三flex布局
.wrap {
display: flex;
}
.box1 {
width: 100px;
background: red;
}
.box2 {
background: blue;
flex: 1;
}
方法四绝对定位
.box1 {
width: 300px;
position: absolute;
left: 0;
background: red;
height: 100px;
}
.box2 {
background: blue;
position: absolute;
left: 300px;
right: 0;
}
方法五浮动布局:
.box1 {
width: 300px;
float: left;
background: red;
height: 100px;
}
.box2 {
background: blue;
/* overflow: hidden; */
}
原文地址:https://www.cnblogs.com/jlfw/p/12992136.html
- 干货 | 进化策略入门:最优化问题的另一种视角
- 【Golang语言社区】Golang语言面试题
- PHP面向对象核心(一)——序列化与魔术方法
- PHP面向对象核心(二)——继承、多态、接口
- PHP面向对象核心(三)——反射、异常处理
- 理解jquery的$.extend & $.fn.extend用法
- PHP数据结构(一)——顺序结构线性表
- PHP数据结构(二)——链式结构线性表
- 微信小程序防止重复点击,该如何处理?
- CSS常用实例,web前端开发者不知道这些就太low了
- PHP数据结构(三)——运用栈实现括号匹配
- python抓取头条文章
- PHP数据结构(四) ——队列
- CSS实现多列复杂界面布局
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例