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>
解决： 1.给父级添加一个border；
2.给父级添加一个新的属性overflow:hidden;
3. 不适用margin，在父级中使用padding-top。
2.display:inline-block
bug1:inline-block元素之间存在空白间隙（原因行内标签回车、换行、或者制表位的空白产生的） 1、font-size:0; 2、两个标签之间的换行注释掉
bug2: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增加列，表格自动延伸，防止表格拥挤，并且超出显示滚动条
thead th{ //通过防止文字换行来实现表格自动延伸
white-space：nowrap；
overflow:visible;
}
5.让div的滚动条始终贴在屏幕底部
让div相对于body绝对定位{
position:absolute;或fixed
bottom:0;
top，left，right根据具体情况赋值
}
6.table内的标签始终贴在td上边，给td vertical-align:top; 靠下同理 bottom
7.带滚动条的div里面的元素滚动到可视区域 document.getElementById(id).scrollIntoView(); //只能用dom获取，不能用jq获取元素
8.offset()获取距离时，该元素必须是可见元素
9.IE11下 table tr visibility:hidden 时，td内容隐藏，边框不会隐藏，需要另外隐藏border:none;
10、触发fixed定位弹窗的a标签不能用href=“#”，否则会跳回页面顶部，用javascript：void(0)[推荐，没有href的话，多次点击a会出现文字选中效果]或者去除href
11、word-break：break-all 文字换行，允许在单词内换行,单词可能会被截断
keep-all 只能在半角空格或连字符处换行。
word-wrap:break-word 文字换行，英文单词过长时，整体换到下一行
white-space：处理空白 nowrap 不换行，直到遇见br（默认多个空格按一个空格处理的）
pre 不换行，正常显示空格
pre-wrap 保留空格，正常换行
pre-line 合并空格变成一个空格，保留编辑器写的换行符（即写代码时的回车换行）
normal 多个空格按一个空格处理
overflow-wrap:break-word;
12、多行超出省略
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
13、ios单选按钮太丑
input[type=radio]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../web-images/radio1.png") no-repeat center;
padding: 0;
-webkit-background-size: 100%;
background-size: 100%;
}
input[type=radio]:checked{
background: url("../web-images/radio2.png") no-repeat center;
-webkit-background-size: 100%;
background-size: 100%;
}
14、滚动条样式
/*滚动条样式*/
::-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;
}
15、高德地图android获取地理位置失败 (没试验过)
<meta name="referrer" content="never">
16、未知宽高图片在div内左右居中
.banner{
width: 100%;
min-width: 1200px;
margin: 0 auto;
text-align: center;/*划重点*/
overflow: hidden;/*划重点*/
}
.banner img{
width: 1920px;
margin:0 -100%;/*划重点*/
}
17、左右始终居中对齐
父级标签样式：
display: flex;
-webkit-align-items: center;
align-items: center;
子级标签正常display:block;就可以
18、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;
}
19、单边阴影
.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;
}
20、按钮hover从左到右颜色过渡
.lx_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;
}
/*重点*/
.lx_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;
}
/*重点*/
.lx_fpMore a:hover:after{
width:100%;
left:0;
}
21、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;
}
扫一扫
565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
