国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

浮動的補(bǔ)充丶文本和字體屬性丶background丶定位

番茄西紅柿 / 2906人閱讀

摘要：英語為了防止用戶電腦里面，沒有微軟雅黑這個(gè)字體。因?yàn)榻^對定位脫離標(biāo)準(zhǔn)流，影響頁面的布局。

一丶浮動的補(bǔ)充

　　浮動的特性:

　　　　1. 浮動的元素脫標(biāo)

　　　　2.浮動的元素互相貼靠

　　　　3.浮動的元素有"字圍"效果

　　　　4.浮動的元素有收縮的效果

　　　　前提是標(biāo)準(zhǔn)文檔流,margin的垂直方向會出現(xiàn)塌陷問題

　　　　如果盒子居中:margin: 0 auto;如果盒子浮動了,margin 0 auto;就不起作用了

　　那我們?nèi)绾巫尭拥暮凶泳又心?

　　　　給浮動盒子加一個(gè)父盒子,設(shè)置寬度跟浮動盒子一樣大小,并且overflow;hidden;設(shè)置該盒子margin: 0 auto;

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮動盒子居中title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 400px;
                height: 300px;
                background-color: red;
            }
            .main{
                width: 100px;
                overflow: hidden;
                margin: 0 auto;
            }
            .child{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                margin: 0 auto;
                float: left;
            }
        style>
    head>
    <body>
        <div class="father">
            <div class="main">
                <div class="child">
                    
                div>
            div>
        div>
    body>
html>
浮動盒子居中

二丶文本屬性和字體屬性

 　　1.文本對齊

　　　　text-align屬性規(guī)定元素中的文本的水平對齊方式

　　　　屬性值: none | center | left | right | justify

　　2.文本顏色

　　　　color 屬性

　　3.文本首行縮進(jìn)

　　　　text-indent屬性規(guī)定元素首行縮進(jìn)的距離,單位建議使用em

　　4.文本修飾

　　　　text-decoration屬性規(guī)定文本修飾的樣式

　　　　屬性值;none | underline(下劃線) | overline(定義文本上的一條線) | line-through(定義穿過文本下的一條線) | inherit(繼承父元素的text-decoration屬性的值)

　　5.行高

　　　　line-height就是行高的意思,指的就是一行的高度 

　　6.字體大小

　　　　font-size表示設(shè)置字體大小,如果設(shè)置成inherit表示繼承父元素的字體大小值

　　7.字體粗細(xì)

　　　　font-weight表示設(shè)置字體的粗細(xì)

　　　　屬性值: none(默認(rèn)值,標(biāo)準(zhǔn)粗細(xì)) | bold(粗體) | border(更粗) | lighter(更細(xì)) | 100~900(設(shè)置具體粗細(xì),400等同于normal,而700等同于bold) | inherit(繼承父元素字體的粗細(xì)值)

　　8.字體系列

　　　　font-family

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

　　　　如果瀏覽器不支持第一個(gè)字體,則會嘗試下一個(gè).瀏覽器會使用它可識別的第一個(gè)值.如果都不支持則顯示宋體.

　　9.行高

　　　　line-height

　　　　單行文本垂直居中:

　　　　　　行高的高度等于盒子的高度,可以使當(dāng)行文本垂直居中,注意只適用單行文本.

　　　　多行文本垂直居中: 

　　　　　　行高的高度不能小于字體的大小,不然上下字之間會緊挨一起

　　10.font-family

　　　　字體設(shè)置需注意:

1.網(wǎng)頁中不是所有字體都能用哦，因?yàn)檫@個(gè)字體要看用戶的電腦里面裝沒裝，
比如你設(shè)置： font-family: "華文彩云"; 如果用戶電腦里面沒有這個(gè)字體，
那么就會變成宋體
頁面中，中文我們只使用： 微軟雅黑、宋體、黑體。 
如果頁面中，需要其他的字體，那么需要切圖。 英語：Arial 、 Times New Roman

