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为参考点
  • 相关阅读:
    Canvas API
    Lind.DDD.Aspects通过Plugins实现方法的动态拦截~Lind里的AOP
    Lind.DDD.LindMQ~关于持久化到Redis的消息格式
    MongoDB学习笔记~根据子集合里某个属性排序
    大叔最新课程~MVC核心技术剖析
    大叔最新课程~EF核心技术剖析
    hdu4300之KMP&&EKMP
    HDU 2594 Simpsons’ Hidden Talents KMP
    邮箱工具(尚未完成)的几个组件类
    java--折半查找
  • 原文地址:https://www.cnblogs.com/P-Z-W/p/11265745.html
Copyright © 2011-2022 走看看