文档流 | 易学教程

css标签样式边框盒子模型定位溢出 z-index 透明度

阅读更多关于 css标签样式边框盒子模型定位溢出 z-index 透明度

目录一、CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色（3种表示方法） 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换二、盒子模型三、浮动（ ************ ）三、溢出四、定位五、z-index 控制z轴六、位置的变化是否脱离文档流 1.不脱离文档流 2.脱离文档流七、透明度一、CSS设置标签样式 1. 给标签设置长和宽只有块级标签才可以设置长宽行内标签设置了没有任何作用（行内仅仅只取决于内部的文本大小） 2.字体的颜色（3种表示方法）颜色的英文 6aode 直接使用pycharm提供的取色器即可 rgb(1，2，3) 可利用截图软件获取三基色数字 rgba(0,128,128,0.5) 最后一个数字，只能用来调节颜色的透明度 <style> p { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; font-size: 24px; font-weight: lighter; /*color: 'red';*/ /*color: #06a0de;*/ /*color: rgb(0,128,128); !* 数字范围只能是0~255*!*/ color: rgba(0,128,128,0.9); } </style

1114课堂小结

阅读更多关于 1114课堂小结

目录设置标签样式给标签设置长宽字体属性字体粗细字体颜色文字对齐文字修饰首行缩进背景属性设置背景颜色设置背景图片设置背景位置边框边框属性边框样式 display属性盒子模型浮动 float的三种取值 clear 清除浮动 overflow溢出属性定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定）是否脱离文档流脱离的不脱离的 z-index opacity 设置标签样式给标签设置长宽只有块级标签才可以设置长宽，行内标签设置了也没有任何作用 div { width:10px; height:10px; } 字体属性 font-size 可以设置字体大小字体粗细 normal：默认标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，700等同于bold inherit：继承父元素字体的粗细值字体颜色 COLOR 后面可以跟多种颜色数据颜色的英文：red #4e4e4e 十六进制 rgb(1,1,1)模式，三基色数字 rgba（1,1,1,0.2）和rbg一样，最后一个数字用来调节颜色的透明度文字对齐 text-align属性规定元素中的文本的水平对齐方式 left：左边对齐，默认 right

html、css 高级

阅读更多关于 html、css 高级

表格元素及相关样式 1、<table>标签：声明一个表格 2、<tr>标签：定义表格中的一行 3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格表格相关样式属性 border-collapse 设置表格的边线合并，如：border-collapse:collapse; <style> .table01{ width:500px; height:200px; border:1px solid black; /* 设置表格的边线合并 */ border-collapse:collapse; /* 设置表格水平居中 */ margin:0px auto; } .table01 th{ border:1px solid black; background:lightskyblue; color:white; } .table01 td{ border:1px solid black; /* 设置文字水平居中 */ text-align:center; } </style> <body>  <table class="table01"> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td>1<

CSS中的父相子绝布局

阅读更多关于 CSS中的父相子绝布局

主要应用场景，就是我想要块的布局根据父级来定位，而不是根据页面。例如，下面的例子中，我用两个半圆拼成一个正圆，思路是用一个父级标签把两个子标签包起来，父标签是一个正圆，然后子标签各占一半，先化成两个矩形，然后就是位置的选择。这里用到的就是父相子绝，即父标签用到相对位置，子标签用到绝对位置，这样子标签的两个半圆就能贴到父标签，形成一个圆。注意： 1.这里面父标签需要用相对定位，使用绝对定位的话会脱离文档流，见下面例子。 2.标签写position（relative或者absolute）的话，就会以它的父级标签作为参考，如果父级没写css样式，那就会以body样式作为参考，如果也没写，就会以整个html页面作为参考。例如这里，如果父级不设置position的话，那么那两个子标签就会以整个html页面为参考点，而把矩形飘到页面的两端脱离文档流，其实就是不是按照页面中文本的顺序，一行一行的排班下来，而是按照自己的意愿，可能存在一些重叠，常用的办法就是定位和浮动。具体见以下几篇补充什么是脱离文档流正常文档流和脱离文档流 HTML元素脱离文档流的三种方法下面这个例子，如果把父标签的相对定位改成绝对定位，那么和父标签相邻的test标签就会和该父标签重叠，也就是脱离文档流 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

position:relative/static/fixed/absolute定位的区别以及使用场景

阅读更多关于 position:relative/static/fixed/absolute定位的区别以及使用场景

