文档流 | 易学教程

前端之CSS

阅读更多关于前端之CSS

文本属性 ## 文字对齐 #text-align属性规定元素中文本的水平对齐方式 left: 左边对齐默认值 right: 右对齐 center: 居中对齐 justify: 两端对齐 ## 文字装饰 #text-decoration属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline: 定义文本下的一条线 overline: 定义文本上的一条线 line-through: 穿过文本的一条线 inherit: 继承父元素的text-decoration属性的值背景属性 #背景颜色 background-color: red; #背景图片 background-image: usl('1.jpg'); #背景重复 repeat(默认)：背景图片平铺排满整个网页 repeat-x: 背景图片只在水平方向上平铺 repeat-y: 在垂直方向上平铺 no-repeat: 背景图片不平铺 background-repeat: no-repeat/left top; #背景位置 # 支持简写 background: #336699 url('1.png') no-repeat left top; 边框 #边框属性 border-width border-style border-color #边框样式 none: 无边框 dotted: 点状虚线边框

第二阶段：Html基础 day51 前端--Html基础之css（二）

阅读更多关于第二阶段：Html基础 day51 前端--Html基础之css（二）

目录 1.css属性相关 1.1 背景属性 1.2 边框 1.3 border-radius 1.4 display属性 1.5 css盒子模型 1.5 float 1.6 clear 清除浮动 1.7 overflow溢出属性 1.8 定位(position) fixed（固定） 1.9 Z-index 1.10 opacity 前端之CSS（二） 1.css属性相关 1.1 背景属性 /*背景颜色*/ background-color: red; /*背景图片*/ background-image: url('1.jpg'); /* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat: no-repeat; /*背景位置*/ background-position: left top; /*background-position: 200px 200px;*/ 支持简写： background:#336699 url('1.png') no-repeat left top; 1.2 边框边框属性 border-width border-style border-color #i1 { border

前端——CSS绝对定位、相对定位和文档流

阅读更多关于前端——CSS绝对定位、相对定位和文档流

前言 http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html 接触html、和css时间也不短了，但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决，但总不是个事，所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系。文档流的概念确切的说应该是文档文档流模型的机制，html的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline）。不独占一行如块级元素(block) <div>div1</div> <div>div2</div> 效果如下 ok，那么怎么知道这不是因为没有设置高和宽的样式而出现的情况呢，我们听邓爷爷的话，实践是检验真理的唯一标准 <div style=" width:100px; height:100px;">div1</div> <div style=" width:100px; height:100px;">div2</div> 效果如下：额，没坑你吧... 又如内联元素(inline) <img src="Image/close.gif" alt="图片" style=" height:100px; width:100px;"/> <a href=

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

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

一、什么是定位改变元素在页面中的位置二、定位的分类 1、普通流定位 2、浮动定位 3、相对定位 4、绝对定位 5、固定定位三、普通流定位页面中元素的默认定位方式，默认文档流，从上往下，从左往右 1、每个元素都在页面有自己的空间 2、每个元素都是从父元素的左上角开始显示 3、块级元素都是按照从上到下的方式逐行排列，每个元素独占一行 4、行内元素是多个元素在一行显示，从左往右逐个排列对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行前端前端前端四、浮动定位 1、当元素设置浮动后，该元素脱离默认文档流，后面的元素会上前补位。当前元素会在当前行，向左或者向右排列 float：left、right、none 特点：（1）、元素一旦浮动，就脱离文档流了，不占据页面空间，后面会上前补位（2）、浮动元素会停靠在父元素的左边/右边，或者其他已经浮动元素边缘（3）、浮动就是解决多个块级元素在一行显示的问题 2

前端学习（十四）：CSS布局

阅读更多关于前端学习（十四）：CSS布局

进击のpython 前端学习——CSS布局每个模块的相关央视就算是进本上都完成了，但是，这些模块想放在不同的位置横着放，竖着放，斜着放... ... 想怎么放怎么放那就用到了今天要说的CSS布局了浮动浮动介绍浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果，如图所示: 如果我们用之前讲解的内容，来实现上述显示的效果，这是很难实现的！！！另外之前咱们学习了标签的分类，每类标签都是有它自己的特点，比如块级标签独占一行，哎呀，突然有个idea 如果让两个div在一排内显示，那怎么办，可能有的同学又说了，display属性啊，把他们设置成inline-block 好吧，同如果你能想到这里，证明对咱们的知识点理解的还算透彻，但是呢你又会发现，如果用你刚刚那种效果展示，如图所示：仅仅的这点间隙，到底是多大呢，如果我们在一行内计算整个盒模型的宽度的话，是否又计算的精准呢？所以，你意淫出来的想法是不对的！！！！！！浮动属性浮动：css样式表中用float来表示：属性值描述 none 表示不浮动，所有之前讲解的HTML标签默认不浮动 left 左浮动 right 右浮动 inherit 继承父元素的浮动属性 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

好程序员web前端学习路线分享CSS浮动-文档流篇

