div | 易学教程

div等高布局

阅读更多关于 div等高布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实际是将其转为table</title> <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css" /> <style> .div{ border: 1px solid saddlebrown; border-spacing: 15px; width: 30%; display: table; } .div1{ display: table-cell; width: 100px; height:150px; background-color: royalblue; vertical-align: middle; } .div2{ display: table-cell; border: 1px solid seagreen; padding:10px; } </style> </head> <body> <div class="div"> <div class="div1"></div> <div class="div2"> 发舒服舒服舒服舒服水电费发舒服舒服舒服舒服水电费发舒服舒服舒服舒服水电费发舒服舒服舒服舒服水电费发舒服舒服舒服舒服水电费发舒服舒服舒服舒服水电费 <

关于div的几个问题

阅读更多关于关于div的几个问题

1.div默认位置是？　　div是块级标签，会独占一行。可以理解为一个容器，如果里面嵌套元素，或者文字可以根据里面的内容自适应宽高。如果不设置宽度，那么宽度将默认变为父级的100%。这里的父级就是body.body是默认有内边距的，内边距是用padding设置的。一般浏览器中都对body标签进行默认的margin设置为 8px ，设置body{margin:0px;padding:0px;} // 清除默认样式为什么给body设置padding:0px不能消除内边距，而设置margin:0px却能够消除内边距？关于这个问题： 1. 每种浏览器都有一套默认的样式表，在网页制作过程，没有指定相应的样式时，就会按照浏览器内置的样式表来渲染。 2. 举例说，IE6、IE7的body标签，默认的样式应该是：display:block;margin:15px 10px;zoom:1;（不是很确定），而没有预设padding值，chrome/firefox也只是设置了margin:8px;没有预设padding，从此可见，设置margin:0;即可消除边距了，这点可以通过简单的试验得出结果了。 3. 注意不同的浏览器甚至同个浏览器不同版本的默认样式是不同的。body标签分别将margin和padding都重置为0这是网络上广为流传的重置方法，应该是比较可靠的了。 4.

Codeforces Round #582 (Div. 3)简要题解

阅读更多关于 Codeforces Round #582 (Div. 3)简要题解

A - Chips Moving 分析：不改变奇偶的情况下是免费的，那么数一下奇数和偶数的个数就可以了。 #include "bits/stdc++.h" using namespace std; int main(){ int n; int od=0,ev=0; cin>>n; int x; while(n--){ cin>>x; if(x&1)od++; else ev++; } cout<<min(od,ev)<<endl; } B - Bad Prices 分析：记录一个后缀最小值，然后倒着扫一遍就可以了。 #include "bits/stdc++.h" using namespace std; int a[150004]; int main() { int t; cin >> t; while (t--) { int n; cin >> n; for (int i = 1; i <= n; ++i) { scanf("%d", &a[i]); } int ans = 0; int mini = 1e9; for (int i = n; i >= 1; --i) { if(a[i] > mini) ans ++; else mini = a[i]; } cout<<ans<<endl; } } C - Book Reading 分析：简单分析一下可以发现

前端之jQuery基础

阅读更多关于前端之jQuery基础

COPY自强仔找到div标签并给div标签设置为红色 // 原生js操作 var d1Ele = document.getElementById('d1'); d1Ele.style.color = 'red'; // jQuery操作 $('#d1').css('color','blue'); 基础语法 $(selector).action() // 样式演变，原本应该 jQuery(); // 为了简化 $(); 基本选择器 id选择器： $("#id") 标签选择器： $("tagName") class选择器： $(".className") 配合使用： $("div.c1") // 找到有c1 class类的div标签所有元素选择器： $("*") 组合选择器： $("#id, .className, tagName") 层级选择器： x和y可以为任意选择器 $("x y");// x的所有后代y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y 基本筛选器： :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd //

怎样隐藏溢出DIV的内容

阅读更多关于怎样隐藏溢出DIV的内容

平时在网页布局的时候总是有文字内容多了，超过溢出限制的高度，那么就会有一些图片会撑破DIV，让网页错位变乱的问题，那如何解决呢？这就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候可以利用以下解决方法。㈠解决CSS样式这时我们可以使用CSS overflow 样式解决：对应样式： Div{overflow:hidden} 这样设置后，假如DIV对象设置一定宽度高度，此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。㈡隐藏超出内容案例隐藏超出对象宽度高度文字内容假如我们在一个布局中为了美观对齐，有时我们需要设置了对象高宽后就固定了，这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局，这个时候我们需要overflow:hidden帮忙。 CSS代码： <style> .div{ width:300px; height:50px; line-height:25px; overflow:hidden} /* 设置对象高度宽度，同时设置overflow:hidden */ </style> Html代码： <div class="div">向阳而生㈢解决撑破内容方法这样设置了overflow