absolute是相对于自己最近的父元素来定位的，relative是相对于自己来定位的 relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。所以absolute会把非定位盒子覆盖掉。 position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素.. 这里还有一个文本流的概念。表现在float和relative的区别，relative既脱离文档流也脱离文本流，而float只是脱离了文档流。所以才会表现出，float元素会把非定位盒子覆盖掉，但不会覆盖非定位盒子里面的文本，因为没有脱离文本流，非定位盒子内的文本环绕在float的周围。而对于使用absolute元素，会把非定位和自的位置和开面的文本一起覆盖掉。使用场景; l Relative用法，经验案例：： 1．给absolute元素提供定位基准 2．

前端之css

阅读更多关于前端之css

前端之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

移动端滚动穿透问题

阅读更多关于移动端滚动穿透问题

定义：移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透” 在弹出层的 touchstart 事件中调用 preventDefault 这种方法不可取，至少有3个缺点：如果弹出层本身是有滚动（条）的话，将会导致弹出层无法滚动，此时用这种方法无异于饮鸩止渴。一个很常见的场景，点击弹出层，弹出层消失掉，此时也无法触发弹出层的点击回调事件。弹出层内的任何事件都执行不了了。此解决方案是解决方案1的升级版。在弹出层的 touchmove （注意区别）事件中调用 preventDefault 这种解决办法没有了第一种解决办法的 2, 3 缺点。适用于弹出层本身有没有滚动（条）。设置body{overflow:hidden;} 缺点：经测试，在PC上支持良好，但是在IOS端，跟没有设置是一样的，完全不起任何作用！。这种解决方案适用于PC端。设置 html,body{overflow:hidden;} 在PC和移动端都能禁止掉下层的滚动。缺点：滚动位置丢失！页面会回到顶部！页面的背景还是能够有滚的动的效果（这个我没遇到）。可通过js来fix这个缺点，在弹出层出现时，记录页面的scrollTop，当弹出层消失时，把先前记录的scrollTop再次赋予页面。此解决方案能够避免上述所有缺点。堪称完美。（这个方案会导致主页面display

高级布局

阅读更多关于高级布局

normal flow(普通流,常规流)将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。一个连续具有逻辑上下的页面整体,出现在页面中的显示内容,均可以理解为文档流中。 2.BFC(Block formatting context) 块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 3.BFC规则内部的Box会在垂直方向,一个接一个地放置。 Box自身垂直方向的位置由margin-top决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。通过让元素浮动,可以使元素在水平上左右移动,再通过margin属性调整位置,就是使当前元素脱离文档流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或另一个浮动框的边缘。 float:left | right 对附近的元素布局造成改变,使得布局混乱。因为i浮动元素脱离了文档流,会出现一种高度坍塌的现象:原来的父容器高度是当前元素撑开的,但是当该元素浮动后,脱离文档流浮动起来,那父容器的高度就会坍塌

前端笔试题总结

阅读更多关于前端笔试题总结

选择题： 1.jquery ajax中都支持哪些数据类型？ text, html, xml, json, jsonp, and script. 2.常见的浏览器端的存储技术有哪些？浏览器端：cookie、WebStorage(localStorage、sessionStorage)、userData、indexedDB 服务器端：session 3.嵌入在HTML文档中的图像格式可以是？网页html文档支持的图片格式有jpg , gif , png 和 bmp 这四种，jpg ， gif 和 png 格式的图片特点是体积很小，因为在网上很常见，然而 bmp就不常见了，因为这种格式虽然很清晰色彩丰富，但是所占内存很大，所以很少见，但是也是支持的。一共这4种。 4.下面属于CSS3新增属性的有？ 1、box-shadow（阴影效果） 2、border-color（为边框设置多种颜色） 3、border-image（图片边框） 4、text-shadow（文本阴影） 5、text-overflow（文本截断） 6、word-wrap（自动换行） 7、border-radius（圆角边框） 8、opacity（透明度） 9、box-sizing（控制盒模型的组成模式） 10、resize（元素缩放） 11、outline（外边框） 12、background-size（指定背景图片尺寸

HTML之Position用法

阅读更多关于 HTML之Position用法

position的四个属性值： 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性。 <div id="parent"> </div> 1. relative relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码： #sub1 { } 我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。如果此时把sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。注意relative的偏移是基于对象的margin的左上侧的。 2.

订阅文档流