文档流 | 易学教程

css笔记

阅读更多关于 css笔记

有些css属性虽然经常再用，但是基本概念久而久之却忘了。。。这篇博客就是一个笔记，时常回来看看，争取做到概念与运用都很熟练。 1、固定定位(fixed | absolute) 这两种定位方式都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位。不同的是 fixed 是根据浏览器窗口的左上角为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。而 absolute 参照的位置是离当前元素最近的定位方式为 fixed、absolute、relative 的祖先元素的左上角。 2、浮动：(float:left | right) CSS中的定位机制有：普通流，浮动，绝对定位(暂时不讨论) (1)普通流：很多人和文章称之为文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做普通流(normal flow)。现实中大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。 (2)浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（"高度塌陷

盒模型、文档流

阅读更多关于盒模型、文档流

盒模型一、盒子中的区域一个盒子中主要的属性就5个：width、height、padding、border、margin。 width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。 height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距” 二、认识padding 背景色会填充到padding中去，padding区域有背景颜色，background-color将填充所有boder以内的区域。 Padding有两种写法，一种小属性写法，另一种是综合性写法，综合写法时要用空格隔开。顺序是上右下左在写padding时，要用小属性层叠大属性例如：padding: 20px; padding-left: 30px; 三、border border就是边框。边框有三要素：粗细、线型、颜色。颜色如果不写，默认是黑色。粗细和线型不写显示不出来边框。（颜色、线型缺一不可） Border属性能够被拆开，有两大拆开方式： 1）按3要素拆开 border-width :10px; → 边框宽度 border-style :solid; → 线型 border-color :red; → 颜色。等价于：border:10px solid red; 2）按方向拆：

CSS

阅读更多关于 CSS

================转载 https://www.cnblogs.com/yuanchenqi/articles/5977825.html ============== 一、什么是CSS CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现和数据内容分离；二、css的四种引入方式 1、行内式　　行内式是在标记的style属性中设定CSS样式。这种方式没有体现出css的优势； <p style="background-color: rebeccapurple">hello yuan</p> 2、嵌入式　　嵌入式是将CSS样式集中卸载网页的<head></head>标签对的<style></style>标签中； <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3、链接式　　将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4、导入式　　将一个独立的.css文件引入到HTML文件中，导入式使用CSS规则引入外部CSS文件，

web-css-文本

阅读更多关于 web-css-文本

一、文本的水平对齐方式使用text-align来设置文本的对齐方式；text-align的取值:left(向左对齐)/center(水平居中对齐)/right(向右对齐)/justify(两端对齐); text-align只对应用此样式的元素的非块级子元素有效，对块级子元素无效；对比使用margin进行设置居中对齐，不同点是margin的作用效果对象是当前块级元素，而并非子元素； ps:line-height(行高),如果行高的设置值大于font-size(字体大小)的设置值，则一行中的文字将在该行的设置的行高区域中垂直居中显示，这个是作用到应用了该样式的元素的区域里的每一行；二、定位 1.普通流定位，这也是浏览器默认的文档流定位； 2.浮动定位； 3.相对定位:relative(相对于该元素原始位置产生的偏移距离，不会脱离文档流)； 4.绝对定位:absolute(会脱离文档流，相对于离自己最近的以定位的祖先级元素发生位置偏移,ps:只要一个元素的样式被relative/absolute/fixed这三者的任何一个所修饰，那么该元素就成了已定位元素)； 5.固定位:fixed(会脱离文档流)； (1)普通流定位：每个元素都有自己的占地空间，每个元素都是从其父元素的左上角位置开始显示的； (2)浮动定位float:left/right/none; left:元素脱离文档流

web前端入门到实战：CSS定位

阅读更多关于 web前端入门到实战：CSS定位

一、什么是定位改变元素在页面中的位置二、定位的分类 1、普通流定位 2、浮动定位 3、相对定位 4、绝对定位 5、固定定位三、普通流定位页面中元素的默认定位方式，默认文档流，从上往下，从左往右 1、每个元素都在页面有自己的空间 2、每个元素都是从父元素的左上角开始显示 3、块级元素都是按照从上到下的方式逐行排列，每个元素独占一行 4、行内元素是多个元素在一行显示，从左往右逐个排列四、浮动定位 1、当元素设置浮动后，该元素脱离默认文档流，后面的元素会上前补位。当前元素会在当前行，向左或者向右排列 float：left、right、none 特点：（1）、元素一旦浮动，就脱离文档流了，不占据页面空间，后面会上前补位（2）、浮动元素会停靠在父元素的左边/右边，或者其他已经浮动元素边缘（3）、浮动就是解决多个块级元素在一行显示的问题 2、浮动引发的特殊情况 a、（1）当父元素显示不下所有已浮动元素的时候，显示不下的几个将换行显示，换行显示的规则：优先上浮，之后向左/右对齐（2）浮动元素占位，浮动元素会根据浮动方向，占据方向上的位置，不让其他后面浮动元素占用 b、元素一旦浮动，如果没有定义宽度，宽度会以内容为准 c、元素一旦浮动起来，就变成了块级元素，可以设置宽高，可以设置上下外边距 d、文本，行内元素，行内块元素是不会被浮动元素压在下方。而是巧妙的避开了所有浮动元素