div水平垂直居中方法及优缺点

阅读更多关于 div水平垂直居中方法及优缺点

代码： <div class="father"> <div class="son"> </div> </div> 方案一： div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，兼容性：,IE7及之前版本不支持　　　　.father{ 　　　　　　　　width：400px; 　　　　　　　　height:400px; background: red; 　　　　　　　　position:relative; /* 或者 position:absolute;*/ 　　　　} 　　　　.son{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } 优点：简单缺点： IE(IE8 beta)中无效无足够空间时， .son 被截断，但是不会有滚动条出现方案二： div绝对定位水平垂直居中【margin 负间距】这或许是当前最流行的使用方法。　　　　.father{ 　　　　　　　　width：400px; 　　　　　　　　height:400px; background: red; 　　　　　　　　position:relative; /* 或者 position

div元素宽度不定的情况下如何居中显示

阅读更多关于 div元素宽度不定的情况下如何居中显示

本文转载于: 猿2048 网站 div元素宽度不定的情况下如何居中显示最近由于工作的原因碰到一个问题，就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示，思考许久未找到合适办法，于是在网上找到一些办法在此总结记录下来方便以后的学习。方法一：兼容IE67，但是当元素宽度大于50%时，会出现滚动条。 <div class="father"> <div class="child">这个是需要剧中的元素，宽度不确定</div> </div> .father { display: inlien-block; //使.father得宽度适应.child的宽度 background-color: grey; // 方便看到.father元素 position: relative; left: 50%; } .child { position: relative; left: -50%; } 效果如下：思路如下：外层设置为float:left或者display:inline-block,然后设置相对定位，left:50%，这样左边位置就偏移到了中间的位置;然后内层设置相对定位，left:-50%，这样正好向左偏移自身宽度的一半，实现了居中。方法二：兼容ie67 <div class="father"> <div class="child">这个是需要剧中的元素，宽度不确定</div>

<div>标签

阅读更多关于标签

<div> </div> 实际没有什么意义放在没有任何作用，把他看成一个盒子或者是塑料袋，用来装东西。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, maiores, ipsa. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, maiores, ipsa. </p> </div> </body> </html> 现在在外面放入了一个<div><./div>他并没有影响里面内容的布局。来源： https://www.cnblogs.com/qf928/p/11396710.html

用事件冒泡实现在div内点击，不触发事件，当在div外点击时才触发事件

阅读更多关于用事件冒泡实现在div内点击，不触发事件，当在div外点击时才触发事件

讲解 http://caibaojian.com/javascript-stoppropagation-preventdefault.html 使用案例在div内点击，不触发一个事件，当在div外点击时才触发事件。这比按钮节流和缓冲都要好的多自己使用的是一个form控件中的输入不触发，当输入完点击其他地方时触发计算，将结果赋值给form中不可编辑的控件中。具体代码： function div10_onClick(event) { //点击#Click时要阻止冒泡，否则.pop是不显示的， //因为冒泡了，会执行到下面的方法。 function stopPropagation(e) { var ev = e || window.event; if (ev.stopPropagation) { ev.stopPropagation(); } else if (window.event) { window.event.cancelBubble = true;//兼容IE } } function jie() { // 点击其他地方时触发合计运算 // 开始计算 // 取统计表单的值 ... ... ... // 可以再次绑定计算结果事件儿 sumDivBindType = true; $(document).unbind('click', jie); } // 事件冒泡

Codeforces Round #580 (Div. 2)

阅读更多关于 Codeforces Round #580 (Div. 2)

A：题意：给你 a,b俩个集合求任意一个 a[i] + b[j] 不属于俩个集合。思路：俩集合全部丢set 然后暴力枚举每个和。 AC代码： 1 #include<bits/stdc++.h> 2 using namespace std; 3 int a[500], b[500]; 4 set<int> st; 5 int main() 6 { 7 int n, m; 8 cin >> n; 9 for(int i = 0;i < n;i++) 10 { 11 cin >> a[i]; 12 st.insert(a[i]); 13 } 14 cin >> m; 15 for(int i = 0;i < m;i++) 16 { 17 cin >> b[i]; 18 st.insert(b[i]); 19 } 20 for(int i = 0;i < n;i++) 21 for(int j = 0;j < m;j++) 22 { 23 if(st.count(a[i] + b[j]) == 0) 24 { 25 cout << a[i] << " " << b[j]; 26 return 0; 27 } 28 } 29 return 0; 30 } B：题意：让通过增减1的方式所有元素乘积等于1；思路：贪心，正数直接到 1 ，负数到-1，如果最后乘积为 -1并且 0

订阅 div