字體、文本屬性和背景圖定位

時間 2019-11-18

原文原文鏈接

一、讓浮動的盒子居中html

若是盒子居中：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>

二、文本屬性性能

文本水平居中：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"

三、背景圖設置和定位字體

背景圖：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

四、定位url

默認：position：static；靜態定位
position：relative；相對定位，能夠設置上下左右位置，參考與原來的位置
position：absolute；絕對定位，若是父盒子設置相對定位，子盒子設置絕對定位，以父盒子的0,0爲參考點

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。