文档流 | 易学教程

HTML float 和 absolute

阅读更多关于 HTML float 和 absolute

block元素和inline元素在文档流中的排列方式: block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。 inline元素的margin和padding属性: 水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。文档流 : 指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。脱离文档流 : 将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。只有绝对定位absolute和浮动float才会脱离文档流。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

CSS之实现图片叠加的层叠层问题

阅读更多关于 CSS之实现图片叠加的层叠层问题

在工作中，也就是在微信小程序开发的时候经常用到图片叠加及层叠层的问题，但都比较好解决，就是没有好好研究其概念原理上的东西。因为自己技术及理解有限，也在网上找了很多参考资料，学习到了很多东西，简单分享一下。（一）实现效果说明一下：是通过微信开发者工具展示的小程序效果；（二）实现分析 1、效果图展示的是两张图片叠加（一个是上传的图片一个是右上角的删除按钮图标）。实现的方式也是很简单：父级容器设置样式： position : relative ; top : ... left : ... 。。。（设置其他属性样式）子级容器设置样式（放两张图片的）：第一张图片是设置样式是占满整个父级的所以不用设置position；第二张图片就要设置 position:absolute; （脱离常规文档流，当不会脱离父级下的文档流） position : absoulte ; top : ... left : ... 。。。（其他样式）如果还需要设置层叠层显示问题，比如上面的子级容器下的第二张图片想越过父级容器设置并显示出来（因为文档流的问题）可以设置: z-index:1; 没设置前，删除符号会被遮挡：设置后，不会被遮挡了：（三）推荐参考资料 CSS 中重要的层叠概念 CSS中重要的BFC 关于z-index 那些你不知道的事来源： CSDN 作者：猿来独往链接： https:/

JAVA WEB2(CSS)

阅读更多关于 JAVA WEB2(CSS)

什么是CSS ？答： CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 CSS如何创建？答：如何插入样式表当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子： hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(“images/back40.gif”);} 不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE

CSS定位元素--定位

阅读更多关于 CSS定位元素--定位

CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。 position 属性有 4 个值： static、relative、absolute、fixed，默认值为 static。静态定位 static，默认展示的文档流就是相对定位 relative，相对的是它原来在文档流中的位置（或者默认位置）。接下来，可以使用 top、 right、bottom 和 left 属性来改变它的位置了。但多数情况下，只用 top 和 left 就可以实现我们想要的效果。绝对定位 absolute，绝对定位跟静态定位和相对定位比，绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来。可以看到元素之前占据的空间被“回收了”。这说明，绝对定位的元素完全脱离了常规文档流，它现在是相对于顶级元素 body 在定位。而这自然而然就引出了一个关于定位的重要概念：定位上下文。固定定位 fixed，从完全移出文档流的角度说，固定定位与绝对定位类似。 --但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。 --就是说固定定位是展示在窗口的固定位置，不随下拉而上移或下动。固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。 --定位上下文 --绝对定位元素默认的定位上下文是

css之定位

阅读更多关于 css之定位

　　css定位属性允许你对元素进行定位，也就是说它允许你定义元素框对于其正常位置应该出现的位置。css有以下三种定位机制：普通流，浮动，绝对定位。下面来分别进行说明：一、普通流　　普通流又称文档流，或者是标准流。指的是文档中可显示的元素在排列时候的开始位置以及它们所占的区域。又因页面中元素的种类不同，所以会按各自的特点去显示。一般是按从上到下，从左到右的顺序输出内容。二、浮动（float）　　1、使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是相邻的浮动元素就会停止。　　2、基本语法:选择器{float:left/right/none} 　　3、特征: 　　　　　a、块元素可以在一行内显示　　　　　b、按照一个指定的方向移动，遇到父级元素的边界或者是相邻的浮动元素就停止　　　　　c、行内支持宽高　　　　　d、脱离文档流　　　　　　　　浮动后面跟的元素（这个元素没有浮动）的位置是从前面浮动元素的的位置开始的。　　　　　　　　如是认为标准流标签元素是在网页平面沿x,y轴布局，那浮动就是增加一维，在z轴上实现布局。标准流标签元素坐标为（x,y,0）浮动元素坐标可看成是（x,y,z）。当x,y相同，浮动元素会覆盖标准流元素。　　　　　　　　注：浮动不是完全脱离文档流，所以非浮动元素里的内容会留出前面浮动元素的位置（盒模型的位置）　　　　　e

