文档流 | 易学教程

CSS基础知识（定位、浮动）

阅读更多关于 CSS基础知识（定位、浮动）

12 、浮动特点：将当前元素脱离文档流 float: left 即左浮动 float: right 即右浮动注：*父与子元素，设置子元素浮动不能超出父元素的范围 *多个元素均设置为浮动时，将自动排列(水平方向) *兄弟元素，后一个元素设置为浮动，前一个元素不浮动，后一个元素的位置不能超过前一个元素的位置 *文字内容不会被浮动元素所覆盖，而是环绕在浮动元素的周围。 i 清除浮动 clear none - 不清除 left - 清除左浮动 right - 清除右浮动 both - 清除两侧的浮动 i 高度塌陷设置：父级元素- 未设置高度；子级元素- 设置高度，且浮动结果: 父级的显示高度为 0 默认情况下，未设置宽高；默认宽度是当前页面整个宽度；高度是0或子元素高度的总和 u 解决方案 (1)为父元素设置高度(所有子元素高度的总和) 问题：人为为父级元素设置 height 属性；父级元素的 height 属性值，计算得来的 (2)将父和子元素同时设置为浮动父元素未设置宽度和高度结果: 父级的宽度和高度分别所有子元素的宽度和高度的总和 (3)clear属性来清除浮动 l BFC块极格式化环境全称：Block Formatting Context，是元素的隐含属性。默认情况下BFC是关闭的，当元素开启BFC以后，将会具有如下特性：

CSS 定位与浮动

阅读更多关于 CSS 定位与浮动

CSS 定位　　 Static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。　　相对定位(relative)：与最近的一个元素进行定位。相对于原始的位置进行移动注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。　　绝对定位（absolute）：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。（是以html的边框为参照的）注意：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。在下面这个例子中，与上面一个元素出现了层叠：设置top:20px;导致了间距不够，就进行覆盖。　 1 <html> 2 <head> 3 <style type="text/css"> 4 h2.pos_abs 5 { 6 position:absolute; 7 left:100px; 8 top:20px 9 } 10 </style> 11 </head> 12 13 <body> 14 <h2 class=

浮动与定位

阅读更多关于浮动与定位

　　浮动与定位在网页设计中应用得很广泛，是两种主要布局方式的实现方法。　　我们知道，网页上一般来说，块标签是自上而下的一块块堆叠，行内标签则在一行内从左到右依次并排，如果所有网页的都这样机械的排列着，也太单调了，所以有没有一个东西让标签内容脱离这种文档流呢，首先就可以考虑float。　　float，使某元素浮动起来，可以把元素移到，比如浏览器边沿的左边或右边，看上去它们就像粘在边沿上一样，它下边的文本则会充斥在它的一边或者下面，如下例 <!DOCTYPE html> <html> <head> <title>float test</title> <style type="text/css"> /*reset*/ body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img{margin:0;padding:0;} .wrap{ width:300px; margin:0 auto; border:2px solid #30c13a; } .wrap .fl{ width:100px; float:left; background-color:#8cceff; } </style> </head> <body> <div class="wrap"> <p class="fl"> The Macintosh Classic is a personal <

web——CSS中position属性( absolute 、 relative 、static 、 fixed )详解

阅读更多关于 web——CSS中position属性( absolute 、 relative 、static 、 fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。怎么样，是不是还是很迷糊~~ 没关系，下面就从几个基础概念一一给大家详述：什么是文档流？将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。静态定位(static) ： static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z

css定位-position的用法详解

阅读更多关于 css定位-position的用法详解

定义和用法 position 属性规定元素的定位类型。定位类型 static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 inherit：规定应该从父元素继承 position 属性的值。什么是文档流？将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。 <div style="position:relative; width:300px; height:300px; background-color:silver; border:5px solid red;"> <div style="width:100px; height:100px; background

绝对定位和相对定位

阅读更多关于绝对定位和相对定位

定位布局：视觉格式化模型：css的一种机制，规定了页面找那个多个盒子的布局。视口：指浏览器的可视区域定位体系：常规流（normal flow）浮动（float）绝对定位（absolute positioned）绝对定位 absolute：元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位即html元素。父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块相对定位 relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变

☆前端☆---css样式

阅读更多关于 ☆前端☆---css样式

css属性相关宽和高 width 属性可以为元素设置宽度 height 属性可以为元素设置高度块级标签才能设置宽度，内联标签的宽度由内容来决定字体属性文字字体 font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。简单的实例 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小 p { font-size: 14px; } 字重(粗细) font-weight 用来设置字体的字重文本颜色颜色属性被用来设置文字的颜色有三种方式颜色是通过CSS最经常的指定：十六进制值 - 如: ＃ FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有 rgba (255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。文字属性文字对齐 text-align 属性规定元素中的文本的水平对齐方式文字装饰 text-decoration 属性用来给文字添加特殊效果。首行缩进将段落的第一行缩进 32像素 p { text-indent: 32px; } 背景属性 /*背景颜色*/

position 的学习

阅读更多关于 position 的学习

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！ realative 　　realative，相对定位，相对于正常（原来本身）位置定位，文档流中的位置依然存在，视觉中偏移了文档流。 absolute 　　absolute，绝对定位，相对于 static 之外的第一个父元素定位，父元素可以是 absolute，也可以是 relative。脱离了文档流，父元素获取不到他的高度。 fixed 　　fixed，固定定位，相对于浏览器窗口定位。来源： https://www.cnblogs.com/sspeng/p/6482174.html

day45-前端CSS

阅读更多关于 day45-前端CSS

1 . 0 CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.0 CSS语法 2.1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 . 2 CSS注释 /*这是注释*/ 注释是代码之母。 3.0 CSS的几种引入方式 3 . 1 行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 3. 2 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3. 3 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4 . 0 CSS选择器

Web开发（三）CSS

阅读更多关于 Web开发（三）CSS

概述基本概念层叠样式表（ Cascading Style Sheets ） , 负责网页三要素的表现 , 为网页创建样式表，通过样式表对网页进行装饰层叠：将网页想象成多层的结构，高层次的覆盖低层次， CSS 为各个层次设置样式样式表：各种样式的集合，如字体，颜色，背景，定位等样式语法样式表有一个一个样式构成，一个样式包括选择器和声明块选择器{ 样式名：样式值；样式名：样式值；样式名：样式值； } 选择器　　通过选择器可以选中指定的元素，并将声明块中的样式应用到选择器对应的元素声明块　　紧跟在选择器后面，用一对 { } 括起来　　在一个声明块中可以写多个声明，声明之间用分号 ; 隔开　　样式名和样式值用冒号：连接　　实际上就是一组一组的名值对结构注释　　/* 注释内容 */ 　　css 的注释只能写在 style 标签或 css文件中　　在 style 标签（style标签是head的子标签）中只能存放css代码内联元素、块元素使用原则一般使用块元素包含内联元素，而不使用内联元素去包含块元素 a标签可以包含任何元素（除了本身） p标签不可以包含任何块元素引入方式内联样式表将样式直接编写到元素的style属性中，不用填写选择器，直接编写声明即可内联样式只对当前元素的内容起作用内联样式属于结构与表现耦合，不方便后期维护，不推荐使用

订阅文档流