入门项目
- a标签内容超出div
设置a标签line-height: 40px;
设置overflow:hidden;/* 将超出部分隐藏 */ - 如何让图片在其所在的div中居中
text-align:center;可以使其水平居中 - 加了边框以后div也会变大
box-sizing：content-box | border-box;
默认值：content-box
content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) - 给a标签添加hover距离边框有空隙
- 2个div使用inline-block放在一行，其中一个会下降
position: absolute; - 清除浮动
.clear{
clear:both;
}
<div class="clear">额外标签法</div>
- 设置hr（一条直线）的样式：
hr{
background-color: red;
height:1px;
border:none;
} - div中加入p标签，p标签填写内容不换行，超出！
p标签中不要只写纯连续英文或者符号（*****#####）
连续英文会算做一个单词
连续的输入英文或者是数字，就会产生这个问题。如果正常的中文就不会产生这种问题。
也可以在p标签中加入语句：word-break:break-all; - 为图片增加阴影效果，想要四周都有，但是只有右边下边有
box-shadow: -10px -10px 5px #888888;
上左
box-shadow: 10px 10px 5px #888888;
下右
box-shadow: #666 0px 0px 10px;
四周
box-shadow: 0px 0px 10px #a8a8a8;
内部阴影：
box-shadow:10px 10px 50px 20px pink inset;
可参考链接：阴影
注：前两个为方向，第三个为虚化程度 - margin：auto失效
要给居中的元素一个宽度，否者无效。
毕设项目
- 图片没有全部显示在框中
background-size:100% 100%;
注：background-size必须在url后才会有效 - 图片拉伸，显示不正常
background-size:cover;
min-height: 900px;
以上设置只显示了符合的一部分，可能不会显示全部，可以通过设置min-height来显示 - 外层div不包含里边图片和内容
清除之前的浮动！！！
位置：放在出现问题的外层div里面（可能外面也要加，但是先加里面看能不能解决）！
<div class="clear"></div>
.clear{ clear:both}
- 运行网页总是跳转到最下面
最下方使用了代码：<iframe src="#"></iframe>
把#删除即可 - 在div中添加图片设置长宽，大小与图片不一致，图片被挤压变形
设置object-fit：object-fit:cover;，再设置图片的长宽即可 - 进入html文件总是闪一下frame然后在显示首页
frame该插件不稳定，不建议使用 - 图片添加蒙版阴影，背景图片
在添加图片的div中在加一层div，如：
<div class="wrap">
<div class="wrap-mask">。。。</div>
</div>
设置css：
height:100%;
width:100%;
background: rgba(0,0,0,.4);
- 将图片超出div部分隐藏
overflow: hidden; - 内部div如何无视外部divpadding
将想要无视的css改到内置css中 - a标签转的时候打开新的页面
给a标签加一个属性： target=“_blank” - a标签设置任何时候都没有下划线
a:link,a:visited,a:hover,a:active{text-decoration:none;} - 空格表示方式：
不换行空格
  是1/2个中文宽度
  正好是1个中文宽度
  窄空格，em之六分之一宽。
‌
‍
- 设置行间距
line-height: 40px; - 设置透明度（可能在某些用地换一种方法就能实现）：
opacity: 0.3;
或者
rgba（0，0，0，0.3）
- 点击某个div显示另一个div的内容：
值得注意的是！！！script最好在最后写，要不然不起作用
一般script标签会被放在头部或尾部。头部就是里面，尾部一般指里
html部分：
<input type="button" value="显示div1的内容" id="btn" />
<div id="div1" style="display:none">div1</div>
<div id="div2" style="display:none">div2</div>
<div id="show-box"></div>
js部分
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var btn = document.getElementById("btn");
var showBox = document.getElementById("show-box");
//方法一:将div中的值赋值到一个用于显示的框中（showBox）
var flag = true;
btn.onclick = function() {
if (flag) {
showBox.innerHTML = div1.innerHTML;
btn.value = "显示div2的内容"
flag = false;
} else {
showBox.innerHTML = div2.innerHTML;
btn.value = "显示div1的内容"
flag = true;
}
}
//方法二:用按钮控制div1,div2的显示隐藏
var flag = true;
btn.onclick = function() {
if (flag) {
div1.style.display = "block";
div2.style.display = "none";
btn.value = "显示div2的内容"
flag = false;
} else {
div2.style.display = "block";
div1.style.display = "none";
btn.value = "显示div1的内容"
flag = true;
}
}
- z-index的必要条件：
要给元素设置一个postion（除默认值static以外的元素）
对父容器设置z-index - 一次性设置好边框参数：
border:5px solid red; - span设置宽度width无效：
添加display后才有效，CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略
.right ul.comment li span{
display:inline-block;
width: 60px;
}
- 按钮样式css：
/*边框*/
border: 2px solid #1B47A4;
/*圆角*/
border-radius: 10px;
/*背景渐变*/
background: -moz-linear-gradient(top, #2564EE, #225CD2);
background: -webkit-linear-gradient(top, #2564EE, #225CD2);
/*阴影*/
box-shadow: 0 0 10px #0F2B67, 0 3px 2px #327CFF inset;
font-size: 20px;
color: #fff;
/*文本阴影*/
text-shadow: 0 0 10px #12337A;
- 点击a标签不执行任何操作，但要点击：
href='javascript:;' - 弹框登录注册：
html：
<!-- 登录 -->
<div class="signin" id="popup-1">
<div class
最低0.47元/天 解锁文章
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
