都是自己写html时遇到过的问题
html页面的元素有好多，分块儿级元素，行内元素，行内块儿级元素
块儿级元素 ：像div，p，h这种的，不管宽是多少都占一整行
行内元素：像span，a，label啊，i这种的，如果写好几个就挨着排队，而且width、margin-top,margin-bottom、padding-top对行内元素都没有用，
padding-left,right,bottom和margin-left、margin-right是好用的，也就是margin的竖直方向上数值无效，padding只有padding-top数值无效
1.子债父偿：
一个父元素margin：0；子元素给定margin-top:10px;margin-top会出现在父元素上
eg:
<style>
.father{
width:300px;
height:300px;
margin:0;
}
.son{
width:200px;
height:200px;
margin-top:10px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
解决方法：
- 给父级添加一个border；
- 给父级添加一个新的属性overflow:hidden;
- 不适用margin，在父级中使用padding-top。
2.display:inline-block 小bug
- inline-block元素之间存在空白间隙（原因行内标签回车、换行、或者制表位的空白产生的）
解决方法：
1.父级标签添加font-size:0;
2.两个标签之间的换行注释掉 - inline-block元素错位
解决方法： vertical-align:middle;//必须是行内元素之间才能居中，浮动的元素不能对齐
3.select清除默认样式
select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding-right:15px;
}
select::-ms-expand { //清除ie的默认下拉框样式 隐藏下拉箭头
display: none;
}
4.table增加列，表格自动延伸，防止表格拥挤，并且超出显示滚动条
能显示滚动条，table需要套一个div，用来超出显示滚动条
thead th{ //通过防止文字换行来实现表格自动延伸
white-space：nowrap；
overflow:visible;
}
5.table内的标签始终贴在td上边，给td vertical-align:top; 靠下同理 bottom
6.带滚动条的div里面的元素滚动到可视区域 （跳转生硬，没有过度动画，用到的地方不多）
document.getElementById(id).scrollIntoView(); //只能用dom获取，不能用jq获取元素
<style>
.test-ul{
margin: 0 auto;
height: 100px;
overflow: auto;
}
.test-ul li{
line-height: 40px;
}
</style>
<a href="javascript:void(0)" onclick="scrollToview();">滚动</a>
<ul class="test-ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li id="aa">9</li>
<li>10</li>
</ul>
<script>
function scrollToview() {
document.getElementById('aa').scrollIntoView();
}
</script>
7、整个页面滚动到顶部
window.scrollTo({
left: 0,
top: 0,
behavior: 'smooth'
})
8、IE11下 table tr visibility:hidden 时，td内容隐藏，边框不会隐藏，需要另外隐藏border:none;（牛逼公司谁还管IE了，这条可忽略）
9、触发fixed定位弹窗的a标签不能用href=“#”，否则会跳回页面顶部，用javascript：void(0)[推荐，没有href的话，多次点击a会出现文字选中效果]或者去除href
后来发现文字选中效果css是可以去掉的
div,span{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
10、word-break，word-wrap，white-space
word-break
break-all 文字换行，允许在单词内换行,单词可能会被截断
keep-all 只能在半角空格或连字符处换行。
word-wrap
break-word 文字换行，英文单词过长时，整体换到下一行
white-space处理空白
nowrap 不换行，直到遇见br（默认多个空格按一个空格处理的）
pre 不换行，正常显示空格
pre-wrap 保留空格，正常换行
pre-line 合并空格变成一个空格，保留编辑器写的换行符（即写代码时的回车换行）
normal 多个空格按一个空格处理
overflow-wrap:break-word;
11、多行超出省略（不管IE，IE对css3兼容差）
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
12、radio、checkbox按钮样式太丑
如果没用ui框架的话，html自带的radio或者checkbox的效果还是不太好看的，这就得自己硬上了
去掉radio、checkbox的默认表现效果，用背景图片替代选中和未选中的效果，这里只给了radio，checkbox同理
input[type=radio]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../images/radio1.png") no-repeat center;
padding: 0;
-webkit-background-size: 100%;
background-size: 100%;
}
input[type=radio]:checked{
background: url("../images/radio2.png") no-repeat center;
-webkit-background-size: 100%;
background-size: 100%;
}
13、滚动条样式
/*滚动条样式*/
::-webkit-scrollbar{
width:8px;
height:8px;
}
::-webkit-scrollbar-track{
background: #f6f6f6;
border-radius:4px;
}
::-webkit-scrollbar-thumb{
background: #aaa;
border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
background: #747474;
}
::-webkit-scrollbar-corner {
background: #f6f6f6;
}
14、高德地图android获取地理位置失败 (没试验过，因为我没失败)
15、未知宽高图片在div内左右居中
我是在banner图的时候遇到的，有时候banner图比较大，小屏幕的时候图片是从左向右铺的，并不是居中，这个办法可以让大图片在小屏幕上也左右居中
.banner{
width: 100%;
min-width: 1200px;
margin: 0 auto;
text-align: center;/*划重点*/
overflow: hidden;/*划重点*/
}
.banner img{
width: 1920px;
margin:0 -100%;/*划重点*/
}
16、左右元素始终居中对齐（flex布局实现的，这时候才尝到flex的香，我真是太菜了）
父级标签样式：
display: flex;
-webkit-align-items: center;
align-items: center;
17、placeholder 字体颜色
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
font-size: 16px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
font-size: 16px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
font-size: 16px;
}
18、单边阴影
勤勤恳恳搬砖人，百度是个好东西
.left{
box-shadow:-5px 0 10px -5px #00ff00;
}
.bottom{
box-shadow:0 5px 10px -5px #00ff00;
}
.right{
box-shadow:5px 0 10px -5px #00ff00;
}
.top{
box-shadow:0px -5px 10px -5px #00ff00;
}
.left-top{
box-shadow:-5px -5px 10px -4px #00ff00;
}
.right-top{
box-shadow:5px -5px 10px -4px #00ff00;
}
.left-bottom{
box-shadow:-5px 5px 10px -4px #00ff00;
}
.right-bottom{
box-shadow:5px 5px 10px -4px #00ff00;
}
.no-left{
/* .right-bottom,.right-top组合 */
box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px #00ff00;
}
.no-bottom{
/* .left-top,.right-top组合 */
box-shadow:-5px -5px 10px -4px #00ff00,5px -5px 10px -4px #00ff00;
}
.no-right{
/* .left-top，.left-bottom组合 */
box-shadow:-5px -5px 10px -4px #00ff00,-5px 5px 10px -4px #00ff00;
}
.no-top{
/* .left-bottom,,right-bottom组合 */
box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;
}
19、按钮hover从左到右颜色过渡
继续搬砖
.fpMore a {
font-size: 16px;
display: inline-block;
background-color: #ededed;
width: 169px;
height: 41px;
line-height: 41px;
text-align: center;
border-radius: 20.5px;
/*重点*/
position: relative;
transition: all 0.3s ease;
z-index: 1;
overflow: hidden;
}
/*重点*/
.fpMore a:after{
position: absolute;
content: '';
width: 0;
height:100%;
top:0;
right:0;
background: #d6d6d6;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: -1;
border-radius: 20.5px;
}
/*重点*/
.fpMore a:hover:after{
width:100%;
left:0;
}
20、css画三角形
我再搬
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
21、坑还是要自己踩过才能印象深刻啊，后续补充继续在文档里加（搬砖使我快乐）
扫一扫
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
