Community Learn Tools Library Leisure
search
English
Home > List of blog posts > box-sizing功能及相对定位与绝对定位实例演示
Blogger Information
Blog 11
fans 0
comment 0
visits 6560
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
box-sizing功能及相对定位与绝对定位实例演示
Ghcᝰ
Original
606 people have browsed it

box-sizing功能及相对定位与绝对定位实例演示

盒模型组成的部分

content(内容区)、padding(内边距)、border(边框)、margin(外边距)
  • content(内容区)大小样式可用widht设置宽度，height设置高度 及最大宽度(max-widht)最大高度(max-height)和最小宽度(min-widht)最小高度(min-height)
  • padding(内边距) 由padding-top、padding-right、padding-bottom、padding-left
    是由顺时针方向作为书写顺序的，即上、右、下、左
    其中书写格式可分为：
    四值写法：padding:1px(上) 2px(右) 3px(下) 4px(左)； （）括号中的上右下左仅为演示
    三值写法：padding:1px 2px 3px ; 中2px表示左右边距相等同为2px
    二值写法：padding:1px 2px ; 表示上下边距相等都为1px 左右边距相等为2px
    一值写法：padding:1px ; 表示上下左右边距相等，都为1px
    注意：谨记三值和二值写法时， 第2个参数为左右！
  • margin的顺序及语法同padding，只是关键词由padding改为了margin
  • border边框样式：
    关键字：
    none ：默认无边框
    hidden : 隐藏边框。和关键字none类似，不显示边框，在应用于表格单元格的边框时，优先值为最高，相邻单元格的重叠边框不会显示
    solid : 实线边框
    dotted : 点线边框
    dashed : 虚线边框
    double : 双实线边框
    groove : 雕刻效果边框，样式与ridge相反
    ridge : 浮雕效果边框，样式与groove相反
    inset : 陷入效果边框，样式与outset相反
    outset : 凸出效果边框，样式与inset相反

position定位

关键字：

static : 默认值，静态定位。即没有定位的意思；
relative : 相对定位。相对于文档流中自身的原始位置进行定位；
absolute : 绝对定位。脱离了文档流，相对与距离自己最近的祖先定位元素进行定位，如果没有则相对于body元素进行定位
fixed : 固定定位。永远相对于html进行定位。页面内容滚动不会导致元素的位置变化。

演示：
盒模型 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>盒模型</title>
  9.     <style>
  10.         :root {
  11.             font-size: 10px;
  12.             margin: 0;
  13.             padding: 0;
  14.             box-sizing: border-box;
  15.         }
  17.         .fuyuansu {
  18.             margin: auto;
  19.             /*水平居中，垂直不居中，因为宽度受限，高度不受限*/
  21.             padding: 50px;
  22.             height: 300px;
  23.             width: 300px;
  24.             background-color: yellow;
  25.             border-top: 1px solid blue;
  26.             /* 上边框为蓝色宽度1像素实线 */
  27.             border-right: dashed;
  28.             /* 右边框为虚线 */
  29.             border-bottom: solid red;
  30.             /* 下边框为红色实线 */
  31.             border-left: none;
  32.             /* 左边框没有边框 */
  33.             position: relative;
  34.             /* 相对定位，作为子元素的父级定位元素 */
  35.         }
  37.         .ziyuansu {
  38.             width: 150px;
  39.             height: 150px;
  40.             background-color: plum;
  41.             position: absolute;
  42.             /* 绝对定位，依据定位元素来定位，脱离了文档流 */
  43.             top: 0;
  44.             right: 0;
  45.             left: 0;
  46.             bottom: 0;
  47.             margin: auto;
  48.             /* 以上5个操作可把块元素设置水平且垂直居中对齐 */
  49.         }
  50.     </style>
  51. </head>
  53. <body>
  54.     <div class="fuyuansu">
  55.         <div class="ziyuansu">
  57.         </div>
  58.     </div>
  59. </body>
  61. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post