1、常用display
:none /*不显示,不占位*/
:inline /*行内*/
:block /*块*/
:flex /*弹性*/
:flow /*流式布局*/
:grid /*网格布局*/
2、position:
:static //无定位
3种最常用的定位
:relative //相对定位,相对同级元素位置的定位调整
:fixed //固定定位,相对窗口的定位调整
:absolute //绝对定位,相对父级position的定位调整
position属性
top/bottom/left/right
3、float
漂浮,最初用来实现文字环绕图片
如
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
漂浮在左上角使用clear:left 消除环绕,将下一个元素置于float元素之后
当图片比文字元素高时,图片会溢出到容器外面,此时使用
overflow:auto
使文字元素和图片等高。
4、@media
响应式设计
让网页根据不同的浏览器和设备呈现不同的显示效果。
@media screen and (min-width:600px) {}
@media screen and (max-width:599px) {}
5、flex
flex 弹性盒,很强大的布局方式
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
.container {
display: -webkit-flex;
display: flex;
}
/*空间足够的时候,宽度是200px,如果空间不足,变窄直到最窄100px。*/
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
/*无论窗口如何变化,宽度一直是200px。*/
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
/*占满剩余宽度的1/3。*/
.flex1 {
-webkit-flex: 1;
flex: 1;
}
/*占满剩余宽度的2/3。*/
.flex2 {
-webkit-flex: 2;
flex: 2;
}
使用 Flexbox 的居中布局(垂直居中)
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
6、ccs选择器
id选择器(#)、类选择器(.)、标签选择器(body/div/h)、通配符(*)、子选择器(ul>li)、相邻选择器(h1+p)、后代选择器(li a)、伪类选择器(:hover,:focus)、属性选择器(a[rel="external"])。
7、css属性继承
可继承:text-*/font-*/line-*/display/color/
不可继承:border/padding/margin/width/height
8、居中
div:
margin:0 auto
浮动元素的上下左右居中: width: 100px;
height:100px;
float:left;
position:absolute;
left: 50%;
top:50%;
margin:-100px 0 0 -100px;
flexbox垂直/左右居中:上文flex布局
9、box-sizing属性
css的盒子模型。
context-box:标准盒子模型,宽度=内容宽度(content)+border+padding+margin,设置width/height指的是content部分的宽高,默认使用此模型。
border-box:IE传统盒子模型,宽度=内容宽度(content+border+padding)+margin,设置width/height指的是content+border+padding宽高。此盒子模型使用更直观。
10、display:table、display:table-cell 一起使用实现垂直居中
11、text-overflow 失效
.text-overflow-template{
display: block;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
失效时,需要设置父级节点宽度。
没有display:block和overflow:hidden不会隐藏多余内容,没有white-space:nowrap会自动折行。