前端css

阅读更多关于前端css

目录前端css 1 css介绍 2 css语法 2.1css实例 2.2css注释 3 css的几种引入方式 3.1行内样式(内联样式表) 3.2内部样式 3.3外部样式 4 css选择器 4.1基本选择器 4.1.1元素选择器 4.1.2 ID选择器 4.1.3类选择器 4.1.4通用选择器 4.2组合选择器 4.2.1后代选择器 4.2.2儿子选择器 4.2.3 毗邻选择器 4.2.4弟弟选择器 4.3 属性选择器 4.4分组和嵌套 4.4.1分组 4.4.2嵌套 4.5伪类选择器 4.6伪元素选择器 4.7选择器的优先级 5 css属性相关 5.1宽和高 5.2字体属性文字字体字体大小字体的粗细（字重）文本颜色 5.3文字属性文字对齐文字装饰首行缩进文字之间的距离 5.4 背景属性 5.5边框 5.6border-radius 5.7display属性 5.8 CSS盒子模型 5.9 margin外边距 5.10padding内填充 5.11 float 三种取值 5.12clear 清除浮动 5.13 overflow溢出属性 5.14 定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定）是否脱离文档流 5.15 z-index 5.16 opacity 综合前端css 1 css介绍

前端之CSS基础

阅读更多关于前端之CSS基础

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

前端之CSS

阅读更多关于前端之CSS

前端基础之CSS 1 | 0 css介绍 css(Cascading Stylr Sheet，层叠样式表) 定义如何显示HTML元素当浏览器督导一个样式表，他就会按照这个样式表来对文档进行格式化(渲染) 2 | 0 css语法 2 | 1 css实例每个CSS样式由组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 .2 CSS注释 /*这是注释*/ 注释是代码之母 3 CSS的几种引入方式 3.1 行内样式行内式在标注的style属性中设定CSS样式。不推荐大规模使用。 <p style="color:red"> Hello World!</p> 3.2 内部样式嵌入式是将CSS样式集中写在网页的 > 标签对的 >标签对中。如下 <head> <meta charset = "UTF-8"> <title> Title </title> <style> p{backgroud-color:red;} </style> </head> 3.3 外部样式外部样式就是将CSS写在一个但单独的文件中，然后在页面进行引入即可。推荐使用此方式 <link href="mystyle.css" rel="stylesheet" type="text/css/"/> 4 CSS选择器 4.1 基本选择器元素选择器 p{color:"red";} ID选择器

前端之CSS

阅读更多关于前端之CSS

前端之CSS CSS介绍 CSS( C ascading S tyle S heet，层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,他就会按照这个样式来对文档进行格式化(渲染) CSS语法每一个CSS都是由两部分组成: 选择器和声明, 声明又包括属性和属性值,每个声明之后用分号结束. 大概就是这样: 属性:属性值属性: 属性值 h1 {color:red; font-size: 14px;} 选择器声明声明 CSS注释 /*这是注释*/ 就是这个用法 CSS的几种引入方式行内样式行内样式是在标记的style属性中设定CSS样式, 不推荐大规模使用 <p style="color: red">Hello.</p> 内部样式嵌入式是将CSS样式集中在网页的标签对的标签对中, 格式如下: <head> <meta charset="UTF-8"> <title>我的网页</title> <style> p{backgrount-color:red;} </style> </head> 外部样式外部样式就是将CSS写在一个单独的文件中, 然后在页面进行引入即可, 推荐使用: <link href="mystyle.css" rel="styleshrrt" type="text/css"/> CSS选择器元素选择器 p {color:"red";}

前端之CSS

阅读更多关于前端之CSS

二、CSS 1、CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2、CSS语法 2.1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2.2 CSS注释注释是代码之母。 /*这是注释*/ 3、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、CSS选择器 4.1基本选择器

订阅文档流