登录  /  注册
首页 > 博客列表 > box-sizing的作用和伪类选择器以及媒体查询优先的区别与联系
博主信息
博文 16
粉丝 0
评论 0
访问量 11768
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
box-sizing的作用和伪类选择器以及媒体查询优先的区别与联系
大碗宽面
原创
647人浏览过

一、CSS3的box-sizing属性的作用及使用

1.box-sizing 盒子尺寸

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

2.属性值

content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。

注：默认值可以不写

border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

3.尺寸计算公式：

width = border + padding + 内容的宽度
height = border + padding + 内容的高度

示例


1.content-box,是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。


2.border-box,告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

二、常用单位

px,em,rem,vh,vw

  1.     绝对单位：px，像素，与设置相关，一英寸有96像素 
  2.      相对单位
  3.     1. em,rem,与字号相关 font-size
  4.     2. vw,vh.与视口相关（可视窗口大小） 
  5.      3.1em=16px像素 
  6.      4.em永远和当前或父级的font-size大小绑定的 
  7.      5.1rem=10px
  8.      6.浏览器的最小字号为12px
  9.      7.vh,vw 将视口看成100份，每一份是1 相当于1%个vh,vw

三、伪类选择器的参数及使用

伪类选择器 说明
:first-child 选择某个元素的第一个子元素（IE6不支持）
:last-child 选择某个元素的最后一个子元素
:first-of-type 选择一个上级元素下的第一个同类子元素
:last-of-type 选择一个上级元素的最后一个同类子元素
:only-child 选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）
:nth-child() 选择某个元素的一个或多个特定的子元素（IE6-8不支持）
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）
:nth-of-type() 选择指定的元素（IE6-8不支持）
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）

1.常用伪类选择器实例：:nth-of-type(参数)

参数计算方式:参数=a*n+b a系数，n计数器，b偏移量 a,n,b=0,0,0
  1.     <body>
  2.     <!-- :nth-of-type(参数) -->
  3.     <!-- 参数=a*n+b  a系数，n计数器，b偏移量 a,n,b=0,0,0 -->
  4.     <ul class="list">
  5.       <li>item1</li>
  6.       <li>item2</li>
  7.       <li>item3</li>
  8.       <li>item4</li>
  9.       <li>item5</li>
  10.       <li>item6</li>
  11.       <li>item7</li>
  12.       <li>item8</li>
  13.     </ul>
  14.   </body>
  1.     <style>
  2.       /* 获取全部偶数 2n/even */
  3.       .list > :nth-of-type(even) {
  4.         background-color: crimson;
  5.       }
  6.       /* 全部奇数2n+1/add */
  7.       .list > :nth-of-type(odd) {
  8.         background-color: cyan;
  9.       }
  10.     </style>

原理：

nth-of-type(even)even=2n,2*0=0 2*1=2 2*2=4 2*3=6….
nth-of-type(add)add=2n+1,2*0+1=1 2*1+1=3 2*2+1=5 2*3+1=7….

  1.  .list > :nth-of-type(0n + 5) {
  2.         background-color: chartreuse;
  3.       }
  4.       /* 选择第五个 */
  5.       .list > :nth-of-type(5) {
  6.         background-color: chartreuse;
  7.       }

原理：

nth-of-type(0n + 5)0*n=0 0+5=5

  1. /* 1*n=0 0+7=7 */
  2.       /* 1*1=1 1+7=8 */
  3.       .list > :nth-of-type(1n + 7) {
  4.         background-color: darkkhaki;
  5.       }

原理：

nth-of-type(1n + 7) 1*n=0 0+7=7
1*1=1 1+7=8 

  1. /* -1*0=0    0+3=3 */
  2.       /* -1*1=-1  -1+3=2*/
  3.       /* -1*2=-2  -2+3=1*/
  4.       /* -1*3=-3  -3+3=0 */
  5.       .list > :nth-of-type(-1n + 3) {
  6.         background-color: darkviolet;
  7.       }

原理：

nth-of-type(-1n + 3

  1. -1*0=0    
  2. 0+3=3      
  3. -1*1=-1  
  4. -1+3=2    
  5. -1*2=-2  
  6. -2+3=1    
  7. -1*3=-3  
  8. -3+3=0

四、媒体查询优先的区别与联系

<body> <div class="test"></div> </body>

  1. <style>
  2.             .test {
  3.               /* box-sizing: border-box; */
  4.               width: 200px;
  5.               height: 200px;
  6.               border: 10px double red;
  7.             }
  8.             @media screen and (max-width: 700px){
  9.           .test{
  10.               background:red;
  11.           }
  12.       }
  13.       @media screen and (max-width: 500px){
  14.           .test{
  15.               background:green;
  16.           }
  17.     </style>



现象：

窗口宽度高于700px没有颜色
窗口宽度为700px的时候包括700px-500px，.test元素变红。
窗口宽度为500px，包括500px以下的时候，.test元素变绿。

总结：

（1）媒体查询的宽度在等于给定宽度时，相应的样式会被应用
max-width:700px，指的是width<=700px则使用样式。

（2）媒体查询可以被覆盖，后面的@media会覆盖前面的。
（3）移动优先 从最小的屏幕开始媒体查询 min-width: 480px 640 720…
（4）桌面优先/pc优先 由大屏到小屏 max-width：720 640 480…
从大到小 有个边界问题 屏幕大于720之后字体会变最小
解决：在pc优先最小像素的后面补充(min-width: 720px)

批改老师：PHPzPHPz

批改状态：合格

老师批语：nth-of-type(-1n + 3 这里少了一个括号
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录