2.為了防止用戶電腦里面，沒有微軟雅黑這個(gè)字體。
就要用英語的逗號，隔開備選字體，就是說如果用戶電腦里面，
沒有安裝微軟雅黑字體，那么就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體可以有無數(shù)個(gè)，用逗號隔開。
3.我們要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體，
就自動的變?yōu)楹竺娴闹形淖煮w： 
font-family: "Times New Roman","微軟雅黑","宋體";

4.所有的中文字體，都有英語別名，
我們也要知道： 微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性能夠?qū)ont-size、line-height、font-family合三為一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字號的百分之多少。
一般來說，都是大于100%的，因?yàn)樾懈咭欢ㄒ笥谧痔枴?
font:12px/200% “宋體” 等價(jià)于 font:12px/24px “宋體”; 
反過來，比如： font:16px/48px “宋體”;
等價(jià)于 font:16px/300% “宋體”
字體設(shè)置 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        body{
            text-decoration: underline;
        }
        div{
            width: 200px;
            height: 240px;
            /*line-height: 200px;*/
            background-color:red;
            /*text-align: right;*/
            /*兩端對齊*/
            /*text-align: justify;*/
            /*首行縮進(jìn)*/
            /*text-indent: 2em;*/
            /*font-size: 14px;*/
            /*text-decoration: inherit;*/
            /*font-weight: 800;*/
            /*font-family: "Microsoft Yahei"*/
            /*font-family: 華文行楷*/
            font: 12px/240px 華文行楷;

        }
        a{
            text-decoration: none;
        }
        a:hover{
            text-decoration: line-through;
        }
    style>
head>
<body>
    <div>
        武小豬武小豬
    div>
    <a href="#">百度一下a>
body>
html>
文本屬性和字體屬性

 三丶background

　　background-color 屬性表示背景顏色

　　background-img :表示設(shè)置該元素的背景圖片,默認(rèn)水平和垂直方向都上平鋪

　　background-repeat:表示設(shè)置該元素平鋪的方式

　　　　屬性值:   repeat: 默認(rèn),背景圖像將在垂直方向和水平方向重復(fù)

　　　　　　　　repeat-x :  背景圖像將在水平方向重復(fù)

　　　　　　　　repeat-y : 背景圖像將在垂直方向重復(fù)

　　　　　　　　no-repeat : 背景圖像將僅顯示一次.

　　　　　　　　inherit : 規(guī)定應(yīng)該從父元素繼承 background-repeat屬性的設(shè)置

　　給元素設(shè)置padding之后,發(fā)現(xiàn)padding的區(qū)域也會平鋪背景圖片

　　

　　雪碧圖技術(shù)(精靈圖技術(shù))

CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分

CSS 雪碧圖應(yīng)用原理：
只有一張大的合并圖， 每個(gè)小圖標(biāo)節(jié)點(diǎn)如何顯示多帶帶的小圖標(biāo)呢？

其實(shí)就是 截取 大圖一部分顯示，而這部分就是一個(gè)小圖標(biāo)。

使用雪碧圖的好處：

1、利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因； 
2、CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。 
3、解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。 
4、更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁的風(fēng)格就可以改變。維護(hù)起來更加方便

 

不足：

1）CSS雪碧的最大問題是內(nèi)存使用
2）拼圖維護(hù)比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧調(diào)用的圖片不能被打印
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            div{
                height: 100px;
                width: 200px;
                /*background-color: rgb(0,255,255);*/
                /*background-color: rgba(0,0,0,.6);*/
                background: #999;
            }
        style>
    head>
    <body>
        <div>div>
    body>
html>
background

 四丶定位

　　相對定位 

　　　現(xiàn)象和使用:

　　　　1.如果對當(dāng)前元素僅僅設(shè)置了相對定位,那么與標(biāo)準(zhǔn)流的盒子什么區(qū)別.

