display | 易学教程

层次选择器

阅读更多关于层次选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系主要包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表2-3所示。选择器功能返回值 ancestor descendant 根据祖先元素匹配所有后代元素元素集合 parent > child 根据父元素匹配所有子元素元素集合 prev + next 匹配所有紧接在prev元素后的相邻元素元素集合 prev ~ siblings 匹配 prev元素之后的所有兄弟元素元素集合说明：ancestor descendant 与 parent > child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next可以使用.next()代替，而prev ~ siblings可以使用nextAll()代替。 Demo如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title

音频播放器

阅读更多关于音频播放器

HTML+JS 的音频播放器 Web 上的音频直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash ）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 audio 元素能够播放声音文件或者音频流。 <audio src="song.mp3" controls="controls"> </audio> 试着用 audio 与 windows media 编写一个多浏览器支持的音频播放器： Html ： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>WavPlayer</title> <meta name="Author" content=""> <meta name="Keywords" content=""> <link href="public.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script

css 一行自适应等比例布局

阅读更多关于 css 一行自适应等比例布局

一、浮动布局+百分比 .row { width:100%; overflow:hidden; zoom:1; } .item { float: left; width: 20%; } 该样式兼容性较好，但是无法实现当里面的列增多时比例也随着变化，必须手动修改，当然你也可以使用一个JS来调整了。二、行内元素（inline-block）+百分比 .row { width:100%; font-size: 0; /*行内元素间有字符，诸如回车符等会被浏览器解析成一个空格*/ *word-spacing: -1px; } .item { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; word-spacing: normal; letter-spacing: normal; width: 20%; } 三、display:table + display:table-cell 我们知道表格可以根据内容进行划分，CSS也有一个样式是display:table来实现类似表格的布局，不过不支持IE8以下浏览器。 .row { width:100%; display: table; } .item { display: table-cell; } 四、使用css3 display:flex .row {

移动端常见bug

阅读更多关于移动端常见bug

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" />  将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" />  viewport模板

如何创建一个不创建换行符或水平空格的隐藏div？

阅读更多关于如何创建一个不创建换行符或水平空格的隐藏div？

我希望有一个隐藏的复选框，不占用屏幕上的任何空间。如果我有这个： <div id="divCheckbox" style="visibility: hidden"> 我没有看到复选框，但仍然会创建一个新行。如果我有这个： <div id="divCheckbox" style="visibility: hidden; display:inline;"> 它不再创建新行，但占用屏幕上的水平空间。有没有办法让隐藏的div不占用任何空间（垂直或水平？ #1楼使用 style="display: none;" 。此外，您可能不需要使用DIV，只需将样式设置为 display: none 复选框上的 display: none 可能就足够了。 #2楼使用 display:none; <div id="divCheckbox" style="display: none;"> visibility: hidden 隐藏了元素，但它仍然占用了布局中的空间。 display: none 从文档中完全删除元素，它不占用任何空间。 #3楼考虑使用 <span> 隔离要标注的小段标记，而不会破坏布局。这似乎比试图强制 <div> 不显示自己更具惯用性 - 如果实际上复选框本身无法按照您想要的方式设置样式。 #4楼除了CMS的答案之外，您可能需要考虑将样式放在外部样式表中并将样式分配给id

display属性介绍

阅读更多关于 display属性介绍

display：display属性设置元素如何被显示 1、display分类 display: none; ---------------让标签消失(隐藏元素并脱离文档流)，即此元素不会被显示。 display: inline; ---------------内联元素(内联表签)，此元素前后没有换行符。 display: block; ---------------块级元素(块级标签)，此元素前后会带有换行符。 display: inline-block; -------既有inline的属性也有block属性，即行内块元素。 display：inherit；-----------规定应该从父元素继承 display 属性的值。 2、块级元素和内联元素 block元素： block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度 block元素可以设置width和height属性。块级元素即使设置了宽度,仍然是独占一行 block元素也可以设置margin和padding属性 inline元素： inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行 inline元素的宽度是自身内容的宽度(默认有多少占多少) inline元素设置width和height属性无效

实现元素水平居中和垂直居中的方法

阅读更多关于实现元素水平居中和垂直居中的方法

水平居中水平居中的方法大家应该都知道 1.在父元素的里面加 /父元素 { text-align:center; } //子元素 { //如果不管是就在子元素加 display:inline/inline-block; } 2.前提：居中的元素必须是块级元素 /父元素 { text-align:center; } //子元素 { //如果不管是就在子元素加 display:inline/inline-block; } 垂直居中 1.绝对定位(一) //已知宽高 //父元素 { position: relative; width:宽; height: 高; } //子元素 { width: 宽; height: 高; position: absolute; left: 50%; top: 50%; margin-left: -宽/2; margin-top: -高/2; } 2.绝对定位(二) //已知宽高 //父元素 { position: relative; width: 250px; height: 250px; background: blue; } //子元素 { position: absolute; width: 50px; height: 50px; left: 0; top: 0; right: 0; bottom: 0; margin: auto;

11.table妙用--文字居中

阅读更多关于 11.table妙用--文字居中

display：table和table-cell是如何让多行文字垂直居中的 .parent { display : table ; margin : 0 auto ; text-align : center ; width : 200px ; height : 300px ; border : 1px solid red ; } .son { display : table-cell ; height : 210px ; vertical-align : middle ; } .son i { font-style : normal ; background : red ; } </style> <div class = "parent" > <p class = "son" > <i> Lorem </i> ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur veritatis necessitatibus accusamus, consequatur deserunt numquam placeat ipsam ipsa rem perferendis enim vitae ut molestias sapiente accusantium modi praesentium nam aliquam.

java_有秒计时的数字时钟

阅读更多关于 java_有秒计时的数字时钟

题目内容：这一周的编程题是需要你在课程所给的时钟程序的基础上修改而成。但是我们并不直接给你时钟程序的代码，请根据视频自己输入时钟程序的Display和Clock类的代码，然后来做这个题目。我们需要给时钟程序加上一个表示秒的Display，然后为Clock增加以下public的成员函数： public Clock(int hour, int minute, int second); 用hour, minute和second初始化时间。 public void tick(); “嘀嗒”一下，时间走1秒。 public String toString(); 返回一个String的值，以“hh:mm:ss“的形式表示当前时间。这里每个数值都占据两位，不足两位时补0。如“00:01:22"。注意其中的冒号是西文的，不是中文的。提示：String.format()可以用和printf一样的方式来格式化一个字符串。另外写一个Main类，它的main函数为下面的样子，注意，必须原封不动地作为Main的main函数： public static void main(String[] args) { java.util.Scanner in = new java.util.Scanner(System.in); Clock clock = new Clock(in.nextInt(), in

HTML5新增标签

阅读更多关于 HTML5新增标签

👉传送门： HTML5新增标签最有用的总结 HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。为了能让旧版本的浏览器正确显示这些元素，可以设置 CSS 的 display 属性值为 block。 header, section, footer, aside, nav, main, article, figure { display : block ; } 但IE9 以下版本浏览器兼容HTML5的方法，需要使用静态资源的html5shiv包：（百度包）  载入后，初始化新标签的CSS（此处没有 main ，是因为IE浏览器不支持 main 标签）： /*html5*/ article, aside, dialog, footer, header, section, nav, figure, menu { display : block ; } Goole html5shiv包：（但在国内不稳定） <!--[if lt IE 9]> <script src="http://html5shiv.googlecode

订阅 display