一、margin
塌陷现象
给子级加margin-top时想让子移动,但是此时父级会跟随子级一起移动---称为塌陷。
代码
<style>
div.father{ width: 200px; height: 200px; background: #FFC0CB; }
div.son{ width: 100px; height: 100px; background: beige; margin-top:50px; }
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
效果
解决方法(父级+两者选一个)
overflow: hidden; 或者 border: 1px solid #000000;
二、对于浮动起来的元素
position元素中设置absolute和fixed或者float都会脱离文档流
此时切记要加width:100%;
因为块级元素默认width:100%;所以不要忘记加!!
三、对于底部或者自适应结构
都是将固定宽度的padding出去 本身元素再margin一下
不管是设置底部栏 或者是三栏 或者两栏结构
需要自适应的始终都应该是width:100%
四、垂直居中
父级
知道高度
子级
position:relative;
top:50%;
transform:transformY(-50%);
五、css3的@media属性
响应式布局
六、复选框和后面的文字无法对齐
解决办法:
给input标签、文字标签都加
vertical-align:middle;
七、修改滚动条样式
谷歌、safari、qq浏览器、360浏览器滚动条样式
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 10px;
height: 10px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bdbdbd;
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
/*IE滚动条颜色*/
html {
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑块边色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
scrollbar-track-color:#eeeeee;/*背景颜色*/
}
可以根据自己的需求进行更改。
八、table实现头部固定 内容滚动
<style type="text/css">
*{
padding: 0;
margin: 0;
}
table, td, th{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
body{
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
}
tbody{
display:block;height:100px;overflow:hidden;overflow-y: scroll;
}
thead,tbody tr{
display:table;width:100%;table-layout:fixed;
}
::-webkit-scrollbar {display:none}
</style>
<body>
<table>
<thead>
<tr>
<th>d</th>
<th>Lastnamfdfdfdfe</th>
<th>Firstddfdffname</th>
<th>d</th>
<th>Lastnamfdfdfdfe</th>
<th>Firstddfdffname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gates</td>
<td>Bidddddddddddddl</td>
<td>Gates</td>
<td>Gates</td>
<td>Bidddddddddddddddll</td>
<td>Gates</td>
</tr>
<tr>
<td>Gates</td>
<td>Bidddddddddddddddddddll</td>
<td>Gates</td>
<td>Gates</td>
<td>Biddddddddddddl</td>
<td>Gates</td>
</tr>
<tr>
<td>Gates</td>
<td>Bidddddddddddll</td>
<td>Gates</td>
<td>Gates</td>
<td>Biddddddddddddddddddll</td>
<td>Gates</td>
</tr>
<tr>
<td>Gates</td>
<td>Bidddddddddddll</td>
<td>Gates</td>
<td>Gates</td>
<td>Bidddddddddddddll</td>
<td>Gates</td>
</tr>
<tr>
<td>Gates</td>
<td>Biddddddddddd</td>
<td>Gates</td>
<td>Gates</td>
<td>Biddddddddddddddddd</td>
<td>Gates</td>
</tr>
<tr>
<td>Gates</td>
<td>Bidddddddddddddddll</td>
<td>Gates</td>
<td>Gates</td>
<td>Bidddddddddddll</td>
<td>Gates</td>
</tr>
</tbody>
</table>
</body>
::-webkit-scrollbar {display:none}
隐藏滚动条的
**************************************************************************