　　　　2.設(shè)置相對定位之后,我們才可以使用四個(gè)方向的屬性; top丶bottom丶 left丶right

　　　特性:

　　　　1.不脫標(biāo)

　　　　2.形影分離

　　　　3.老家留坑(占著茅房不拉屎,惡心人)

　　　所以說相對定位在頁面中沒有什么太大的作用.影響我們頁面的布局.我們不要使用相對定位來做壓蓋效果

　　　用途:

　　　　1.微調(diào)元素位置

　　　　2.做絕對定位的參考(父相子絕)絕對定位會說到此內(nèi)容

　　　參考點(diǎn):

　　　　自己原來的位置做參考點(diǎn)

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相對定位title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: green;
                position: relative;
                top: 20px;
                left: 100px;
                /*設(shè)置元素的堆疊順序*/
                z-index: 5;
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: blue;
                position: relative;
            }
            style>
    head>
    <body>
        <div class="box1">div>
        <div class="box2">div>
        <div class="box3">div>
    body>
html>
相對定位

　　絕對定位

　　　特性:

　　　　1.脫標(biāo)  2.做遮蓋效果,提成了層級.設(shè)置絕對定位之后,不區(qū)分行內(nèi)元素和塊級元素,都能設(shè)置寬高.

　　　參考點(diǎn):

　　　　一丶多帶帶一個(gè)絕對定位的盒子

　　　　　　1.當(dāng)我使用top屬性描述的時(shí)候 是以頁面的左上角（跟瀏覽器的左上角區(qū)分）為參考點(diǎn)來調(diào)整位置
　　　　　　2.當(dāng)我使用bottom屬性描述的時(shí)候。是以首屏頁面左下角為參考點(diǎn)來調(diào)整位置。

　　　　二丶以父輩盒子作為參考點(diǎn)

　　　　　　1.父輩元素設(shè)置相對定位，子元素設(shè)置絕對定位，那么會以父輩元素左上角為參考點(diǎn)，這個(gè)父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。

　　　　　　2.如果父親設(shè)置了定位，那么以父親為參考點(diǎn)。那么如果父親沒有設(shè)置定位，那么以父輩元素設(shè)置定位的為參考點(diǎn)

　　　　　　3.不僅僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素為參考點(diǎn)

　　　　　　注意了：父絕子絕，沒有實(shí)戰(zhàn)意義，做站的時(shí)候不會出現(xiàn)父絕子絕。因?yàn)榻^對定位脫離標(biāo)準(zhǔn)流，影響頁面的布局。相反‘父相子絕’在我們頁面布局中，是常用的布局方案。因?yàn)楦赣H設(shè)置相對定位，不脫離標(biāo)準(zhǔn)流，子元素設(shè)置絕對定位，僅僅的是在當(dāng)前父輩元素內(nèi)調(diào)整該元素的位置。

　　　　　　還要注意，絕對定位的盒子無視父輩的padding

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top:40px;
            left:0;
        }
        .box3{
            width: 250px;
            height: 200px;
            background-color: blue;
        
        }
    style>
head>
<body style="height: 2000px;">

    
    <div class="box1">div>
    <div class="box2">div>
    <div class="box3">div>

    
body>
html>
絕對定位 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 992px;
            height: 460px;
            background-color: red;
            float: right;
            /*相對定位*/
            position: relative;
        }
        .prev{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            /*絕對位置*/
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 50%;
            left: 0px;


        }
        .next{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            /*絕對位置*/
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 50%;
            right: 0;
        }
    style>
head>
<body>
        <div class="father">
            <span class="next">>span>
            <span class="prev"><>
        div>
    
body>
html>
父相子絕

 　　如何讓一個(gè)絕對定位的盒子居中

　　　　left:50%

