[关闭]
@wangyupu 2020-05-21T06:09:24.000000Z 字数 4220 阅读 22

HTML55+CSS第六章笔记主讲盒子模型

HTML5+CSS

本章目标

  1. 理解盒子模型及其构成
  2. 会计算盒子模型尺寸
  3. 会使用盒子模型的两种解析方式来布局网页
  4. 会使用圆角属性给网页元素添加圆角效果
  5. 会使用盒子阴影属性给网页元素添加阴影效果

必须要知道的几个单词

  1. margin                      边距
  2. background-color            背景颜色    
  3. background-image            背景图片
  4. padding                     内边距
  5. content                     内容
  6. border                      边框

去掉自带的模型边框

  1. *{
  2.     padding：0；
  3.     margin：0；
  4. }

边框

  1. border-color
  2. | 属性          |  说明      |  示例      |
  3. | --------      | -----:  | :----:  |
  4. |border-top-color     | 上边框颜色 |   border-top-color:#369;     |
  5. | border-right-color |   右边框颜色  |   border-right-color:#369;  |
  6. | border-bottom-color|下边框颜色|border-bottom-color:#fae45b; |
  7. |border-left-color|左边框颜色|border-left-color:#efcd56; |
  8. |border-color |四个边框为同一颜色|border-color:#eeff34;|
  9. |border-color|上、下边框颜色：#369           左、右边框颜色：#000|border-color:#369 #000;|
  10. |border-color |上边框颜色：#369左、右边框颜色：#000下边框颜色：#f00|border-color:#369 #000 #f00;|
  11. |border-color|上、右、下、左边框颜色：#369、#000、#f00、#00f|border-color:#369 #000 #f00 #00f;|

边框粗细

  1. border-width
  2. thin                    薄
  3. medium                  中
  4. thick                   厚
  5. 像素值
  6. 示例：
  7. border-top-width:5px; 
  8. border-right-width:10px; 
  9. border-bottom-width:8px; 
  10. border-left-width:22px; 
  11. border-width:5px ; 
  12. border-width:20px 2px;
  13. border-width:5px 1px 6px;
  14. border-width:1px 3px 5px 2px;

边框样式

  1. none                没有
  2. hidden              隐藏
  3. dotted              有点
  4. dashed              虚线
  5. solid               实线
  6. double              翻倍
  7. 示例
  8. border-top-style:solid; 
  9. border-right-style:solid; 
  10. border-bottom-style:solid; 
  11. border-left-style:solid; 
  12. border-style:solid ; 
  13. border-style:solid dotted;
  14. border-style:solid dotted dashed;
  15. border-style:solid dotted dashed double;

同时设置边框的颜色，粗细和样式

  1. border：粗细   风格   颜色；
  2. 示例：
  3. border:1px solid #3a6587;
  4. border: 1px dashed red;

外边距

  1. margin
  2. margin-top
  3. margin-right
  4. margin-bottom
  5. margin-left
  6. margin
  7. 示例：
  8. margin-top: 1 px
  9. margin-right : 2 px
  10. margin-bottom : 2 px
  11. margin-left : 1 px
  12. margin :3px 5px 7px 4px;
  13. margin :3px 5px;
  14. margin :3px 5px 7px;
  15. margin :8px;
  16. 老师讲课示例：
  17. <style type="text/css">
  18.         /*清除 所有容器的边距*/
  19.        *{
  20.             padding: 0;
  21.             margin: 0;
  22.        }
  23.         .div1{
  24.             width: 100px;
  25.             height: 100px;
  26.             background-color: red;
  27.             /*外边距margin  */
  28.             /*margin-top: 100px;
  29.             margin-left: 100px;
  30.             margin-right: 100px;
  31.             margin-bottom: 100px;*/
  32.             /* 
  33.              * margin: 上右下左
  34.              * margin: 上下    左右
  35.              * margin: 上  左右  下
  36.              *   */
  37.             /*margin :30px 50px 100px;*/
  38.             margin: 0 auto;
  39.         }
  40.         .div2{
  41.             width: 100px;
  42.             height: 100px;
  43.             background-color: #000;
  44.             /*margin-top: 20px;*/
  45.         }
  46.     </style>
  47.     <body>
  48.         <div class="div1"></div>
  49.         <div class="div2"></div>
  50.     </body>

外边距控制网页居中（外边距的妙用）

  1. margin:0px  auto
  2. 网页居中对齐的必要条件
  3. 块元素
  4. 固定宽度

内边距

  1. padding
  2. padding-left 
  3. padding-right
  4. padding-top
  5. padding-bottom
  6. padding
  7. 示例：
  8. padding-left:10px; 
  9. padding-right: 5px; 
  10. padding-top: 20px; 
  11. padding-bottom:8px; 
  12. padding:20px 5px 8px 10px ; 
  13. padding:10px 5px; 
  14. padding:30px 8px 10px ; 
  15. padding:10px;
  17. #老师讲课示例：
  18. </head>
  19.     <!--
  20.         块级元素 设置宽高是管用的
  21.         行级元素  设置宽高不管用
  22.     -->
  23.     <style type="text/css">
  24.         a{
  25.             background-color: red;
  26.             color: #fff;
  27.             padding: 10px;
  28.             text-decoration: none;
  29.         }
  30.     </style>

