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

搜索
博主信息
博文 18
粉絲 0
評論 0
訪問量 14940
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
210323 CSS 盒子模型 字體圖標 定位
xyphpblog
原創(chuàng)
1089人瀏覽過

盒子模型

在CSS中，HTML元素相當于一個個盒子。
塊級盒子：

  • 換行
  • 占用容器全部寬度（flow從上到下）
  • 有width, height

行內(nèi)盒子：

  • 只占用滿足內(nèi)容需要的寬度（flow從左到右）
  • 忽略width, height
  • 不能包含塊級元素作為子元素

盒子寬度和高度計算

盒子寬度 = 內(nèi)容區(qū)width + (2 x padding) + (2 x border)
盒子高度 = 內(nèi)容區(qū)height + (2 x padding) + (2 x border)

單位

  • px: 絕對單位，固定大小
  • em：相對單位，相對于父節(jié)點字體大小
  • rem: 相對單位，相對于根節(jié)點html字體大小
  • %：相對單位，相對于父節(jié)點大小

頁面初始化：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     /*盒子大小按寬高設定固定，內(nèi)容區(qū)會縮小*/
  6. }
  7. html {
  8.     font-size: 10px; 
  9.       /* 易于計算 */
  10. }

轉(zhuǎn)為標準盒子-內(nèi)容區(qū)作為寬高計算標準

  1. box-sizing: content-box;
  2. background-clip: content-box;

視口

視口 viewport
可視窗口，手機端顯示PC頁面默認980px
單位
vh(view-height)：1vh = 視口高度的1/100
vw(view-width): 1vw = 視口寬度的1/100

margin-left: auto; 盡可能增加左側(cè)空間，向右
margin-right: auto; 盡可能增加右側(cè)空間，向左

  1.         .box {
  2.             width: 50vw;
  3.             height: 50vh;
  4.             margin: 10px auto;
  5.             border: 2px solid;
  6.             color: black;
  7.             background-color: lightblue;
  8.             padding: 5px 10px;
  9.             font-size: 30px;
  10.         }

這個盒子始終占據(jù)視口寬度的一半，高度的一半

字體圖標

引入方式

1 . Unicode

兼容性好

  • 下載字體圖標文件夾放入項目目錄

  • 新建.css文件，定義字體，類

  • 在HTML頁面中引入.css文件

  • 在元素中使用圖標的對應編碼

效果

2 . Font class
方便

第一步：引入項目下面生成的 fontclass 代碼：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑選相應圖標并獲取類名，應用于頁面：
<span class="iconfont icon-xxx"></span>

例：

圖標：

定位

規(guī)則：
position: value;

  • static：默認，即無定位
  • relative：相對于在文檔流中的原始位置，轉(zhuǎn)為定位元素
  • absolute：絕對，脫離文檔流，相對于在文檔流中的原始位置（若無父元素即相對于瀏覽器窗口），轉(zhuǎn)為定位元素
  • fixed：固定位置，相對于瀏覽器窗口，不受滾動影響

定位元素可以設置偏移量
文檔流：顯示順序于書寫順序一致
top
right
left
bottom

例：
原始位置

設為position: static;

設為position: relative;

  1.   .box {
  2.     width: 20em;
  3.     height: 15em;
  4.     background-color: lightcoral;
  5.     position: relative;
  6.     top: 6em;
  7.     left: 6em;
  8.    }


設為position: absolute;

  1.   .box {
  2.     width: 20em;
  3.     height: 15em;
  4.     background-color: lightcoral;
  5.     position: absolute;
  6.     top: 6em;
  7.     left: 6em;
  8.    }


設為position: fixed;

絕對定位應用

absolute 與父級定位元素
若父級非定位元素：

  1. <head>
  2.     <style>
  3.         .box {
  4.             width: 20em;
  5.             height: 15em;
  6.             background-color: lightcoral;
  7.             position: absolute;
  8.             top: 6em;
  9.             left: 6em;
  10.         }
  11.         .parent {
  12.             border: 1px solid black;
  13.             height: 26em;
  14.             /* top: 4em;
  15.             left: 4em; */
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="parent">
  21.         <div class="box"></div>
  22.     </div>
  23.     <!-- <h2>hello world</h2> -->
  24. </body>

若父級為定位元素relative:

  1.    <style>
  2.         .box {
  3.             width: 20em;
  4.             height: 15em;
  5.             background-color: lightcoral;
  6.             position: absolute;
  7.             top: 6em;
  8.             left: 6em;
  9.         }
  10.         .parent {
  11.             border: 1px solid black;
  12.             height: 26em;
  13.             position: relative;
  14.             top: 4em;
  15.             left: 4em;
  16.         }
  17.     </style>

居中

行內(nèi)元素居中

設置行高為容器高度即可

  1.     <style>
  2.         .box {
  3.             width: 20em;
  4.             height: 15em;
  5.             background-color: lightcoral;
  6.             text-align: center;
  7.             line-height: 15em;
  8.         }
  9.     </style>

塊元素居中

注：設置 margin:auto 只能水平居中，因為垂直方向沒有限制，水平方向有限制

  1.  <style>
  2.         .box {
  3.             width: 16em;
  4.             height: 15em;
  5.             background-color: lightcoral;
  6.             text-align: center;
  7.             line-height: 15em;
  8.             position: absolute;
  9.             top: 0;
  10.             bottom: 0;
  11.             left: 0;
  12.             right: 0;
  13.             margin: auto;
  14.         }
  16.         .parent {
  17.             border: 1px solid;
  18.             background-color: lightskyblue;
  19.             width: 26em;
  20.             height: 26em;
  21.             position: relative;
  22.         }
  23.     </style>
  1. <div class="parent">
  2.         <div class="box"></div>
  3.     </div>

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

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

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

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

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