div

css实现不定宽高的div水平、垂直居中

烈酒焚心 提交于 2020-01-15 08:45:17
一共有三个方案: 1,第一种方案主要使用了 css3中transform 进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示。 兼容方面也一样拿IE来做比较,第二种方法IE8以上都能使用。 IE8及IE8以下都会出现问题。 <body> <div id="box"> <div id="content">div被其中的内容撑起宽高</div> </div> </body> body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; } #content{ position:absolute; background:pink; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); } 2,第二种利用 flex 进行布局 很简单几句代码就实现了。可惜IE浏览器并不怎么支持display:flex; <body> <div id="box"> <div id="content"

div设置宽度后再设置padding或margin超出父元素的解决办法

十年热恋 提交于 2020-01-14 18:59:14
元素添加 box-sizing: border-box; 即可解决 在设置了元素宽度后再加上margin和padding,子元素会超出父元素宽度,肯定有时候是不需要这样的,解决方案:添加 box-sizing属性即可; box-sizing的属性对应有三个值 box-sizing: content-box|border-box|inherit; 1. content-box 这应该就是属于默认的,宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。 2. border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 3. inherit 从父元素继承 box-sizing 属性的值。 来源: https://www.cnblogs.com/rangzhi/p/12193309.html

不定宽高的div垂直水平居中

