overflow | 易学教程

从零开始学Bootstrap(2)

阅读更多关于从零开始学Bootstrap(2)

继从零开始学Bootstrap(1)后，我们需要实际做一些页面，边学边做。因为前端是一项非常注意实践的技术，知识点太多、太琐碎了，所以我们只能边学边做。根据我们想要做的效果，去查相应的资料。不要想着把所有的东西都学会后再做网页实践。过程中会频繁查阅资料的网站： http://www.w3school.com.cn/ 这是W3C联盟为了传播W3C标准而建立的网站，有很多关于Web端的技术，你可以将其看作为一部Web技术的百科全书。 http://v3.bootcss.com/ 不用多说，BootStrap3官方文档 http://www.runoob.com/ 这个其实跟W3school差不多，但是比W3school要全要杂一点，好多内容都是从原版W3C英文网站和原版BootStrap官方英文文档翻译过来，但是我感觉他的翻译质量要更高（因为前两个网站说白了也是翻译过来的），有些Case更加好懂。闲话不多说，让我们开始：（1）明确实现目标如下图所示，这就是咱们要实现的一个简单网站。布局简单，也没有很炫的效果。但是要实现一个功能：从Json文件（关于Json的知识可以到上述网站去查）里读取相关信息，显示在网站上。 Json文件内容： { "Class 001": { "Xiao Wang": { "Gender": "Male", "Age": "18",

Trouble replicating a stack buffer overflow exploit

阅读更多关于 Trouble replicating a stack buffer overflow exploit

问题 I am having trouble replicating the stack buffer overflow example given by OWASP here. Here is my attempt: $ cat test.c #include <stdio.h> #include <string.h> void doit(void) { char buf[8]; gets(buf); printf("%s\n", buf); } int main(void) { printf("So... The End...\n"); doit(); printf("or... maybe not?\n"); return 0; } $ gcc test.c -o test -fno-stack-protection -ggdb $ objdump -d test # omitted irrelevant parts i think 000000000040054c <doit>: 40054c: 55 push %rbp 40054d: 48 89 e5 mov %rsp,

网页右侧悬浮的QQ在线客服

阅读更多关于网页右侧悬浮的QQ在线客服

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <title>网页右侧悬浮的QQ在线客服(二)</title> <meta http-equiv="content-type" content="text/html;charset=gb2312">  <style type="text/css"> .qqbox a:link { color: #000; text-decoration: none; } .qqbox a:visited { color: #000; text-decoration: none; } .qqbox a:hover { color: #f80000; text-decoration: underline; } .qqbox a:active { color: #f80000; text-decoration: underline; } .qqbox{ width:132px; height

html中div加滚动条

阅读更多关于 html中div加滚动条

div 加滚动条的两种方法：一、 <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢，否则不成的不过在不超出时，会有下面的滚动条，所以不是最好的选择二、 <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div> 记住宽和高一定要设置噢，否则不成的这样比较好的是，在宽和高不超出时，只是一条线三、说明直接为div指定overflow属性为auto即可，但是必须指定div的高度，如下： <div style="position:absolute; height:400px; overflow:auto"> </div> 如果要出现水平滚动条，则： overflow-x:auto 同理，垂直滚动条为： overflow-y:auto 如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative 来源： https://www.cnblogs.com/yanl55555/p/12543994.html

关于BFC的一些事

阅读更多关于关于BFC的一些事

BFC的生成在实现CSS的布局时,假设我们不知道BFC的话,很多地方我们生成了BFC但是不知道.在布局中,一个元素是block元素还是inline元素是必须要知道的.而BFC就是用来格式化块状元素盒子,同样还有管理内连盒子的IFC等.那首先就来了解一下什么是FC. FC: Formatting Context指的是页面中的一个渲染区域,并且拥有自己的渲染规则.决定子元素如何定位,以及和其他元素的相互作用和联系. BFC: 块级格式化上下文, 是一个独立的块级渲染区域,只针对块级元素,有一套自己的渲染规则来约束块级盒子,与外部无关. 既然BFC是一块独立的渲染区域,那么这块区域在哪里,有多大, 这就有生成BDC的元素决定,CSS2.1中规定, 满足以下CSS声明的元素就会生成BFC. 根元素 float不为none overflow不为hidden display: inline-block, table-cell, table-caption (注意: 值为table会生成BFC是因为会默认生成一个匿名的table-cell,所以不是table生成了BFC) position: absolute, fixed BFC的约束浏览器对BFC约束如下: 1. 生成BFC的子元素会一个接一个的放置,在垂直方向上的起点是包含块的顶部,相邻的子元素之间的垂直距离由margin控制

两栏布局

阅读更多关于两栏布局

法一：左侧 float:left;右侧margin-left; html <div class="left">left</div> <div class="right">right</div> css body,div{padding: 0 ;margin:0;} .left,.right{height: 200px;} .left{float: left;width: 200px;} .right{margin-left: 200px; background-color: greenyellow;} //因为块级元素有流体特性，即默认会填充满外部容器，所以只需要设置margin，不需要设置width就可以让content填满剩余的部分。法二：左侧 float:left; 右侧overflow:hidden； html <div class="left">left</div> <div class="right">right</div> css body,div{padding: 0 ;margin:0;} .left,.right{height: 200px;} .left{float: left;width: 200px;} .right{overflow:hidden; background-color: greenyellow;} 右侧设置的 overflow

移动端常见问题（单行和多行文字溢出省略）

阅读更多关于移动端常见问题（单行和多行文字溢出省略）

单行文字溢出省略：给容器添加css样式： .text-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width:200px; background-color: lightblue; margin:0 auto; } .text-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } </style> </head> <body> <div class="text-ellipsis"> 欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代 </div> </body> </html> 如果容器使用了flex布局：此时单行文字省略会出问题 <!DOCTYPE html> <html lang="en">

