一、css文档流布局概念

1.1,什么是标准文档流

1.2,标准文档流下有哪些微观现象

二、CSS---position属性

2.1,position:relative

2.2,position:fixed

2.3,position:absolute

2.3.1,父默认(static)子绝

2.3.2,父相(relative)子绝

2.3.3,父固(fixed)子绝

2.3.4,父绝(absolute)子绝

2.4,z-index特性

三、CSS之float属性

3.1,浮动的特性

3.2,浮动带来的问题:子div浮动不撑高父div

----------------------------------------------------------------------------------------------------

一、css文档流布局概念

1.1,什么是标准文档流

宏观的讲,web页面和ps等设计软件有本质区别

web网页的制作是“流”的概念,从左向右,从上往下

有三种情况将使得元素脱离文档流而存在,分别是 浮动,绝对定位, 固定定位。

1.2,标准文档流下有哪些微观现象

1、空白折叠现象:

  所有的连续换行和空格会当成一个空格

行内标签之间的空格会造成页面显示有空格,解决方法是把行内元素写在一行,或者给行内元素加浮动

2、高矮不齐,底边对齐:

  一行的高度不一样,底边对齐

3、自动换行:

  一行写不满  换行写

二、CSS---position属性

2.1,position:relative

特点:  1、不脱标   2、形影分离(影子和本身是是一对)   3、老家留坑

用途:用途不大

1、微调元素位置leftrighttopbottom

2、做绝对定位的参考(父相子绝)

2.2,position:fixed

特点: 1,脱标   2,压盖效果

这个参数是最好理解的。它相对于浏览器的窗口进行定位。

滚动页面,fixed的位置不变

2.3,position:absolute

“ 生成绝对定位的元素,相对于 static 定位以外的第一个父辈元素进行定位。”

特点1、脱标

特点2、做遮盖效果,提升层级

特点3、和浮动一样设置绝对定位之后可以设置宽高

特点4、绝对定位的top  left  bottom  right 是以父辈的边框为基准,如果父辈有padding,会无视。

       所以padding和绝对定位不能同时起作用

特点5:算是小技巧,父相子绝时,不能用margin:0 auto居中。 可以在子盒子中设置  (left: 50%  margin-left: -(width/2))来实现居中

2.3.1,父默认(static)子绝

相对于文档进行定位,(top为文档最上边,bottom为浏览器的最下边,缩放浏览器这个距离不变) ,特点是滚动页面时候目标元素会跟着滚动

2.3.2,父相(relative)子绝

当一个元素设置了position:absolute属性,而它的父元素的属性为position:relative时,它不再是相对于文档定位,而是相对于父元素定位。

这一点非常重要。最最重要的是,父元素设置为position:relative并不会脱离文档流,也就是说——利用给父元素设置position:relative属性,再将子元素设置为position:absolute就可以在文档流中实现需要的定位

2.3.3,父固(fixed)子绝

 目标元素相对于fixed的父元素定位时,目标元素和父元素都相对于窗口定位。

2.3.4,父绝(absolute)子绝

目标元素相对于absolute父元素定位时,目标元素和父元素都脱离文档流,父元素根据文档定位,目标元素根据父元素定位,也即根据文档定位,会随滚动条一起滚动

2.4,z-index特性

1、数值大的在上面 ,  数值小的在下面

2、只有定位了的元素,才能使用z-index,就是说不管是相对定位,绝对定位还是固定定位都能使用。而浮动元素不能使用

3、如果大家都没有z-index值,或者z-index值一样,谁写在后面,谁就在上面压着谁

4、定位了的元素永远压住没有定位的元素

5、从父现象:父亲怂了,儿子再牛逼也没用,以父亲的z-index为准

三、CSS之float属性

用inline-block也可以实现,为什么还要用浮动?

因为如果并排的元素太多的话,用inline-block会造成重复代码太多,不利于维护,而用浮动就简单了

3.1,浮动的特性

1、浮动的元素脱离标准文档流

例如某标签脱离文档流粗略意思相当于该标签未写一样,之前本属于该标签的位置没有了。该标签浮动在父标签内

2、所有标签一旦设置浮动,都可以设宽高,例如span标签等

3、浮动的元素贴靠效果

例如两行的span标签,显示出来会有一个空格(空白折叠),这时给两个标签加浮动,可以让空格消失,贴在一起

  当父标签宽度容纳不下浮动元素的总宽度时,最右边的元素会“往下掉”,紧贴着前面元素的边,如果太窄,会紧贴着父元素的边。

4、浮动的元素有“字围”效果

例如,div后面跟一个p标签   <div> <div> <p>1234<p>

如果把div向左浮动,按理说div会遮住p标签,遮住文字“1234”,实际效果是div遮住p,但是文字会围着div标签排布。这就是“字围”效果

  所以最好遵循一个原则:要浮动,就父标签下的所有子标签一起浮动。不然会造成有标签被“遮住”这样的情况

5、宽度收缩效果

如果一个div没有设置width,在浮动这个div的时候,宽度会自动收缩为内部元素的宽度

3.2,浮动带来的问题:子div浮动不撑高父div

有一个常用的需求:在一个父div里套几个子div,父div的高度不会随子div的高度自动伸缩,如果把父div高度设置为内部最大子div的高度,