阅读更多关于好程序员web前端学习路线分享CSS浮动-文档流篇

　　好程序员web前端学习路线分享CSS浮动-文档流篇，纯文本的排列，文档流就像我们的文本内容一样，所有的文字都会紧挨着，一个个排列下来，如果到了边界，就会换一行排列。当然如果敲回车或者按下空格键一般都会认为是一个词间距，因为英文中每个单词之间是有距离的，不像中文每个汉字连在一起的。所以不管你敲了几个回车，不管你敲了几个空格。程序都认为只有一个词间距的空格距离。我们把这种现象称为空白折叠现象。下图中的红色箭头就是我们敲了回车和敲了空格的效果。文本和图片的排列因为图文排版的原因，图片的宽度是一个整体。不像文字可以中间分开，因此在图文一起的时候我们会发现，图片作为文档流中的内容也是和一个文字元素一样，紧挨前一个文字，后面的文字也紧跟着图片。但是如果一行剩下的位置不够图片的宽度，就会自动换一行。因为图片和一个文字元素一样，因此，图片的高度大于文字的高度，就会把这一行撑高，图片越高，行越高。在同一行的文字默认就会在图片的下端。如果你希望文字相对在图片的中间位置，那么就需要给图片设置一个CSS样式 vertical-align: middle ; 注意一定是给图片设置，不是给文字设置。　　当然如果我们设置两个张图，注意观察下面的两张图中间的缝隙，原因在于<img src=”img/1.jpg”>之间是换行的。根据上面文字的特征，这里必然也会产生一个空格　　如何解决这个问题呢

css知识整理

阅读更多关于 css知识整理

定位文档流是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子占据自己的位置。 relative 相对元素定位，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移 absolute 绝对定位，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。 fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。 static 默认值。没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。约等于标准流 inherit 从父元素继承position属性的值。总结： relative相对正常位置，absolute相对最近的已定位父元素。 relative不可以设置大小，absolute可以设置大小。 absolute和fixed的块元素会自动转化为行内块元素。模式转换定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的层级。父相子绝使用场景当页面中出现盒子压盒子的效果是，推荐使用定位。拓展标准流盒子居中： margin： 0 auto；

部份css样式详解(附实际应用)

阅读更多关于部份css样式详解(附实际应用)

本文的所有实例均基于博客园的页面定制。所有表格内容来自W3CSchool。页面背景（background）博客开通之后，很多人最先做的事情一定是改页面的背景，换成一张图片或者换上一个自己喜欢的颜色，这时候用到的就是background属性。但是，在什么地方用呢？所有的html标签都支持这个属性。所以，随便用。我们经常能看到类似 background: #fff; 这种使用方式，如果背景是张图片，那可能会看到 background: url('xxx.jpg'); 这种使用方式。即使没有系统的学过css，仅看这两条代码也能知道前者是在设置背景色，后者则是在设置背景图片。实际就是选择图片做背景还是选择颜色做背景。那么现在设置一下博客的背景： body { background: #FFE4C4; } 颜色确实改变了哈，同理可以设置图像背景。我们在浏览器中检查元素（F12），可以看到background实际上是一系列属性的集合。对于单纯的背景颜色来说，这一系列的属性通常可以无视，对于图像背景，则按需设置这些内容（一般是 postion, size, repeat, attachment 这几条）。这些属性的具体使用方式可以通过手册查找到，这里不再叙述。上面换上了背景图像之后，我们使用手机打开，发现图像平铺了（未设置repeat），但是关闭了这条属性

css — 权重、继承性、排版、float

阅读更多关于 css — 权重、继承性、排版、float

目录 1. 继承性 2. css中的权重 3. 常用格式化排版 4. 浮动布局float 1. 继承性继承性：在css有某些属性是可以继承下来，如 color,text-xxx,line-height,font-xxx,letter-spacing,word-spacing是可以继承下来，但有些属性是不可以继承下来的，如 border:1px solid green; 2. css中的权重继承来的属性权重值约为0 权重比较规则: 如果选中了标签： 1.数选择器数量： id 类标签，谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性 2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性 3.同是继承来的属性 1.谁描述的近，谁的优先级越高 2.描述的一样近，这个时候才回归到数选择器的数量 !important 它设置当前属性的权重为无限大，大不过行内样式的优先级注意：!important要写在分号的前面使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。 3. 常用格式化排版 3.1 字体属性 1.字体语法： /*网页中的文字设置字体为微软雅黑*/ body{font-family:"Microsoft Yahei"} 2.备选字体语法： body{font-family:

深入css布局 (2) — 定位与浮动

阅读更多关于深入css布局 (2) — 定位与浮动

深入css布局(2) — 定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。这篇我们继续... 一、定位与浮动上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。 1.1 文档流文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。那么也就可以理解成我们刚才所说的一个二维平面的概念。那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。 1.2 定位定位允许你使用 position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。根据 position 属性的取值，元素可以分为静态定位元素 static （默认值）、相对定位元素 relative 、绝对定位元素 absoute 和固定定位元素

订阅文档流