CSS基础

2.几种布局方式
1)table布局
当年主流的布局方式,第一种是通过table tr td布局
示例:

<style type="text/css">
table{
width: 800px;
height: 300px;
border-collapse: collapse;
}
.left{
background-color: red; }
.right{
background-color: blue;
}
</style>
<body>
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
</body>

页面效果: 文字自动垂直居中,很方便 同样可以设置左右的width

第二种是类比表格的table class
示例:

<style type="text/css">
.table{
display: table;
width: 800px;
height: 300px;
/*border-collapse: collapse;*/ }
.tb_row{
display: table-row;
} .tb_cell{
display: table-cell;
vertical-align: middle;
} .left{
background-color: red;
}
.right{
background-color: blue;
}
table
</style>
<body>
<div class="table">
<div class="tb_row">
<div class="left tb_cell">左</div>
<div class="right tb_cell">右</div>
</div>
</div>
</body>

页面效果: 跟表格布局一样

2)flexbox布局

- 两列布局
**关键:父级元素设置display:flex**

示例:

<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 300px;
display: flex;
}
.left{
width: 300px;
height: 100%;
background: red;
}
.right{
flex: 1;
height: 100%;
background: blue;
} </style> <body>
<div class="parent">
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>

页面效果:

- 三列布局
**关键:父级元素设置display:flex**

示例:

<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 300px;
display: flex;
}
.left{
width: 300px;
height: 100%;
background: red;
}
.middle{
width: 200px;
height: 100%;
}
.right{
flex: 1;
height: 100%;
background: blue;
} </style>
<body>
<div class="parent">
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</div>
</body>

页面效果:

3)float布局 (float+margin)
兼容性好 但是要注意清楚浮动(clear: both display:block)

- 两列布局——左侧定宽,右侧自适应
**关键:**
*左侧设置float:left
右侧:margin-left: leftWidth*
示例:

<style>
*{
margin: 0;
padding: 0;
} .parent{
width:800px;
height:200px;
}
.left{
width:200px;
height:100%;
float:left;
background-color:red;
}
.right{
height:100%;
margin-left:200px;
background-color:blue;
}
</style>
<body>
<div class="parent">
<div class="left">左</div>
<div class="left">右</div>
</div>
</body>

页面效果:

- 三列布局
**关键:**
*左侧设置float:left
右侧设置float:right
中间:margin-left: leftWidth;margin-right:rightWidth*
示例:

<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 200px;
}
.left{
width: 200px;
height: 100%;
background-color: red;
float: left;
} .right{
float: right;
width: 200px;
background-color: blue;
height: 100%;
} .middle{
margin-left: 200px;
margin-right: 200px;
}
</style> <body>
<div class="parent">
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中</div> </div>
</body>

页面效果:

**注意:float特点:尽量靠上,尽量靠左(右),所以右侧浮动div要先写,中间div后写**

4)inline-block布局——不存在清除浮动问题 适用与定宽的布局

<style type="text/css">

.parent{
font-size: 0;
width: 800px;
height: 200px;
}
.left{
font-size: 14px;
width: 300px;
height: 200px;
display: inline-block;
background-color: red;
}
.right{
font-size: 14px;
width: 500px;
height: 200px;
display: inline-block;
background-color: blue;
}
</style>
<div class="parent">
<div class="left">左</div>
<div class="right">右</div>
</div>

页面效果:

注意: 想要父级元素的宽度等于两个子元素宽度之和,需要设置父级元素的 font-size:0 否则两个子元素不会再一行展示
同时,需要设置两个子元素的font-size: 14px; 否则子元素内的文字不会展示!
**想象成文字,注意间隙的处理!!!** 间隙存在于两个div间的空白:

5)响应式布局
让前台页面可以再不同的设备,不同大小的屏幕上正常展示,一般都是指处理屏幕大小问题
首先设置viewport
利用rem 1rem=html.font-size

<meta name="viewport" content="width=device-width,initial-scale=1.0">

利用media query

@media (max-width: 640px){
.left{
display: none;
}
}

三.Q&A
1) position: absolute 和fixed 的区别:
前者是相对于最近的relative/absolute 元素
后者是相对于屏幕 (viewport)
2) display:inline-block 间隙的原因
原因: 空白字符间距
解决:清除空白字符或者消灭间距

—中间不留空白

<div>
</div></div>
</div>

—将空白字符注释

<div>
</div><!--
--><div></div>

