zoukankan      html  css  js  c++  java
  • 字体、文本属性和背景图定位

    1、让浮动的盒子居中

    如果盒子居中:margin:0 auto;如果盒子浮动了,margin:0 auto;就不起任何作用
    让浮动的盒子居中
        给浮动盒子加一个父盒子,设置宽度跟浮动盒子一样大小,并且overflow:hidden;设置该盒子margin:0 auto
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 400px;
                height: 300px;
                background-color: red;
            }
            .main{
                width: 100px;
                overflow: hidden;
                margin: 0 auto;
            }
            .child{
                width: 100px;
                height: 100px;
                background-color: green;
                margin: 0 auto;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="main">
                <div class="child">
                
                </div>
            </div>
        </div>
        
    </body>
    </html>

    2、文本属性

    文本水平居中:text-align:center(中心对齐),justify(两端对齐)
    文本垂直居中:行高=盒子高度 line-height
    文本首行缩进:text-indent:1em(表示和当前字体大小一样)
    字体大小:font-size:16px
    字体系列:font-family:"微软雅黑"
    文本修饰:
        text-decoration:规定文本修饰的样式
        none(默认),underline(下划线),overline(文本上一条线),line-through(穿过文本下的一条线),inherit(继承父元素的值)
    font属性能够将font-size、line-height、font-family合三为一:font:12px/30px "微软雅黑","SimSun"

     3、背景图设置和定位

    背景图:background-image:url(./xxx.jpg)
    背景图水平平铺和垂直平铺:background-repeat:repeat-x,repeat-y
    背景图不平铺:background-repeat:no-repeat
    背景图定位:background-position-x:,background-position-y:,正数定位图片位置,负数为精灵图
    背景图固定:background-attachment:fixed
    综合属性:background:url(xxx.png) no-repeat 0 -162px

    4、定位

    默认:position:static;静态定位
    position:relative;相对定位,可以设置上下左右位置,参考与原来的位置
    position:absolute;绝对定位,如果父盒子设置相对定位,子盒子设置绝对定位,以父盒子的0,0为参考点
  • 相关阅读:
    POJ 2136
    POJ 2121
    POJ 2127
    POJ 2126
    POJ 2109
    POJ 2105
    POJ 2101
    POJ 2075
    Uboot — 配置过程
    Uboot — 编译体验
  • 原文地址:https://www.cnblogs.com/P-Z-W/p/11265745.html
Copyright © 2011-2022 走看看