css笔记（二）——几种常用的模式

标签：css   布局   盒子宽度   

文本垂直居中

对于行内元素，height会自动收缩到包裹住文本的高度，所以不存在这个问题。但是对于block和inline-block等盒子元素，如果设置了height属性，则文本默认会在上方显示。如果希望文本在垂直方向上居中，可以设置line-height属性等于height属性，或者大于height属性

    hello world

div {
    height: 200px;
    line-height: 200px;
}

文本水平居中，图标分列左右两侧

效果是左侧一个小箭头，右侧一个小箭头，日期显示在中间

    
    2014年5月11日
    >

#wrapper{
    text-align: center;
    position: relative;
    width: 200px;
}

#wrapper > span:first-child{
    float: left;
}

#wrapper > span:last-child{
    float: right;
}

为float元素设置width

一般来说，行内元素（如span），会自动收缩以适应文本宽度，为其设置width属性是无效的。但是当span元素被float了之后，就可以为其设置width属性了

盒子有多大

对于块元素，如block和inline-block，如果不设置其width，则会自动扩展到父容器的宽度。此时设置它的padding和border，不会改变盒子的大小（还是和父容器一样宽），但是会缩小content的宽度

    
abc

#parent {
    widht: 200px;
}

#son {
    padding: 1px;
    border: 1px solid black;
}

如果设置了son的width，实际上设置的是content的width，加上border和padding后，实际的宽度会超过父容器

#son {
    width: 200px;
    padding: 1px;
    border: 1px solid black;
}

但是，如果设置box-sizing为border-box，则设置的width就变成了整个盒子的宽度，此时再设置border和padding，又会缩小content的宽度了

#son {
    box-sizing: border-box;
    width: 200px;
    padding: 1px;
    border: 1px solid black;
}

水平排放li

• 1
• 2
• 3
• 4
• 5

ul{
    font-size: 0;
}

li{
    font-size: 1rem;
    display: inline-block;
    width: 20%;
}

div {
    font-size: 0;
}

div > * {
    display: inline-block;
    font-size: 1rem;
    vertical-align: top;
}

div > nav {
    width: 30%;
}

div > div {
    width: 50%;
}

div > aside {
    width: 20%;
}

div {
    display: -webkit-box;
}

div > nav {
    width: 200px;
}

div > div {
    -webkit-box-flex: 1;
}

div > aside {
    -webkit-box-flex: 2;
}