博客列表 >盒模型,多媒体查询实例,rem和em的区别

盒模型,多媒体查询实例,rem和em的区别

千里马遇伯乐
千里马遇伯乐原创
2022年03月23日 11:10:34723浏览

1,盒子模型常用属性

  1. <style>
  2. .box1 {
  3. width: 200px;
  4. /* 盒子宽度 */
  5. height: 200px;
  6. /* 盒子高度 */
  7. background-color: darkcyan;
  8. /* 背景颜色 */
  9. border: 10px solid black;
  10. /* 边框 */
  11. padding: 20px;
  12. /* 盒子内边距 */
  13. padding:有四值语法,三值语法,双值语法,单值语法。单值语法适用于四个值相等的情况下。
  14. background-clip: content-box;
  15. /* 背景裁切 */
  16. box-sizing: border-box;
  17. 布局前提:是在一个"宽度受限。而高度无限的空间内”,布局时,必须将width, he ight其中一个限制死,否则无法完成布局
  18. /* box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。如果box-sizing: border-box;在元素填充上设置并且边框包含在宽度和高度中,默认情况下,元素的宽度和高度计算如下:width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度这意味着:当您设置元素的宽度/高度时,元素通常看起来比您设置的大(因为元素的边框和填充被添加到元素的指定宽度/高度)。下图显示了两个具有相同指定宽度和高度的<div>元素: */}
  19. </style>

盒子大小

2,多媒体查询实例

  1. <style>
  2. body{
  3. background-color:red;
  4. }
  5. @media(max-width:400px){
  6. body{
  7. background-color: aqua;
  8. }
  9. }
  10. /*媒体查询:对当前媒体设备 宽度的变化来选择不同的页面或显示效果 */
  11. </style>


rem与em区别及实例演示

  1. <style>
  2. html {
  3. font-size: 6px
  4. /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
  5. /* 因为一个页面,只有一个根元素, html */
  6. /* 1rem = 6px */
  7. }
  8. .a {
  9. font-size: 4rem;
  10. /* 3remx6px=18px */
  11. }
  12. div p {
  13. /* font-size: 3em; */
  14. }
  15. </style>



rem与em的区别:

区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议