如果内部某个div高度超过父div设置的高度,会造成溢出父div,怎么解决呢?(宽度遵循“收缩原理”和“贴靠原理”)

所以:子元素浮动就脱离标准流,父元素就不会被撑高。

解决方式一:给父盒子设置子元素最大高度。这种方式不灵活,如果某个子标签高度变大修改会很麻烦,不推荐使用

解决方式二:给浮动元素最后面加一个空的div,并且该元素不浮动,然后设置clear:both,相当于一堵墙,这样浮动元素高度就会填充到父div。

比第一种好,但是增加了div,造成结构冗余。也不是特别推荐

解决方式三:伪元素清除法,常用,原理基于clear:both。因为在类(有专用名词clearfix)后面加:after可以增加内容,可以加个“.”  content:".",但是这个点默认是行内元素,

      上面clearboth是加的div, 所以要display:block  又不能让这个点显示 所以visibility:hidden, 而visibility隐藏不隐藏高度,所以要height:0

所以在祖先元素加个类  .clearfix   在css中写上下面

.clearfix:after{  content:'.';  clear:both;  display:block: visibility:hidden;  height:0  }

解决方式四:在祖先元素css类中加个属性 overflow : hidden 即可,也比较常用。(overflow的属性值:hidden[子元素超出父元素的部分隐藏] scroll,auto[给父元素加滚动条]

       inherit[overflow从父元素继承])

CSS---文档流布局 | 脱标-postion-zindex | 脱标-浮动的更多相关文章

  1. 一天搞定CSS:BFC布局与普通文档流布局比较--15

    BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义 它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用 关键词解释: 块级元素:父级( ...

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  4. CSS文档统筹

    一.CSS文档统筹 1.整站里相同的CSS样式提取到一个样式表里,各个页面调用相同的样式文件即可: 2.网站较大的情况下一般会把网站的头部,尾部单独分离出来,包括样式文件: 1)根据页面类型分离文件 ...

  5. CSS文档流、块级元素、内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  6. CSS文档优化

    首先了解下CSS的渲染逻辑,它是从标记的最后一位开始搜索的,例如:.myclass li a,首选它会遍历所有的<a>,然后看哪些<a>之前有<li>,然后再看哪些 ...

  7. 完美CSS文档的8个最佳实践

      在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为C ...

  8. css文档之盒模型阅读笔记

    前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...

  9. 迷上我成真恋爱学心理学挽回她PDF文档资料完整版情感技巧脱单教程

    迷上我成真恋爱学心理学挽回她PDF文档资料完整版情感技巧脱单教程 成真迷上我偷听女人心挽回她课程 百度网盘迷上我教程pdf地址 百度网盘挽回她教程pdf+视频的地址 备用地址淘宝百度网盘发货地址 百度 ...

  10. CSS文档流

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

随机推荐

  1. dotnet core使用IO合并技巧轻松实现千万级消息推送

    之前讲述过多路复用实现单服百万级别RPS吞吐,但在文中有一点是没有说的就是消息IO合并,如果缺少了消息IO合并即使怎样多路复用也很难达到百万级别的请求响毕竟所有应用层面的网络IO读写都是非常损耗性能的 ...

  2. 带着萌新看springboot源码04

    继续开头说些废话,我也不知道什么鬼,每次写着写着经常会写到其他地方去了,太容易分神了. 这次说一下springboot对于springmvc的大概整个流程,以请求动态网页为例 . 1.梳理一下spri ...

  3. [Leetcode]237. Delete Node in a Linked List -David_Lin

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  4. [ SSH框架 ] Spring框架学习之一

    一.Spring概述 1.1 什么是Spring Spring是一个开源框架, Spring是于2003年兴起的一个轻量级的Java开发框架,由 Rod Johnson在其著作 Expert One- ...

  5. git第三节----git status与git diff

    @ git status主要检索本地仓库的文件更新状态 @ git diff 主要是查看文件更新的具体内容 首先我们需要了解下文件状态类型,分为以追踪文件和未追踪文件 已追踪文件:在仓库之前的版本快照 ...

  6. 第30章 部署 - Identity Server 4 中文文档(v1.0.0)

    您的身份服务器只是一个标准的ASP.NET Core应用程序,包括IdentityServer中间件.首先阅读有关发布和部署的官方Microsoft 文档(尤其是有关负载平衡器和代理的部分). 30. ...

  7. JSON 与 JS 对象的区别与对比

    定义: JSON是什么?JSON是JS的一种简单数据格式,JSON是JavaScript原生格式,它是一种严格的js对象的格式,JSON的属性名必须有双引号,如果值是字符串,也必须是双引号. 问题: ...

  8. C#_asp.net mvc 验证码功能的具体实现

    @using (Html.BeginForm("Login", "HomePage",FormMethod.Post)) { <h2>登录</ ...

  9. Java高并发--原子性可见性有序性

    Java高并发--原子性可见性有序性 主要是学习慕课网实战视频<Java并发编程入门与高并发面试>的笔记 原子性:指一个操作不可中断,一个线程一旦开始,直到执行完成都不会被其他线程干扰.换 ...

  10. PHP 中的Trait

    概述 在PHP中有一种代码复用的技术, 因为单继承的问题, 有些公共方法无法在父类中写出, 而 Trait可以应对这种情况, 它可以定义一些复用的方法, 然后在你需要使用的类中将其引入即可. 刚开始的 ...