佐手、 提交于 2020-01-14 01:42:36
1.css3的flex 1 <style> 2 .ss { 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 height:600px; 7 width: 1000px; 8 background-color: #3a9; 9 } 10 .sss { 11 width: 100px; 12 height: 100px; 13 background-color: greenyellow; 14 } 15 </style> 16 <body> 17 <div class="ss"> 18 <div class="sss"></div> 19 </div> 20 </body> 2. position:absolute <style> .ss { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; height:100px; width: 100px; background-color: #3a9; } </style> <div class="ss"></div> 3.position:absolute .ss { width: 200px; height: 200px; background

Codeforces Round #612 (Div. 2) B - Hyperset (STL)

只愿长相守 提交于 2020-01-13 06:08:54
😌 😌 😌 使用map查找检验 # include <bits/stdc++.h> using namespace std ; # define endl '\n' # define stop system("pause") # define all(x) begin(x),end(x) using ll = long long ; using vi = vector < int > ; # define debug(v) cout<<#v<<":";cout<<v<<endl using pii = pair < int , int > ; const int MAXN = 2e5 + 10 ; # define fast ios::sync_with_stdio(false);cin.tie(0);cout.tie(0) # define rep(i, n) for (int i = 0, i##len = (int)(n); i < i##len; ++i) # define rpp(i, n) for (int i = 1, i##len = (int)(n); i <= i##len; ++i) template < typename T > istream & operator >> ( istream & is , vector < T > & v ) { for (

高度不定的div如何垂直水平居中

不问归期 提交于 2020-01-13 02:27:45
面试经常会被问到这个问题,特地总结了下几种方法。 方法1:display: table <!doctype html> <html> <head> <meta charset="utf-8"> <title>T</title> <style> html,body {margin:0; padding:0; height:100%;} .a {margin:0 auto; width:800px; height:100%; display:table;} .b {display:table-cell; vertical-align:middle;} .c {background:#f11;} p{height:20px;} </style> </head> <body> <div class="a"> <div class="b"> <div class="c"> <br><br><br><br><br><br><br> <p></p> </div> </div> </div> </body> </html> 方法2:定位+transform  .center {     position: fixed;     top: 50%;     left: 50%;     background-color: #000;     width:50%;     height: 50%;  

设置div中的div居中显示

一世执手 提交于 2020-01-10 20:10:39
设置div中的div居中显示 方法一、 <div class='big'> <div class='small'>box1</div> </div> style样式: .big{ height:200px; width:200px; border:black solid 1px; position:absolute; left:150px; } .small{ height:100px; width:100px; background-color:green; position:relative; left:100px; top:100px; margin-top:-50px; margin-left:-50px; border:black solid 1px; } 方法二、 div class='big2'> <div class='small2'>box3</div> </div> .big2{ height:200px; width:200px; border:black solid 1px; text-align:center; } .small2{ height:100px; width:100px; background-color:green; margin:50px auto; //外面的div高度的一半 border:black solid 1px; } 来源:

Codeforces Round #609 (Div. 2) B.Modulo Equality(枚举)

只愿长相守 提交于 2020-01-10 07:21:53
1269B.ModuloEquation(枚举) 题目描述 /** * @Author: Wilson79 * @Datetime: 2020年1月9日 星期四 15:46:47 * @Filename: 1269B.ModuloEquation.cpp */ // n = 2000 // 算法(枚举):b[0]一定是从某个a[i]得到的,所以枚举n中情况,取最小值即可 // 复杂度:O(n^2logn) # include <iostream> # include <algorithm> using namespace std ; const int N = 2010 ; int a [ N ] , b [ N ] , c [ N ] ; int d ; int main ( ) { int n , m ; cin >> n >> m ; for ( int i = 0 ; i < n ; i ++ ) { cin >> a [ i ] ; c [ i ] = a [ i ] ; } for ( int i = 0 ; i < n ; i ++ ) cin >> b [ i ] ; int res = 1e9 + 7 ; sort ( b , b + n ) ; for ( int i = 0 ; i < n ; i ++ ) { // 枚举得到b[0]的所有可能 //

Codeforces Round #570 (Div. 3) Subsequences (Easy and Hard Version)

淺唱寂寞╮ 提交于 2020-01-09 16:56:42
题面 : https://codeforc.es/contest/1183 题目大意是,一个长为n(1<=n<=100)的字符串 s 的k(k在Easy Version中是 1~100,在Hard Version中是1~1e12,两种版本就此处不同)个子序列组成一个集合,得到这个集合会产生一个代价,该代价是集合中每个元素的长度与原串s的长度之差的总和,现在求这个代价最小的值,如果字符串s没有k个子序列则输出"-1"。 初看此题,应当知道子序列不可能绝对是 2^n个,因为会有重复的子序列。 对于 Easy Version 我们可以模拟从原串一个个生成子序列,存储子序列的集合最大为100,所以复杂度没问题。 1 #include <bits/stdc++.h> 2 using namespace std; 3 4 queue< string > que; 5 set< string > S; 6 7 int main(){ 8 ios::sync_with_stdio(0);cin.tie(0); 9 string str; 10 int N,K; 11 int ans = 0; 12 cin >> N >> K; 13 cin >> str; 14 que.push(str); 15 S.insert(str); 16 while(!que.empty()&&S.size()<K){

CSS实现圆角DIV

霸气de小男生 提交于 2020-01-09 03:30:27
代码 <! 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 > < meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " /> < title > 纯css圆角div </ title > </ head > < body > < div style = " margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden; " ></ div > < div style = " margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden; " ></ div > < div style = " margin:0 1px; border:1px solid

Codeforces Round #597 (Div. 2)

本小妞迷上赌 提交于 2020-01-07 13:15:52
A.Good ol' Numbers Coloring 题目大意:如果涂成黑色块的块数无限,输出infinite,如果有限,输出finite。 分析:只用判断一下gcd是不是等于1,如果等于1,输出finite,如果不等于1,输出infinite。 代码: def gcd(a, b): if b == 0: return a else: return gcd(b, a % b) t = input() t = int(t) for i in range(t): a, b = input().split() a = int(a) b = int(b) if gcd(a, b) == 1: print("Finite") else: print("Infinite") B.Restricted RPS 题目大意:石头剪刀布的游戏,一个人的出石头剪刀布的情况是已知的,另一个人是未知的,但是你知道另外一个人的出的次数的情况。让你找一种可以让那个人赢的情况,如果不能的话,输出NO,否则输出YES,并输出一种可行的方法。 分析:贪心即可,先尽量让第一个人赢,看看能赢不,再把剩下的往上添就好了。 代码: t = input() t = int(t) for i in range(t): n = input() n = int(n) a, b, c = input().split() a =