盒子模型总尺寸=border+padding+margin+内容宽度

  1. 语法：
  2. box-sizing：content-box  |  border-box  |  inherit;
  3. content-box         默认值，盒子的总尺度
  4. border-box          盒子的宽度或高度等于元素内容的宽度或高度
  5. inherit             元素继承父元素的盒子模型模式
  6. 设置完盒子的宽，高，边框之后才能用，设置完成之后盒子内元素不会超出盒子边框
  7. #<style type="text/css">
  8.     .bdiv{
  9.         width: 300px;
  10.         height: 300px;    
  11.         border: 1px solid #000;
  12.     }
  13.         .div1{
  14.             width: 100px;
  15.             height: 97px;
  16.             border: 3px solid red;
  17.             padding: 20px;
  18.             box-sizing: border-box;
  19.             margin: 2px;
  20.             /*padding-left: 10px;
  21.             padding-top: 10px;*/
  22.             /*
  24.              * 
  25.              * 不要被我误导     ？  一般计算宽度
  26.              * 
  27.              * */
  28.         }
  29.     </style>
  30.     <body>
  32.         <div class="bdiv">   
  33.             <div class="div1">
  34.                 帅哥
  35.             </div>
  36.             <div class="div1">
  37.                 帅哥
  38.             </div>
  39.             <div class="div1">
  40.                 帅哥
  41.             </div>
  42.         </div>
  43.     </body>

圆角边框

  1. border-radius: 20px  10px  50px  30px;
  2. 四个属性值按顺时针排列

圆形

  1. 利用border-radius属性制作圆形的两个要点
  2. 元素的宽度和高度必须相同
  3. 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
  4. 示例：
  5.  div{
  6.             width: 100px;
  7.             height: 100px;
  8.             border: 4px solid red;
  9.             border-radius: 50%;
  10.         }
  11. #老师讲课示例：
  12. <style type="text/css">
  13.         *{
  14.             padding: 0;
  15.             margin: 0;
  16.         }
  17.         ul li{
  18.             list-style: none;
  19.             height: 30px;
  20.             line-height: 30px;
  21.             border-bottom: 1px #eee dashed;
  22.         }
  23.         li a{
  24.             padding: 1px 6px;
  25.             border-radius: 50%;
  26.             background-color: red;
  27.             color: #fff;
  28.         }
  30.         li:hover a{
  31.             background-color: #000;
  32.         }
  33.         li:hover span{
  34.             color: red;
  35.         }
  37.     </style>
  38.     <body>
  39.         <ul>
  40.             <li>
  41.                 <a>1</a>
  42.                 <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
  43.             </li>
  44.             <li>
  45.                 <a>2</a>
  46.                 <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
  47.             </li>
  48.             <li>
  49.                 <a>3</a>
  50.                 <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
  51.             </li>
  52.         </ul>
  53.     </body>

半圆形

  1. 利用border-radius属性制作半圆形的两个要点
  2. 制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
  3. 制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

扇形

  1. 利用border-radius属性制作扇形遵循“三同，一不同”原则
  2. “三同”是元素宽度、高度、圆角半径相同
  3. “一不同”是圆角取值位置不同

盒子阴影（单位px）

  1. box-shadow:inset  x-offset  y-offset  blur-radius  color;
  2. inset                表示内阴影
  3. x-offset             X轴位移，指定阴影水平位移量
  4. y-offset             Y轴位移，用来指定阴影垂直位移量
  5. blur-radius          阴影模糊半径阴影向外模糊的模糊范围
  6. color                阴影颜色，定义绘制阴影时所使用的颜色
  7. <style type="text/css">
  8.         div{
  9.             width: 200px;
  10.             height: 330px;
  11.             border: 1px solid red;
  12.             border-radius: 5px;
  13.             box-sizing: border-box;
  14.             padding: 5px;
  16.         }
  17.         div img{
  18.             width: 100%;
  19.             border-radius: 5px;
  20.         }
  21.         div:hover{
  22.             box-shadow: 0px 0px 5px red;
  23.         }
  24.         div span:nth-of-type(1){
  25.             font-weight: 700;
  26.         }
  27.         div span:nth-of-type(2){
  28.             font-size: 12px;
  29.         }
  30.     </style>
  31.     <body>
  32.         <div>
  33.             <img src="img/img1.png" />
  34.             <span>武神赵子龙</span>
  35.             <br />
  36.             <span>怒，林更新大傻</span>
  37.         </div>
  38.     </body>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注