html css用法总结
margin-right无效解决方法
我们在设置盒子样式或者位置的时候会遇到margin-right没有效果。要怎么解决呢？首先要观察一下设置margin-right的元素有没有设置width属性，width的属性值是什么。
当没有设置width时，width默认为auto：
这时的margin-right是正常显示的；
当width设置为固定值或者百分比时：
margin-right在默认文档标准流中是无效的，要想显示出效果，必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果：
float：left | right；
设置position；
设置display；
margin-bottom无效解决方法
一：定位
margin-bottom是指该元素与其后的兄弟节点之间的距离。如果你在m1下面再加上一行p标签，你会看到，p距离m1之间的距离，就是m1的margin-bottom的值。最外层那个id为box的div，是m1的父级节点，m1的margin-bottom是不会对box产生效果的。
如果要使一个节点相对于某个节点固定在指定位置，应该是bottom（以及top、left和right）属性，但这个要求该节点的position属性是absolute（即绝对定位），且其父节点的position属性为relative（相对定位），则该几点即可相对其父节点定位。比如：
相对父节点定位
二：给父节点一个margin-bottom也可间接实现
给父级设置：
margin-right: 0px;
overflow:hidden;
zoom:100%;
.panel-item{
margin-right: 0px;
overflow:hidden;
zoom:100%;
}
#cont table{
width: 100%;
height: 100%;
margin-top: 10px;
margin-left: 12px;
margin-bottom: 12px;
background-color: papayawhip;
}
margin-right、margin-bottom设置不起作用？
可能是浏览器默认是从左向右渲染
一个div .box默认是左上对齐，所以margin-right、margin-bottom设置不起作用
实现鼠标悬浮
鼠标靠近显示图片，离开隐藏
//在li标签中直接用img无效果，暂时没找到原因，所以用的背景图代替
<div class="hover">
<ul class="ul-one">
<li class="li li-one"></li>
<li class="li li-two"></li>
<li class="li li-three"></li>
</ul>
</div>
.hover{
position: absolute;
right: 0px;
top: 0px;
height: 100%;
}
.ul-one {
margin-top: 24px;
}
.hover li {
margin: 8px 0px;
width: 26px;
height: 20px;
}
.hover .li-one:hover{
background: url('../../images/monitor/tip.png') no-repeat 5px 0px;
background-color: #D9E7FF;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
.hover .li-two:hover{
background: url('../../images/monitor/time.png') no-repeat 5px 0px;
background-color: #D9E7FF;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
.hover .li-three:hover{
background: url('../../images/monitor/echart.png') no-repeat 5px 0px;
background-color: #D9E7FF;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
背景图铺满整个屏幕，随页面大小而变化
一：如果页面大于屏幕时，如果滑动就会出现白板
background: url(../images/banner.jpg) no-repeat;
background-size: 100% 100% ;
第二、页面随内容大小变化而变化的，页面滑动也会铺满页面大小
background: url(../images/banner.jpg) no-repeat;
background-size: 100% 100% ;
background-attachment: fixed;
参考：https://blog.csdn.net/qq_67388028/article/details/123452181
calc用法
calc() 函数用于动态计算长度值。
注意，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>calc 用法</title>
</head>
<style>
main {
position: absolute;
top: calc( 50% - 200px);
left: calc(50% - 200px);
width: 400px;
height: 400px;
border: 1px solid #bbb;
}
/* 相当于 */
/* main {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
width: 400px;
height: 400px;
border: 1px solid #bbb;
} */
</style>
<body>
<main>
mian content
</main>
</body>
</html>
pc端在手机端等比例缩放
不完美，具体看下方链接
<!-- 在手机端等比例缩放 -->
<meta name="viewport" content="width=device-width,intial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
详细参考：[https://www.cnblogs.com/fqh123/p/11723320.html](https://www.cnblogs.com/fqh123/p/11723320.html
标签超出部分隐藏，鼠标悬浮显示全部
<monitor-list-column>
<a class="monitor-a" th:attr="title=${device.devicename}" th:text="${device.devicename}">
</a>
</monitor-list-column>
.monitor-list-column:nth-child(1){
width: 14%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
button标签在form中变为普通的按钮形式
禁止button标签提交form表单，变成普通按钮
button有个type属性，属性值可为button、submit、reset
button=普通按钮，直接点击不会提交表单
submit=提交按钮，点击后会提交表单
reset=表单复位
当button的type属性值为button时，仅做为一个普通的按钮，并不会提交该表单，此时你可以通过js脚本来提交，而form中不需要加onsubmit事件。
图片在固定的div中自适应宽高
<div>
<img src="../../img.png">
</div>
<style>
div{
width:500px;
height:500px;
border:1px solid green
}
div img{
width:100%
height:100%
}
</style>
background的综合用法
background简写属性在一个声明中可设置所有的背景属性。
可设置属性如下:
background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;
background-position: 设置背景图像的位置;
background-size: 设置背景图像的大小;
background-repeat: 指定背景图像的铺排方式;
background-attachment: 指定背景图像是滚动还是固定;
background-origin: 设置背景图像显示的原点[background-position相对定位的原点];
background-clip: 设置背景图像向外剪裁的区域;
background-color: 指定背景颜色。
简写的顺序如下: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip
顺序并非固定, 但是要注意:
background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。
如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值。
/*background: url("/images/board/test_wetness.png") no-repeat 0px 0px / 100% 100%;*/
background: url("/images/board/test_wetness.png") no-repeat 0px 0px / contain;
background是一个复合属性, 可设置多组属性, 每组属性间使用逗号分隔, 其中背景颜色不能设置多个且只能放在最后一组。
如设置的多组属性背景图像之间存在重叠, 则前面的背景图像会覆盖在后面的背景图像上。
代码示例:
padding: 10px;
background: url("image.png") 0% 0%/60px 60px no-repeat padding-box,
url("image.png") 40px 10px/110px 110px no-repeat content-box,
url("image.png") 140px 40px/200px 100px no-repeat content-box #58a;
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
