1、div垂直居中:
1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行:
parentElement{
position:relative;
}
childElement{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
2.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可
parentElement{
height:xxx;
}
.childElement {
position: relative;
top: 50%;
transform: translateY(-50%);
}
demo: Edit fiddle - JSFiddle
Flex 布局:
不考虑兼容老式浏览器的话,用Flex布局简单直观一劳永逸:
parentElement{
display:flex;/*Flex布局*/
display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
}
2、文本过长用省略号显示
text-overflow: ellipsis;
3、input圆角处理后,获取焦点时,去除直角边框
outline: none;
4、文本超出宽度自动换行
html中超出盒子宽度会自动换行的,不用设置,如果你连续的英文之间没用空格,那么它会以为是一个单词,就不会换行,这个时候加上
word-break: break-all;
word-wrap:break-word;
就可以了。
5、容器内的两部分内容一个居左一个居右
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
6、实现内容多栏布局(类似报纸排版效果)
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #F00;
7、滚动条超出部分滚动,并隐藏滚动条
#box::-webkit-scrollbar {
display: none;
}