亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 9
粉絲 3
評(píng)論 0
訪(fǎng)問(wèn)量 16271
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
12-25作業(yè)--flex布局——子元素在父元素里面的定位
十年一夢(mèng)
原創(chuàng)
3659人瀏覽過(guò)

flex 布局——子元素在父元素中的定位

1、子元素的寬度，子元素在分配父元素剩余空間之前的寬度

  • flex-basis:auto; 默認(rèn)值，在子元素css中定義的類(lèi)似width:100px;這個(gè)寬度;
  • flex-basis:80px; 自定義的值，可以取代width:100px;中定義的寬度;
  • flex-basis:20%; 當(dāng)寬度定義為百分比的時(shí)候，這個(gè)百分比是相對(duì)父元素比較的，比如父元素width:100px;那么這個(gè)子元素的寬度就是20px;
  • flex-basis的優(yōu)先級(jí)大于width,并且可以用min-width設(shè)定子元素的最小寬度；

    2、子元素的擴(kuò)展，繼承和分配父元素的剩余空間

  • flex-grow：數(shù)值 可以設(shè)定子元素所分配父元素剩余空間的比例，這個(gè)數(shù)值可以是整數(shù)，也可以是百分比；

    3、子元素的收縮，當(dāng)父元素寬度不夠的情況下收縮的比例

  • flex-shrink:數(shù)值可以設(shè)定子元素收縮比例，這個(gè)數(shù)值可以是整數(shù)也可以是百分比，0是不收縮；

    4、flex: flex-grow flex-shrink flex-basis上三種設(shè)置的簡(jiǎn)寫(xiě)

  • 首個(gè)位置flex-grow是控制要不要 擴(kuò)展，分不分配父元素剩余空間；
  • 第二個(gè)位置flex-shrink 控制子元素在父元素空間不足的時(shí)候 要不是收縮；
  • 第三個(gè)位置flex-basis設(shè)定子元素的寬度；

    5、align-self: 設(shè)置單獨(dú)子元素在父元素交叉軸的對(duì)齊方式，如圖；

6、order:數(shù)字 是設(shè)定子元素排序的位置，默認(rèn)是先寫(xiě)在前，order數(shù)值越小越靠前，如圖；

組件開(kāi)發(fā)嘗試

公共頭部部分puplic_header.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共頭部</title>
  6.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  7.     <link rel="stylesheet" href="public_header.css">
  8. </head>
  9. <body>
  10. <div class="public-header">
  11.     <a href="">網(wǎng)站首頁(yè)</a>
  12.     <a href="">二手交易</a>
  13.     <a href="">房屋出租</a>
  14.     <a href="">兼職招聘</a>
  15.     <a href="">網(wǎng)站導(dǎo)航</a>
  16.     <span>
  17.         <a href=""><i class="iconfont icon-huiyuan2"></i>登錄</a>
  18.         <a href="">免費(fèi)注冊(cè)</a>
  19.     </span>
  20. </div>
  22. </body>
  23. </html>

公共頭部初始化public_reset.css部分

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     font-size: 13px;
  7.     color: #555555;
  8.     background-color: #efefef;
  9. }
  10. a{
  11.     text-decoration: none;
  12.     color: #404040;
  13.     font-size: 13px;
  14. }
  15. li{
  16.     list-style: none;
  17. }

公共頭部public_header.css部分

  1. @import "../public_reset.css";
  2. /*公共頭部導(dǎo)航*/
  3. .public-header {
  4.     height: 44px;
  5.     background-color: #000000;
  6.     padding: 0 20px;
  7.     display: flex;
  8.     flex-flow: row nowrap;
  9. }
  10. .public-header a {
  11.     line-height: 44px;
  12.     color: #cccccc;
  13.     padding: 0 10px;
  14. }
  15. .public-header > a:hover{
  16.     color: #000000;
  17.     background-color: #ffffff;
  19. }
  20. .public-header > span {
  21.     margin-left: auto;
  22. }
  23. .public-header > span i {
  24.     font-size: 16px;
  25.     color: #cccccc;
  26.     padding-right: 10px;
  27. }

公共大標(biāo)題public_headline.html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_headline.css">
  6.     <title>公共大標(biāo)題</title>
  7. </head>
  8. <body>
  9.     <div class="public-headline">
  10.         <span>二手交易</span>
  11.     </div>
  12. </body>
  13. </html>

公共大標(biāo)題public_headline.css文件

  1. @import "../public_reset.css";
  2. .public-headline {
  3.     padding: 30px;
  4.     text-align: center;
  5. }
  6. .public-headline > span{
  7.     font-size: 30px;
  8.     font-weight: bold;
  9.     padding-bottom: 10px;
  10.     border-bottom: 2px solid red;
  11. }

總結(jié)：

組件開(kāi)發(fā)大概就是把復(fù)制的頁(yè)面分拆開(kāi)來(lái)制作然后組裝起來(lái)，這樣的好處就是標(biāo)準(zhǔn)化，分散化，能流水線(xiàn)似的生成網(wǎng)頁(yè)，可以做分工配合完成一個(gè)項(xiàng)目，在查錯(cuò)方面也可以那個(gè)錯(cuò)誤找那個(gè)組件。也利于以后做頁(yè)面修改的時(shí)候，不需要在做整體整改，方面快捷，可重復(fù)性強(qiáng)；
手寫(xiě)部分：

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：寫(xiě)得不錯(cuò), 特別是配的圖, 非常直觀(guān)
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線(xiàn)php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)