　　　　margin-left:     寬度的一半

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    
    
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 14px;

        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        input{
            border: 0;
            outline: 0;
        }
        .father{
            width: 100%;
            height: 200px;
            background-color: red;
            position: relative

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1779.html

相關(guān)文章

  • 盒模型的屬性丶display顯示丶浮動

    摘要：一丶盒模型的屬性重要是標(biāo)準(zhǔn)文檔流父子之間調(diào)整位置上下左右上下左右上左右下順時(shí)針上右下左三要素線性的寬度線性的樣式顏色實(shí)線小圓點(diǎn)一丶盒模型的屬性(重要) 　　1.padding 　　　　padding是標(biāo)準(zhǔn)文檔流,父子之間調(diào)整位置 DOCTYPE html> padding *{ ...

    番茄西紅柿 評論0 收藏0

  • 利用 Css 制作精美的卡片UI

    摘要：固定塊元素的大小，其中包含我們的圖片，這使我們能夠在滿足尺寸要求的情況下，任何圖片都可用于制作成卡片。字體及其他博文鏈接利用制作精美的卡片源碼鏈接利用制作精美的卡片原文鏈接翻譯墨丶水瓶 本教程將會告訴你如何用 Html 和 Css 實(shí)現(xiàn)卡片界面。教程會重點(diǎn)使用 Css filter 屬性處理圖片，以便給它添加一些過渡效果。 第一步：確定 HTML 代碼結(jié)構(gòu) 在創(chuàng)建 HTML 代碼前，你...

    Ilikewhite 評論0 收藏0

  • 利用 Css 制作精美的卡片UI

    摘要：固定塊元素的大小，其中包含我們的圖片，這使我們能夠在滿足尺寸要求的情況下，任何圖片都可用于制作成卡片。字體及其他博文鏈接利用制作精美的卡片源碼鏈接利用制作精美的卡片原文鏈接翻譯墨丶水瓶 本教程將會告訴你如何用 Html 和 Css 實(shí)現(xiàn)卡片界面。教程會重點(diǎn)使用 Css filter 屬性處理圖片，以便給它添加一些過渡效果。 第一步：確定 HTML 代碼結(jié)構(gòu) 在創(chuàng)建 HTML 代碼前，你...

    NickZhou 評論0 收藏0

  • JVM虛擬機(jī)筆記之運(yùn)行時(shí)數(shù)據(jù)區(qū)域(一)

    摘要：本文參照深入了解虛擬機(jī)周志明，純粹做做筆記，寫寫自己覺得較為重要的內(nèi)容方便理解虛擬機(jī)運(yùn)行時(shí)數(shù)據(jù)區(qū)如下程序計(jì)數(shù)器程序計(jì)數(shù)器寄存器是一塊較小的內(nèi)存空間，看做是當(dāng)前線程所執(zhí)行的字節(jié)碼的行指示器。異常情況也與虛擬機(jī)棧一致。 本文參照深入了解Java虛擬機(jī)-周志明，純粹做做筆記，寫寫自己覺得較為重要的內(nèi)容方便理解 Java虛擬機(jī)運(yùn)行時(shí)數(shù)據(jù)區(qū)如下： showImg(https://segmentf...

    mgckid 評論0 收藏0

  • AngularJs 功能（三）--數(shù)據(jù)綁定丶作用域

    摘要：功能數(shù)據(jù)綁定的雙向數(shù)據(jù)綁定，一方面可以做到變化驅(qū)動了中元素變化，另一方面也可以做到元素的變化也會影響到。其次告訴，對頁面上的這個(gè)進(jìn)行雙向數(shù)據(jù)綁定。第三告訴，在這個(gè)指令模版上顯示這個(gè)的數(shù)據(jù)。作用域是一個(gè)把一個(gè)元素連結(jié)到上的對象。 功能 數(shù)據(jù)綁定 AngularJS的雙向數(shù)據(jù)綁定，一方面可以做到model變化驅(qū)動了DOM中元素變化，另一方面也可以做到DOM元素的變化也會影響到Model。 ...

    joywek 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<