div

div的水平居中和垂直居中

元气小坏坏 提交于 2020-01-27 00:58:13
div是html中的一个标签,一般称之为盒子。有宽度、有高度,是可以存放内容的一个区域。但是如何让div在页面上以水平或者垂直的方式居中呢? 1.div水平居中   div水平居中其实很简单,只要使用到margin中的auto就能实现。代码如下: <html> <head> <title>div水平居中</title> <style> .horizontal{ width:800px; height:300px; background: #ff6a00; margin:100px auto; /*100px是div的上下边距,auto表示左右边距自适应(即水平居中)*/ } </style> </head> <body> <div class="horizontal"> 我是水平居中的div </div> </body> </html> 2.div垂直居中   div垂直居中的方法一般是使用absolute定位(绝对定位)的方式来实现的。代码如下: <html> <head> <title>div水平垂直居中</title> <style> .divbox{ width:500px; height:300px; line-height:300px; text-align:center; background:#ccc; position:absolute; left:50%;

HTML5的css3使用div{}的了解和.div{}的全部

允我心安 提交于 2020-01-26 20:00:49
使用div标签当css来用(div{}),你会发现所有的div css设置的都一样,无论是嵌套还是两个div结果还是一样,但是我只想设置某个div,怎么办,老办法:用id或class(.div1),可以做到,但是以下代码使用这种方法很苦: <div class="demo-slide-tab"> <ul> <li> <h3>title 1</h3> <div>content1</div> </li> <li> <h3>title 2</h3> <div>content2</div> </li> <li> <h3>title 3</h3> <div>content3</div> </li> <li> <h3>title 4</h3> <div>content4.</div> 44 </li> </ul> </div> 做这个功能列表他们的div都是同一种css设置,如果通过id来设置每一个的话,会有很多代码,造成不可读性 假如我怎么实现css结果就不一样了: .demo-slide-tab div { margin: 0; voerflow: auto; padding: 10px; max-height: 220px; } 我把div css设置相同的放到一个div里面,通过类(demo-slide-tab)加空格在用div{}这种方法就可以不影响外面的div,又可以实现一起设置

css入门知识:div和span,常用选择器,高级选择器

房东的猫 提交于 2020-01-26 15:44:07
目录 div和span: div | span 常用选择器: 类型选择器 | 后代选择器 高级选择器: 子选择器 | 相邻同胞 选择器 | 属性选择器 1 div和span 1.1 div div的最重要的作用就是用来分隔文档,不要滥用,只在没有现有元素能实现区域分隔的情况下才使用div。 例如,如果使用主导航列表,那么不需要将它包围在div中。 不需要将主导航列表包围在div中 < div id ="mainNav" > < ul > < li > Home </ li > < li > About Us </ li > < li > Contact </ li > </ ul > </ div > 完全可删除div,直接在列表上应用ID 简化后的代码 < ul id ="mainNav" > < li > Home </ li > < li > About Us </ li > < li > Contact </ li > </ ul > 1.2 span div 可以用来对块级元素分组,而span可对行内元素进行分组或标记 span的一个实例Code < h2 > Where's Durstan? </ h2 > < p > Published on < span class ="date" > March 22nd,2005 </ span > by < span

实现div里的img图片水平垂直居中

匆匆过客 提交于 2020-01-26 02:55:05
body结构 <body> <div> <img src="1.jpg" alt="haha"> </div> </body> 方法一: 但是如果有flex布局,会影响vertical-align:middle失效 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。 <style type="text/css"> *{margin: 0;padding: 0;} div{ width:150px; height: 100px; display: table-cell; vertical-align: middle; text-align: center; border:1px solid #000; } img { width: 50px; height: 50px; } </style> 结果如下图所示: 方法二: 通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。 <style type="text/css"> *{margin: 0;padding:0;}

Codeforces Round #595 (Div. 3) 题解

别说谁变了你拦得住时间么 提交于 2020-01-26 00:31:46
A. Yet Another Dividing into Teams 传送门 签到,有相邻的数字 ans=2,否则 ans=1 int main(){ scanf("%d",&T); while(T--){ scanf("%d",&n); memset(vis,0,sizeof(vis)); for(int i=1,x;i<=n;i++) scanf("%d",&x),vis[x]=1; int flag=0; for(int i=1;i<=100;i++) if(vis[i]&&(vis[i-1]||vis[i+1])) {flag=1;break;} if(flag==0) printf("1\n"); else printf("2\n"); } return 0; } B. Books Exchange 传送门 找每个顶点处在的环的大小,dfs 行了 #include <iostream> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <queue> #include <utility> #define MAXN 200010 using namespace std; const int inf=0x3f3f3f3f; int ans=inf; int T,n,to[MAXN],len

关于js中获取div中的数据

我与影子孤独终老i 提交于 2020-01-25 22:03:09
最近用js写了一个计算器的页面。基本上使用到了,ul li的几点用法。用来布局,并且创造出了很不错的鼠标悬停效果。 关于从中学到的知识: document.getelementbyid("ddhdh").innerHTML 可以获取到div中的全部数据,包括标签。。。但是只是在IE和OPERA中使用 document.getelementbyid("ddhdh").innerTEXT 可以获取到div中的文本数据,不会获取到标签。。。但是只是在IE和OPERA中使用 document.getElementById(“text”).textContent 用于在火狐中获取数据 上面的标签在这几钟基于两种浏览器的内核的浏览器,这几种方法是不兼容的。下面是解决方案 兼容火狐ie的js 获取div的内容 if(navigator.appName.indexOf(“Explorer”) > -1) var text = document.getElementById(“text”).innerText; else var text = document.getElementById(“text”).textContent; 用来获取浏览器的名称,第一句话的意思就是当获取到的浏览器的名称中带有Explorer。 涉及到indexof用法 strObj.indexOf(subString[,

div包裹img,底部一小段空白bug

好久不见. 提交于 2020-01-25 14:36:57
01.<!DOCTYPE html> 02.<html> 03.<head> 04.<meta charset="utf-8" /> 05.<title>div img空白bug</title> 06.<style> 07.body{ 08. margin:0; 09. padding:0; 10.} 11.div{ 12. background:#000; 13.} 14.img{ 15. display:block; 16.} 17.</style> 18.</head> 19. 20.<body> 21.<div><img src="http://hi.csdn.net/attachment/201108/1/0_13121966060Q17.gif" width="100" height="100" /></div> 22.</body> 23.</html> 在div的底部,和img边缘之间有空白,IE8 firefox chrome safari 均有,IE6 IE7 没有,解决办法就是给img设置display:block 来源: https://www.cnblogs.com/radphp/archive/2013/04/20/3032678.html

div 里边只包含一个img, 结果div的高度比img图片的高度多3px

*爱你&永不变心* 提交于 2020-01-25 14:33:36
在编写代码的时候,遇到这样一个问题, 下面为html和css <div id = "header"> <img src="./img/header.png"/> </div> #header { position: relative; left: 0; width: 100%; top: 0; } #header img { /*display: block;*/ width: 100%; } 结果运行之后,发现header的高度总是比img的图片多出3px,不管是在移动端还是pc端,都会出现这种问题。 1, 刚开始以为是html的问题, 结果把html改成 <div id = "header"><img src="./img/header.png"/> </div> 还是不行,所以这可能就不是html的问题。 2,在网上查找资料,发现可以把img设置为block, 解决。 3,通过google了解到原因,img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会多出3px 英文解释 来源: https://www.cnblogs.com/zsjun/p/4719090.html

css实现图片在div中居中的效果

我怕爱的太早我们不能终老 提交于 2020-01-25 06:24:17
  利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中。   结构代码同上;   css代码如下:   div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}   img {display:block; margin:0 auto;}   备注:   img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中;(有的设计师为图片再加个div标签,然后通过div标签的margin实现居中   思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。   结构如下:    <style type="text/css"> div{ width:180px; height:180px; border:1px solid #000; position:relative; display:table-cell; text-align:center; vertical-align:middle; } div p{ position:static; +position:absolute;

HTML中DIV块覆盖SELECT空间 解决方案

天大地大妈咪最大 提交于 2020-01-25 05:32:55
1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 2 < html xmlns ="http://www.w3.org/1999/xhtml" > 3 < head > 4 < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> 5 < title > 无标题文档 </ title > 6 </ head > 7 < script type ="text/javascript" > 8 function a(){ 9 alert(); 10 document.getElementById( " aa " ).style.display = " block " ; 11 12 } 13 </ script > 14 < body > 15 16 < p > 17 < input type ="button" style ="width:100px; height:30px;" value ="button" onclick ="a();" /> 18 </ p > 19 < p >   </ p