css进阶 02-CSS布局
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布局的更多相关文章
- 【CSS进阶】CSS 颜色体系详解
说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- css进阶之二：flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- CSS进阶内容——布局技巧和细节修饰
CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...
- CSS进阶之模拟Bootstrap网格布局
目前暂时实现效果,容后面整理心得,先贴上源代码. 源码 <!DOCTYPE html> <html> <head> <title>demo bootst ...
- html和css进阶
html和css进阶 相对地址与绝对地址 网页上引入或链接到外部文件,需要定义文件的地址,常见引入或链接外部文件包括以下几种: <!-- 引入外部图片 --> <img src=&q ...
- CSS进阶之路
下面主要引用http://www.cnblogs.com/wangfupeng1988/tag/css知多少/ CSS进阶笔记: 一.学习CSS的三个突破点 1.浏览器如何加载和解析CSS——CSS的 ...
- css进阶 00-准备
前言 css 进阶的主要内容如下. #1.css 非布局样式 html 元素的分类和特性 css 选择器 css 常见属性(非布局样式) #2.css 布局相关 css 布局属性和组合解析 常见布局方 ...
- CSS进阶内容—盒子和阴影详解
CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
随机推荐
- 如何使用Camtasia给视频或者图片调色
喜欢摄影过着做视频的朋友一定知道,一张好看的照片或者一段精美视频的构成因素很多,取景本身肯定是个很重要的条件,相机的素质是非常重要的硬件条件,接下来的就是后期的编辑和处理了,而在后期处理过程中调色就显 ...
- 如何用Vegas完成视频编辑中的自动跟踪换图
Vegas作为一款专业的视频剪辑软件,剪辑速度快捷,拥有各种实用工具和特效,同样也可以为用户实现视频换图的需求.今天小编就为大家讲解,如何利用Vegas自动跟踪进行换图,让视频能够更加便捷的呈现. 本 ...
- PowerPoint无法正常加载MathType的解决方法
MathType是一款十分便捷的数学公式编辑器,可以和很多办公软件和网站兼容使用,我们日常用的比较多的也就是Office和WPS,更具体的说是Word\Excel\PPT等等一系列办公常用软件. 不过 ...
- 【基于PUPPETEER前端自动化框架】【一】TypeScript+Puppeteer+Jest 整合
前提:掌握Jest + Puppeteer 1.Jest环境配置 2.Jest-MATCHERS匹配器 3.Jest-全局变量设置 4.Puppeteer安装 5.Puppeteer元素获取 6.Pu ...
- 一看就懂的：MySQL数据页以及页分裂机制
文章公号 首发!连载中~ 欢迎各位大佬关注, 回复:"抽奖" 还可参加抽活动 文末有二维码 一.知识回顾 回顾一下之前和大家分享的知识点 看了前面的文章,想必你肯定了解了什么是Bu ...
- centos7 ping: baidu.com: Name or service not known
虚拟机 centos7配置ip后 ping 网关可以ping 通,但是ping不通外网 baidu.com 报错为: ping: baidu.com: Name or service not know ...
- linux（cemtos7.x）安装docker
卸载旧版本 yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest ...
- 上位机学习技巧——c#（原创）
(一直更新.......) 一.扫描可用串口 二.捕获鼠标移到控件(上升沿)/离开控件(下降沿) 在窗体生成代码中,找到对应按钮(这里使用butten1)区域,在区域内添加两个事件,分别是: 鼠标移到 ...
- iOS如何实现语音播报及后台播放
最近项目刚刚交付,偶然间用到了语音播报和语音搜索的功能.语音搜索我用的是讯飞的demo,感觉效果还不错,感兴趣的话可以去官网上面下载demo,里面讲的特别的详细,不过稍显麻烦一些.语音播报讯飞也有de ...
- 多态，向上转型，向下转型，final关键字
多态 概述 多态封装性,继承性之后,面向对象的第三大特性. 定义 多态:是指同一种行为,具有多个不同的表现形式. 生活中,比如跑的动作,猫,狗,大象跑起来的动作都是不一样的,再比如飞的动作 ...