—消灭间距

font-size: 0

3)如何清除浮动以及原因

浮动的元素不占用父元素的空间,有可能会超出父元素进而对其他元素产生影响,所以要清除父元素浮动
方法:

让盒子负责自己的布局:
overflow: hidden(auto)

在元素后面加上:
::after{clear: both}

4)如何适配移动端页面

- viewport
- rem/viewport/media query
- 设计上: 隐藏 折行 自适应

CSS常用布局方式-两列布局、三列布局的更多相关文章

  1. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

  2. CSS两列及三列自适应布局方法整理

    布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...

  3. css 左右固定宽度,中间自适应的三列布局

    float——浮动布局: 使用浮动,先渲染左右两个元素,分别让他们左右浮动,然后再渲染中间元素,设置它的margin左右边距分别为左右两个元素的宽度. <!DOCTYPE html> &l ...

  4. ccs之经典布局(二)(两栏,三栏布局)

    接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...

  5. CSS布局:Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  6. 转:CSS布局:Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  7. Web标准:三、二列和三列布局

    知识点: 1.二列自适应宽度 2.二列固定宽度 3.二列固定宽度居中 4.xhtml的块级元素(div)和内联元素(span) 5.float属性 6.三列自适应宽度 7.三列固定宽度 8.三列固定宽 ...

  8. css常用居中方式

    一.水平居中 1.内联元素 父级元素加 text-align: center 即可 html <div class="container"> <a>内联元素 ...

  9. CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

随机推荐

  1. 被 GANs 虐千百遍后,我总结出来的 10 条训练经验

    一年前,我决定开始探索生成式对抗网络(GANs).自从我对深度学习产生兴趣以来,我就一直对它们很着迷,主要是因为深度学习能做到很多不可置信的事情.当我想到人工智能的时候,GAN是我脑海中最先出现的一个 ...

  2. react 地图发布 cesium 篇

    上篇文章介绍了如何搭建 react cesium 开发环境.在开发环境下,项目一切运行正常.最近把项目打包发布出来,却遇见了 cesium 不能正确初始化.打开浏览器的调试面板,出现好多 404,资源 ...

  3. gradle使用基础

    说明 介绍gradle使用基础,gradle基础脚本结构和常规使用方法,以及一个简单的gradle示例.主要是为了简单的介绍gradle使用. gradle环境配置 gradle可以通过两种方式运行g ...

  4. HTTP相关知识总结

    HTTP协议特点 支持客户端/服务器模式 简单快速 灵活.允许传输任意类型的数据对象 限制每次连接只处理一个请求(http最初设计思想,现在为了提升传输效率,一次请求完成后不会立即断开连接) 无连接: ...

  5. c# 第20节 一维数据的冒泡排序

    本节内容: 1:冒泡排序说明: 2:冒泡排序实现: 3:冒泡排序的时间复杂度 1:冒泡排序说明: 冒泡排序也是最简单最基本的排序方法之一.冒泡排序的思想很简单,就是以此比较相邻的元素大小,将小的前移, ...

  6. 剑指Offer-17.树的子结构(C++/Java)

    题目: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 分析: 注意这道题是判断B是不是A的子结构,而不是子树,这一点要注意下,且空树不是任意一个树的子结构 ...

  7. 求GCD(最大公约数)的两种方式

    求GCD(最大公约数)的两种方式 这篇随笔讲解C++语言程序设计与应用中求GCD(最大公约数,下文使用GCD代替)的两种常用方式:更相减损法和辗转相除法,前提要求是具有小学数学的基本素养,知道GCD是 ...

  8. 关于一个.2lf和.2f的战争!(貌似书上错了,静待打脸。)

    在山东理工oj上做题,谈到了输入数据... double i: scanf(“%lf”,&i): 谨记呀,lf时,可以输入任何类型的数据,而.2f,只能输入符合其规格的数据. 再谈输出,dou ...

  9. Physically Based Shader Development for Unity 2017 Develop Custom Lighting Systems (Claudia Doppioslash 著)

    http://www.doppioslash.com/ https://github.com/Apress/physically-based-shader-dev-for-unity-2017 Par ...

  10. Paper | Toward Convolutional Blind Denoising of Real Photographs

    目录 故事背景 建模现实噪声 CBDNet 非对称损失 数据库 实验 发表在2019 CVPR. 摘要 While deep convolutional neural networks (CNNs) ...