盒模型属性，媒体查询及em、rem

盒模型属性

常用的盒模型属性有margin padding border
div的尺寸计算方式为（margin+padding+border）*2+width
内容裁切：background-clip: content-box
padding margin 属性值的顺序是：上 右 下 左

  1. .box {
  2.   width: 200px;
  3.   height: 200px;
  4.   margin: 20px;
  5.   padding: 20px;
  6.   border: 3px dashed;
  7.   background-color: aqua;
  8.   background-clip: content-box;
  9. }

媒体查询

  1. @media (max-width: 450px) {
  2.   .min {
  3.     background: #bdc200;
  4.   }
  5. }
  6. @media (min-width: 450px) and (max-width: 800px) {
  7.   .min {
  8.     background: pink;
  9.     width: 100px;
  10.     height: 50px;
  11.   }
  12. }
  13. @media (min-width: 800px) {
  14.   .min {
  15.     background: red;
  16.     width: 200px;
  17.     height: 100px;
  18.   }
  19. }

通过像素变化做手机端适应。

em rem的区别
em是相对于父元素的大小
rem是相对于根元素的大小

更多相关文章

  1. Android之关于Intent的Flag属性的讲解
  2. iOS导航栏对控制器view的影响详解
  3. Android(安卓)官方数据库Room --- 配置
  4. Android(安卓)自定义View (一)
  5. AndroidManifest.xml文件详解（uses-configuration）
  6. JSP JavaBean的setProperty属性
  7. RelativeLayout常用属性介绍
  8. java版android Handler机制模型
  9. TabLayout属性及自定义底部导航栏

随机推荐

  1. Android 获取手机信息
  2. 修改系统分辨率
  3. Android framework完整源码下载
  4. Android关闭其他程序
  5. js 与安卓或ios 的交互传参
  6. android中的两端对齐
  7. android屏幕常亮
  8. Android获取通话状态
  9. android TextView的跑马灯效果的实现
  10. view measure详解