CSS overflow隐藏元素

阅读更多关于 CSS overflow隐藏元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用overflow来hidden隐藏多余margin或元素</title> <style type="text/css"> .pic_list_con{ width: 958px; border: 1px solid #666; margin: 50px auto 0; } .pic_list_title{ width: 918px; height: 50px; /*background: gold;*/ margin: 0 auto; /*此处设置了之后图片应该在父集边框紧贴边缘,不过出现问题,没有能够紧贴. 这个时候首先要查找问题在哪个元素. 主要看自己子元素内是否有自带式样的元素. 此处经过排查, 发现是h3自带式样,引起了top塌陷,所以导致title的div无法紧贴上方父元素. 所以第一时间应该更改h3的默认margin! */ } .pic_list_title h3{ margin:0; /*设置margin之后,父元素也能够紧贴上级元素了!*/ font: 18px/50px "Microsoft Yahei"; border-bottom: 2px solid red ; /*此处设置了下border之后

CSS禁止滚动条

阅读更多关于 CSS禁止滚动条

CSS禁止滚动条的方法： 1、完全隐藏在<boby>里加入scroll="no"，可隐藏滚动条； <boby scroll="no"> 2、在不需要时隐藏指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示； <boby scroll="auto"> 3、样式表方法在<boby>里加入style="overflow-x:hidden"，可隐藏水平滚动条；加入style="overflow-y:hidden"，可隐藏垂直滚动条。被包含页面里加入 <style> html { overflow-x:hidden; } </style> 4、另一种方法 <style type="text/css"> body { overflow-x:hidden; overflow-y:hidden; } </style> <style type="text/css"> html { overflow-x:auto; overflow-y:auto; } </style> 来源： https://www.cnblogs.com/jepson6669/p/9062336.html

display:none,overflow:hidden,visibility:hidden之间的区别

阅读更多关于 display:none,overflow:hidden,visibility:hidden之间的区别

一，display:none; 隐藏元素，不占网页中的任何空间，让这个元素彻底消失（看不见也摸不着）二，overflow:hidden; 让超出的元素隐藏，就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉我们都知道每个浏览器对代码的解析都不同，所以我们在做页面的时候会遇到很多bug，在IE里面如果内容的高度超过了该层的高度他会自动地撑开，但火狐等里面的高度是多高这层就只有这么大，内容的高即使超出了也不会影响你设置的高，在这个时候我们有的问题就可以用overflow：hidden；来解决，这是第一点，还有就是我们可以利用它做出很多hove效果三，visibility:hidden; 他是把那个层隐藏了，也就是你看不到它的内容但是它内容所占据的空间还是存在的。（看不见但摸得到） { display: none; /* 不占据空间，无法点击 */ } /********************************************************************************/ { visibility: hidden; /* 占据空间，无法点击 */ } /********************************************************************************/ {

订阅 overflow