02-CSS布局

#前言

#常见的布局属性

（1）display 确定元素的显示类型：

  • block：块级元素。

  • inline：行内元素。

  • inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

（2）positon 确定元素的位置：

  • static：默认属性值。

  • relative：相对定位。相对于元素本身进行偏移，不会改变它所占据的空间。

  • absolute：绝对定位。相对于父元素中最近的 relative/absolute 进行偏移，会脱离文档流。音标：[ˈæbsəluːt]。

  • fixed：固定定位。相对于可视区域固定，会脱离文档流。

relative、absolute、fixed这三个属性，可以结合 z-index 来设置层级。

#常见的布局方法

1、table 表格布局：早期使用的布局，如今用得很少。

2、float 浮动 + margin：为了兼容低版本的IE浏览器，很多网站（比如腾讯新闻、网易新闻、淘宝等）都会采用 float 布局。

3、inline-block 布局：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

4、flex 布局：为布局而生，非常灵活，是最为推荐的布局写法。

唯一的缺点是兼容性问题：

上图中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。

flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。

5、响应式布局。

#float 布局

是 CSS 中一种比较麻烦的属性，涉及到 BFC 和清除浮动（面试的重点）。

#float 属性的特点

  • 元素浮动

  • 脱离文档流，但不脱离文本流

代码举例：

下面这两个并列的div1和div2，默认是在标准流中的：

在此基础之上，如果给div1增加float: left属性后，效果如下：

上图中，可以看到，div1设置为浮动后，会脱离文档流，不会对div2的布局造成影响；但是div1不会脱离文本流，它会影响div2中文字的排列。

其实，这正是 float 属性的作用。float 本身是用来做图文混排、文字环绕的效果。

#float 所带来的影响

1、对自身的影响：

  • 形成“块”（BFC）

  • 位置尽量靠上

  • 位置尽量靠左/右

下面这两个并列的div1和div2，设置为浮动之后的效果：（都是尽量靠左显示的）

在上方代码的基础之上，增加 div2的宽度之后，会发现，div2掉下来了：

2、对兄弟元素的影响：

  • 不影响其他块级元素的位置

  • 影响其他块级元素的内部文本

3、对父级元素的影响：

  • 从父级的布局中“消失”

  • 造成父级元素的高度塌陷：父级元素撑开 div1 之后（父级元素里没有其他元素的情况下），如果设置 div1 为 float 之后，，会让父级元素的高度变为0。

#inline-block 布局

对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

思路：像文本一样去排列 block 元素，没有清除浮动等问题。

存在的问题：需要处理间隙。代码举例如下：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

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

	<title>Document</title>

</head>

<style>

	.container{

		width: 300px;

		height: 300px;

		background: pink;

	}

	.div1{

		width: 100px;

		height: 100px;

		background: green;

		display: inline-block;

	}

	.div2{

		width: 100px;

		height: 100px;

		background: yellowgreen;

		display: inline-block;

	}

	.div3{

		background: yellow;

	}

</style>

<body>

	<div class="container">

		<div class="div1">div1的inline-block 属性</div>

		<div class="div2">div2的inline-block 属性</div>

		<div class="div3">

			琴棋书画不会，洗衣做饭嫌累。

		</div>

	</div>

</body>

</html>
 

上面的代码，存在两个问题。

问题一：如果设置div2的宽度为 200px 之后，div2 掉下来。

问题二：div1和div2设置为 inline-block之后，这两个盒子之间存在了间隙。这是因为，此时的 div1和div2 已经被当成文本了。文本和文本之间，本身就会存在间隙。

为了去掉这个间隙，可以有几种解决办法：

办法1：设置父元素container的字体大小为0，即font-size: 0，然后设置子元素 div1、div2的字体font-size: 12px。

办法2：在写法上，去掉div1和div2之间的换行。改为：

<div class="div1">div1的inline-block 属性</div><div class="div2">div2的inline-block 属性</div>
 

#响应式布局

移动端用得较多，本文暂时先不讲。

