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

更多相关文章

  1. 演示box-sizing功能并实例/演示相对定位与绝对定位的区别与联系
  2. 学习CSS(二)
  3. box-sizing和定位原理
  4. css之盒模型与定位
  5. 定位属性position 的介绍
  6. box-sizing和定位
  7. box-sizing功能,相对定位/绝对定位
  8. 【CSS入门】学习CSS盒模型及常用样式属性详解(整理)
  9. iPhone如何修改手机定位?

随机推荐

  1. 我在解析JSON时出错了
  2. Jquery---定时器(实现页面内定时弹出广告,
  3. jquery datatables-一个数据表中的最大列
  4. jQuery 点击div, 向上展示内容
  5. 拒绝拖放到tabel的第一个子单元格
  6. 使用JQuery显示和隐藏不同div的onClick事
  7. IE 10和11中的灰度?
  8. 如何让代码等待好/取消按钮选择?
  9. jquery刷新iframe页面的方法
  10. jQuery - 加载gif的延迟显示