02-CSS布局

#前言

#常见的布局属性

(1)display 确定元素的显示类型:

  • block:块级元素。

  • inline:行内元素。

  • inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。

(2)positon 确定元素的位置:

  • static:默认属性值。

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

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

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

relativeabsolutefixed这三个属性,可以结合 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 属性的特点

  • 元素浮动

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

代码举例:

下面这两个并列的div1div2,默认是在标准流中的:

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

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

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

#float 所带来的影响

1、对自身的影响:

  • 形成“块”(BFC)

  • 位置尽量靠上

  • 位置尽量靠左/右

下面这两个并列的div1div2,设置为浮动之后的效果:(都是尽量靠左显示的)

在上方代码的基础之上,增加 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 掉下来。

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

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

办法1:设置父元素container的字体大小为0,即font-size: 0,然后设置子元素 div1div2的字体font-size: 12px

办法2:在写法上,去掉div1div2之间的换行。改为:

<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. OAuth 2.0授权框架详解

    目录 简介 OAuth的构成 refresh Token Authorization Code模式 隐式授权 Resource Owner 授权密码认证 Client 认证授权 github的OAut ...

  2. 【性能测试】【locust】场景性能测试步骤

    场景设计 实现登陆基本功能,输出相应结果,脚本通 多用户实现随机登陆 添加初始化方法on_start: 每个用户只运行一次 添加检查点: catch_responses = True 脚本设计 # 导 ...

  3. mac搭建mnmp环境

    brew安装nginx brew install nginx 安装php56 brew tap homebrew/dupes brew tap josegonzalez/homebrew-php br ...

  4. Python基础整理,懒得分类了,大家对付看看吧

    第一次搞这么多图

  5. 03生成微博授权URL接口

    1.创建apps/oauth模块进行oauth认证 '''2.1 在apps文件夹下新建应用: oauth''' cd syl/apps python ../manage.py startapp oa ...

  6. CoProcessFunction实战三部曲之二:状态处理

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. JZOJ2020年8月13日提高组反思

    JZOJ2020年8月13日提高组反思 T1 打了3h+,然后自己的小数据都没过 果断选择交对拍的暴力 下次还是注意时间吧 T2 一下三题都没时间打了 看了题目觉得特别烦人(有式子) 再看发现式子类似 ...

  8. MongoTemplate 移除 _class 字段

    @Configuration public class ApplicationReadyListener implements ApplicationListener<ContextRefres ...

  9. 【C++】“反转链表”相关的题目

    1.反转链表:定义一个函数,输入一个链表的头节点,反转该链表并输出反转后链表的头节点. (1)这道题是经典的题目了,用迭代的方式解决也是很容易的,代码量也不大.分享一个我个人做题的方式,我会先在题目开 ...

  10. python模块wifi使用小记

    安装命令 pip install wifi 连接命令 sudo wifi connect --add-hoc ssid,使用该命令会修改/etc/network/interfaces配置文件,导致启动 ...