（五）前端基础之盒子模型中的问题

阅读更多关于（五）前端基础之盒子模型中的问题

一.垂直外边距的重叠（兄弟元素）在网页中垂直方向的相邻外边距会发生外边距的重叠（兄弟元素）取最大值而不是两个之和，父盒子的高度是217=100+100+15+2 解决垂直外边距重叠： 1）中间添加一个元素如a让其不相邻外边距就会使两个外边距之和 240=100+100+15+5+18（a的宽度）+2 二，垂直外边距（父子元素）如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素父子盒子都会向下移15px 解决方法 1）给父元素设置border:1px solid red 2) 给父元素设置padding-top:1px （父盒子的高度会增大）浏览器为在页面中没有样式时，也可以有一个比较好的显示效果，为很多元素设置了一些默认的margin和padding这些样式在默认情况下，我们是不需要的所以需要清除默认样式三，内联元素和块级元素 1）内联元素不能设置width 和height可设置水平方向的内边距，padding-left：10px；padding-right:10px行内元素中的内容会水平居中显示， 2）行内元素可设置垂直方向内边距，但不会影响页面布局（会把下面的内容遮住） 3）支持水平方向margin(left,right)两个内联元素一个Left一个right外边距不会重叠，不支持垂直方向外边距四,元素隐藏和显示 display:none

转发- css（display，float，position）

阅读更多关于转发- css（display，float，position）

此文章仅为转发，非原创，原文 http://www.cnblogs.com/zhuanggege/p/5778309.html 请支持原创 display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否浮动显示 float : none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边浮动的目的：就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性任何申明为 float 的元素自动被设置为一个“块级元素” 在标准浏览器中浮动元素脱离了文档流，所以浮动元素后的元素会占据浮动元素本来应该所处的位置如果水平方向上没有足够的空间容纳浮动元素，则转向下一行文字内容会围绕在浮动元素周围浮动元素只能浮动至左侧或者右侧 clear 清除浮动 clear : none | left | right | both none：默认值。允许两边都可以有浮动对象 left：不允许左边有浮动对象 right：不允许右边有浮动对象 both：不允许有浮动对象

CSS中的三种基本的定位机制

阅读更多关于 CSS中的三种基本的定位机制

CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。一、普通流　　除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。二、定位　　１、相对定位　　被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。 <html> <head> <style type="text/css"> .box1{ background-color: red; width:100px; height:100px; } .box2{ background-color: yellow; width:100px; height:100px; position: relative; left: 20px; } .box3{ background-color: blue; width:100px; height:100px; position: relative; right: 20px; } </style> </head> <body> <div class="box1">box1</div> <div class=

7、文档流相关

阅读更多关于 7、文档流相关

一、什么是文档流文档流是文档中可显示对象在排列时所占用的位置。换句话讲就是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序) 二、文档流代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ width: 100px; background: pink; height: 100px; border: 1px solid #000000; } </style> </head> <body> <div>01</div> <div>02</div> <div>03</div> </body> </html> 代码段运行结果上图就是标准的文档流，按照顺序自行排列。该在什么位置就在什么位置。三、脱离文档流的方法：目前脱离文档流有两种方法：1、float；2、定位也就是postion。四、float float 属性定义元素在哪个方向浮动。以前这个属性总应用于图像，使文本围绕在图像周围，在 CSS 中任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素

css布局

阅读更多关于 css布局

　　在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css。因此我们称这种布局方式为 div + css 布局。例： <div id="header">页面头部</div> <div id="content"> <div id="left"></div> <div id="right"></div> </div> <div id="footer">页脚</div> 　　了解布局，首先要知道文档流。文档流其实就是指浏览器生成页面的顺序。它是浏览器解析网页的一个重要概念，对于一个XHTML网页，body 元素下的任意元素，根据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它们在网页中的位置。文档流是浏览器的默认显示规则。　　下面来讲解一下布局的基础　　　　1.display(元素显示模式)，用于设置元素的显示方式。其语法如下：　　　　　　display : block | none | inline | inline-block 　　其中，block：块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其它的元素只能另起一行显示。inline：行间对象与block刚好相反，它允许其它元素在同一行显示。none ：隐藏对象。　　例

订阅文档流