web 前端2 html css一些小问题技巧
html css一些小问题技巧
1 对于儿子块float后，父亲块如果没内容就不见了，如何让父亲块依然跟随飘起了的儿子块撑起来呢？？
用到的属性after方法 公共方法作为继承即可。
1.1 方法1 clear + visibility + height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{
content: '111';
display: block;
clear: both;
visibility: hidden; /* 将块内的内容隐藏visiability隐藏占高度，display：none隐藏不占高度*/
height: 0;
}
/*.clearfix:after{*/
/*content: " ";*/
/*display: block;*/
/*clear: both;*/
/*}*/也可以这种写法
.c{
background-color:red;
}
.c .item{
float:left;
width:30px;
height: 70px;
background-color: green;
}
</style>
</head>
<body>
<div class='c clearfix'>
<div class='item'>123</div>
<div class='item'>456</div>
</div>
</body>
</html>
1.2 方法2 overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .c{
background-color:cadetblue;
} .clearfix{
overflow: hidden;
}
.c .item{
float:left;
width:30px;
height: 30px;
background-color: green;
/*margin-top: 40px;*/
} .test{
background-color: cadetblue;
}
.test:after{
content: "后";
}
.test:before{
content: '前';
}
</style>
</head>
<body>
<div class='c clearfix'>
<div class='item'>123</div>
<div class='item'>456</div> </div> <!--<div class="test">内容</div>-->
</body>
</html>
2 hover控制 其后代 儿子 兄弟变化
hover后面加选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ele{
background-color: #dddddd;
border: 2px solid transparent;先设置好边框让它先是透明的。这样就不会有跳动感。
}
.ele:hover{
border: 2px solid red;
}
.ele:hover .ele-item{
color: red;
}
</style>
</head>
<body>
<div class="ele">
<div>123</div>
<div class="ele-item">123</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ele{
height: 200px;
width: 200px;
overflow: hidden; /* 规定宽度高度后，如果内容超过大小就会隐藏非常重要*/
position: relative; /* 如果子块要用absolute父亲如果不用relative 则会导致 儿子会一直往上 找 一直找到html*/
}
.ele .content{
background: rgba(0,0,0,.6); /*透明度 的表示 a 还可以用opacity*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden; /*隐藏该标签的内容不显示*/
color: white;
text-align: center;
}
.ele:hover .content{ /* 悬浮控制其内部元素 这里一定要是*/
visibility: visible;
}
.ele .content .c1{
font-size: 32px;
padding: 30px 0;
}
.ele .content .c2{
font-size: 18px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="ele">
<div class="img"><img src="1.jpg"></div>
<div class="content">
dsfsa
<div class="c1">Alex</div>
<div class="c2">1000-2000</div>
</div>
</div>
</body>
</html>
hover控制 其后代 儿子 兄弟变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
/*.ss{*/ /*}*/
.bottom{
height: 40px;
width: 500px;
background-color: brown;
border: 1px solid black;
position: relative;
/*z-index: 1;*/
}
.wrapper{
background-color: black;
height: 100px;
width: 100px;
opacity: 0.6;
position: absolute;
bottom: 0;
top: 400px;;
right: 0;
left: 0;
visibility: hidden;
/*display: none;*/
/*z-index: 2;*/
}
.content{
background-color: chartreuse;
width: 200px;
height: 200px;
position: fixed;
top:50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
visibility: hidden;
/*display: none;*/
/*z-index: 3;*/
}
.ss:hover .content{
visibility: visible;
/*display: block;*/
}
.bottom{
cursor: pointer;
} .bottom:hover+.wrapper{
/*display: block;*/
visibility: visible;
}
</style>
</head>
<body>
<div class="ss">
<div class="bottom">
<span>asddddd</span>
</div>
<div class="wrapper">水电费</div>
<div class="content">范德萨</div>
</div> </body>
</html> hover控制 其后代 儿子 兄弟变化
3 fixed 区别 与 relative absolute
位置只有两种情况
fixed 固定在漂浮 以浏览器为边界
absolute一般结合relative 以relative为边界，如果某个定义了absolute的块的父亲没有relative就会向上找，一直找到html，如果遇不到relative
position_fixed_relative_absolute区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position 区别 fixed 和 relative absolute</title>
<style>
.boddd{
height: 2000px;
min-width: 1000px;
width: 100%;
background-color: #9c9c9c;
}
.c1{
width: 600px;
height: 50px;
background-color: #3a1638;
margin: 0 auto;
}
.c2{
width: 50px;
height: 30px;
background-color: goldenrod;
}
</style>
</head>
<body>
<div class="boddd">
<div class="c1" style="position: relative">
<div class="c2" style="position: absolute;bottom: 3px;left: 70px"></div>
</div> <div style="position: fixed;width: 90px;height: 90px;background-color: #1a66b3;bottom: 30px;right: 30px"></div>
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 2000px;background-color: red;">
<div style="position:relative;background-color: green;width: 500px;height:130px;margin: 0 auto;"> <div style="position: absolute;left: 0;bottom: 0;width: 40px;height: 40px;background-color: pink;"> </div>
</div> </div>
<div style="position: absolute;right:10px;bottom:10px;width: 40px;height: 40px;background-color: violet"></div>
</body>
</html>
4 block 和inline-block区别
对于margin来说 margin-top 值为负值则向上飘，margin-left值为负时向左移动。加入某个div在浏览器顶部，使用了margin-top为负值：
block 则会往上飘 会消失一部分
inline-block 则不会动，前提是对body没有做margin操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> </style>
</head>
<body>
<div style="margin-top: -30px; display: inline-block">123</div>
<div style="margin-top: -13px; display: block">123</div>
</body>
</html>
5 引用字体映射文件 font awesomes 文件 作为图标
引用字体映射文件 font awesomes 文件 作为图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css" />
</head>
<body>
<span class="fa fa-cut"></span>
</body>
</html> 引用字体映射文件 font awesomes 文件 作为图标
6 选项的正三角 倒三角变化显示
选项的正三角 倒三角变化显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.up{
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid green;
border-left: 30px solid transparent;
display: inline-block;
}
.down{
border-top: 30px solid green;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
display: inline-block;
}
.c1{
border: 30px solid transparent;
border-top: 30px solid blue;
margin-top: 0px;
display: inline-block;
}
.c1:hover{
border: 30px solid transparent;
border-bottom: 30px solid green;
margin-top: -200px;
}
</style>
</head>
<body>
<div style="background-color: red">
<span class="c1"></span>
<span style="display: inline-block;margin-top: 10px;">1</span>
<span>2</span>
<span style="display: inline-block;">3</span>
</div>
<!--<span style="margin-top: 20px;">1111111</span>-->
<!--<div style="margin-top: -20px;">123</div>-->
<!--<div style="margin-top: -20px;">456</div>-->
<style> </style>
<div>
<div class="menu">
<span>内容</span>
<span class="icon"></span>
<div class="content">
<div>11</div>
<div>22</div>
<div>33</div>
</div>
</div> </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 30px solid transparent;
border-top:30px solid green;
display: inline-block;
margin-top: 40px;
}
.c1:hover{
border: 30px solid transparent;
border-bottom: 30px solid green;
display: inline-block;
margin-top: 10px;
}
</style>
</head>
<body> <div style="height: 100px;background-color: #1a66b3">
<div class="c1"> </div>
</div>
</body>
</html>
我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 20px solid transparent;
border-top: 20px solid red;
display: inline-block;
/*!*border-left: transparent;*!再加一层透明，做出小三角*/
margin-top: 20px; /*计算好高度*/
}
.c1:hover{
border: 20px solid transparent;
border-bottom: 20px solid red;
display: inline-block;
/*border-left: transparent;*/
margin-top: 0;
}
</style>
</head>
<body>
<div class="c1"> </div>
</body>
</html>
7 对于img标签 放在a标签内部 在ie浏览器内显示是有个蓝色的边框的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
border: 0;/*去掉图片的边框*/
}
</style>
</head>
<body>
<a href="http://www.etiantian.org">asdf</a>
<a href="http://www.etiantian.org">
<img style="height: 300px;width: 400px;" src="1.jpg">
</a>
</body>
</html>
8 页面布局 后台管理通用 上、左、右结构。重要
除了标题顶部之外
左侧的 菜单选项 利用absolute并设置 一定固定宽度，
右侧利用absolute并设置left距离左侧的宽度，而右侧则为0即可沾满了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 ;
}
.pg-header{
height: 48px;
background-color: #dddddd;
}
.pg-body .body-menu{
position: absolute;
width: 180px;
background-color: antiquewhite;
left: 0;
}
.pg-body .body-content{
position: absolute;
left: 182px;
right: 0;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="pg-header"> </div>
<div class="pg-body">
<div class="body-menu">
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</div>
<div class="body-content">
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
</div>
</div>
</body>
</html>
9 visibility 的hidden 隐藏内部元素不会使其块高度发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 20px;visibility: hidden;">123</div>
<div style="height: 20px;">345</div> <div style="height: 100px;background-color: red;overflow: auto;">
<h1>sdf</h1>
</div>
</body>
</html>
10 承接第8个点， 后台管理右侧添加滚动条
overflow 为scroll 或者auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 ;
}
.pg-header{
height: 48px;
background-color: #dddddd;
}
.pg-body .body-menu{
position: absolute;
width: 180px;
background-color: antiquewhite;
left: 0;
}
.pg-body .body-content{
position: absolute;
top: 48px;
left: 182px;
right: 0;
bottom: 0;
background-color: blueviolet;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"> </div>
<div class="pg-body">
<div class="body-menu">
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</div>
<div class="body-content">
<h1> </h1>
<h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
<h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
<h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
<h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
<h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
<h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
</div>
</div>
</body>
</html>
11 提示按钮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>第一</td>
<td>第二</td>
<td>
<div style="position: relative;">
<a>删除</a>
<div style="position: absolute;left: 38px;top: -2px;">
<input type="button" value="确定" /> <input type="button" value="取消" />
</div>
</div>
</td>
</tr>
<tr>
<td>第一</td>
<td>第二</td>
<td>
<div style="position: relative;">
<a>删除</a>
<div style="position: absolute;left: 38px;top: -2px;">
<input type="button" value="确定" /> <input type="button" value="取消" />
</div>
</div>
</td>
</tr>
<tr>
<td>第一</td>
<td>第二</td>
<td>删除</td>
</tr>
<tr>
<td>第一</td>
<td>第二</td>
<td>删除</td>
</tr>
<tr>
<td>第一</td>
<td>第二</td>
<td>删除</td>
</tr>
<tr>
<td>第一</td>
<td>第二</td>
<td>删除</td>
</tr>
<tr>
<td>第一</td>
<td>第二</td>
<td>
<div style="position: relative;">
<a>删除</a>
<div style="position: absolute;left: 38px;top: -2px;">
<input type="button" value="确定" /> <input type="button" value="取消" />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
12 弹出的遮罩层的对话框
z-index 和 遮罩层透明度
两种透明表示 opacity 和 rgba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.model{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
z-index: 2;
}
.content{
height: 300px;
width: 400px;
background-color: white;
position: fixed;
top: 50%;
left:50%;先确定中心点位置。在移动
z-index: 3;
margin-left: -200px;
margin-top: -200px;
}
</style>
</head>
<body>
<div style="height: 2000px;background-color: red">
<h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1>
</div>
<div class="model"></div>
<div class="content"></div> </body>
</html> 弹框
13 网页的搜索框内的小人或者小锁或者图片在input最右侧，而且输入不被其遮盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.user{
position: relative;
width: 250px;
}
.user input{
height: 30px;
width: 170px;
padding-right: 30px;/*留出图标的位置*/
}
.user .ren{
position: absolute;
top: 8px;
left: 180px;
}
</style>
</head>
<body>
<div class="user">
<input type="text">
<span class="ren">R</span>
</div>
</body>
</html> 搜索框的锁在框右侧
14 实现事件绑定使得input值加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.up{
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid green;
border-left: 30px solid transparent;
display: inline-block;
}
.down{
border-top: 30px solid green;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
display: inline-block;
}
.c1{
border: 30px solid transparent;
border-top: 30px solid blue;
margin-top: 0px;
display: inline-block;
}
.c1:hover{
border: 30px solid transparent;
border-bottom: 30px solid green;
margin-top: -200px;
}
</style>
</head>
<body>
<div style="background-color: red">
<span class="c1"></span>
<span style="display: inline-block;margin-top: 10px;">1</span>
<span>2</span>
<span style="display: inline-block;">3</span>
</div>
<!--<span style="margin-top: 20px;">1111111</span>-->
<!--<div style="margin-top: -20px;">123</div>-->
<!--<div style="margin-top: -20px;">456</div>-->
<style> </style>
<div>
<div class="menu">
<span>内容</span>
<span class="icon"></span>
<div class="content">
<div>11</div>
<div>22</div>
<div>33</div>
</div>
</div> </div>
</body>
</html>
随记
随记
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
一、知识点的补充 1、 a. 一般情况 .c1 .item{} .c2 .item{} <div class='c1'> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> <div class='c2'> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> b. 公共插件 .box1{} <div> <div class='box1'> 2、clear:both 现象： div clear:both; 问题：不可能每次都在最后添加一个标签 ？？？：某个东西，帮助自动在最后添加标签 3、hover的应用 a. hover后加选择器 b. hover（oh） 4、position fixed 固定在屏幕的某个位置：top left ... relative absolute 5、小尖角 6、图标 图片(PS自己) css 自己画font（fontawsome） 7、a标签中嵌套图片(默认样式) 8、目录 day8 - app - s1.html - s2.hmtl - css - commons.css - script - commons.js - plugin - bootstrap - bxslider - ... 9、important 二、实例讲解 1、后台页面布局 overflow:auto; position: absolute; 2、提示框 边缘标签：relative，absolute 3、Tab display:none 4、登录 relative，absolute padding 5、html+css 6、bxslider 7、加减（JS） 三、答疑 |
加减框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{
content: " ";
display: block;
visibility: hidden;
}
.left{
float: left;
}
.wrap{
width: 200px;
height: 30px;
background-color: #c0cddf;
border: solid #000000 1px;
}
.minus{
height: 30px;
width: 30px;
border: none;
text-align: center;
line-height: 30px;
cursor: pointer; }
.plus{
height: 30px;
width: 30px;
border: none;
text-align: center;
line-height: 30px;
cursor: pointer;手型。鼠标变手型
}
.count input{
padding: 0;
height: 30px;
width: 138px;
/*text-align: right;*/
/*text-align-last: right;*/ 新输入的内容靠右
border: none;
border-right: solid black 1px;
border-left: solid black 1px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="minus left">-</div>
<div class="count left">
<input type="text">
</div>
<div class="plus left">+</div>
</div> </body>
</html>
web 前端2 html css一些小问题技巧的更多相关文章
- web前端篇：CSS使用，样式表特征，选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...
- [转] Web前端优化之 CSS篇
原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...
- web前端-----第二弹CSS
web前端之CSS样式 CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ...
- web前端教程：CSS 布局十八般武艺都在这里了
CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...
- 4. web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- Web前端基础(4):CSS(一)
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
随机推荐
- STM32F407 跑马灯实验
1.库函数版本调用的函数有哪些?对应的源文件/头文件是哪个? 库函数 源文件 头文件 RCC_AHB1PeriphClockCmd(RCC_AHB1Periph_GPIOF, ENABLE) stm3 ...
- MySQL简版（二）
第一章 表的约束 1.1 概念 对表中的数据进行限定,保证数据的正确性.有效性和完整性. 1.2 分类 主键约束:primary key. 非空约束:not null. 唯一约束:unique. 外键 ...
- AGC015做题记录
C 树的性质是点-边=1 森林联通块计数都可以这么做所以直接维护前缀和再把边界处理一下就好了 //Love and Freedom. #include<algorithm> #includ ...
- 关于让左右2个DIV高度相等
哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一 以下是代码: <!DOCTYPE html><html lang="en ...
- Eclipse Debug模式的开启与关闭问题简析_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 默认情况下,eclipse中右键debug,当运行到设置的断点时会自动跳到debug模式下.但由于我的eclipse环境 ...
- js中的 与和或 , && ,||
|| 1.只要"||"前面为false,不管"||"后面是true还是false,都返回"||"后面的值. 2.只要"||&quo ...
- Alter改变终结
#alter#删除date列但若表中只有一个字段无法使用drop删除ALTER TABLE z_staff_info_copy1 DROP `date`;ALTER TABLE z_staff_inf ...
- 【BZOJ2460】元素（拟阵）
题意:给定n个物品,每个物品有属性x和价值y,要求从中选出一些使得价值和最大并且其中没有属性xor和为0的非空子集 n<=1000,x<=1e18,y<=1e4 思路:没有xor和为 ...
- Java如何进行Base64的编码(Encode)与解码(Decode)
关于base64编码Encode和Decode编码的几种方式 Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便 ...
- RabbitMQ绑定、队列、消息、虚拟主机详解（五）
Binding:绑定,Exchange和Exchange.Queue之间的连接关系 Binding中可以包含RoutingKey或者参数 Queue:消息队列,实际存储消息数据 Durability: ...