css进阶 02-CSS布局的更多相关文章

  1. 【CSS进阶】CSS 颜色体系详解

    说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...

  2. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  3. css进阶之二：flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  4. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  5. CSS进阶之模拟Bootstrap网格布局

    目前暂时实现效果,容后面整理心得,先贴上源代码. 源码 <!DOCTYPE html> <html> <head> <title>demo bootst ...

  6. html和css进阶

    html和css进阶 相对地址与绝对地址 网页上引入或链接到外部文件,需要定义文件的地址,常见引入或链接外部文件包括以下几种: <!-- 引入外部图片 --> <img src=&q ...

  7. CSS进阶之路

    下面主要引用http://www.cnblogs.com/wangfupeng1988/tag/css知多少/ CSS进阶笔记: 一.学习CSS的三个突破点 1.浏览器如何加载和解析CSS——CSS的 ...

  8. css进阶 00-准备

    前言 css 进阶的主要内容如下. #1.css 非布局样式 html 元素的分类和特性 css 选择器 css 常见属性(非布局样式) #2.css 布局相关 css 布局属性和组合解析 常见布局方 ...

  9. CSS进阶内容—盒子和阴影详解

    CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...

  10. CSS进阶内容—浮动和定位详解

    CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...

随机推荐

  1. 苹果电脑中怎么快速卸载Flash Player和浏览器扩展应用插件

    Adobe Flash Player是一款轻量级浏览器插件,帮助你在网页浏览过程中享受更广泛的多媒体体验.是一种拓展,与Java一样,成为安全和隐私问题的重要来源.这些都需要手动删除的Flash是令人 ...

  2. js 时间日期与时间戳之间转换

    1 1.将时间(2017-08-10)转换时间戳 2 var startTime = '2017-08-10'; 3 var startdate = new Date(Date.parse(start ...

  3. LCCUP 2020 秋季编程大赛 补题

    果然是力扣杯,难度较于平时周赛提高了不少,个人感觉最后两题并不太容易QAQ LCP 18.早餐组合 #二分思想 题目链接 题意 你获得了每种主食的价格,及每种饮料的价格,你需要选择一份主食和一份饮料, ...

  4. 终于有人把鸿蒙OS讲明白了，大佬讲解！快收藏！

    来自 | GitHub科技 本文面向的是开发人员,主要想通过科普让大家了解一下鸿蒙开发.接下来,我想给大家科普一下这个这么火的鸿蒙系统. 到底什么是鸿蒙 OS 在官网上看到鸿蒙 OS 的简介是,分布式 ...

  5. 【mq读书笔记】如何保证三个消息文件的最终一致性。

    考虑转发任务未成功执行,此时消息服务器Broker宕机,导致commitlog,consumeQueue,IndexFile文件数据不一致. commitlog,consumeQueue遍历每一条消息 ...

  6. 分布式系统唯一ID

    一 什么是分布式系统唯一ID 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识. 如在金融.电商.支付.等产品的系统中,数据日渐增长,对数据分库分表后需要有一个唯一ID来标识一条数据或消息, ...

  7. oracle sql%notfound

    SQL%NOTFOUND 是一个布尔值.与最近的sql语句(update,insert,delete,select)发生交互,当最近的一条sql语句没有涉及任何行的时候,则返回true.否则返回fal ...

  8. Robot Framework接口自动化案例分享⑦——Jenkins持续集成

    一.RobotFramework插件安装 1.Jenkins首页->系统管理->插件管理->可选插件-> 2.搜索robot,点击直接安装 二.任务参数配置 1.新建任务 Je ...

  9. Django搭建示例项目实战与避坑细节

    Django 开发项目是很快的,有多快?看完本篇文章,你就知道了. 安装 Django 前提条件:已安装 Python. Django 使用 pip 命令直接就可以安装: pip install dj ...

  10. 老猿学5G随笔：5G网元功能体NF以及NF之间的两种接口--服务化接口和参考点

    一.5G功能体之间的接口类型 5G不同功能体之间提供了两种接口: 服务化接口:Service-basedinterface,这个是类似微服务化架构的服务注册和服务发现来实现的功能体对外暴露的接口,这种 ...