CSS3新增的选择器

Posted 2023-04-19

@media (min-width: 992px)
.container
max-width: 970px;

这个属性选择器怎么理解
@符号有什么特别意义
@media后面的（min-width：992px;）是什么意思
@media(min-width:992px)里面的 .container又是怎么理解的

请问哪里有这个写法的详细解释

@media (min-width: 992px) 

允许 浏览器可视范围 最小大小 为 992px，当 浏览器可视范围的大小 ≥ 992px 时， .container 的最大宽度 为 970px，

即，无论 浏览器放到多大，只要它不少于 992px ，.container 的宽度始终为 970px。

当 浏览器可视范围 小于 992px 时，.container 中的设置无效。

这里.container 中，应该还有设置一个默认的值。

再举例：

@media(max-width:1000px)
      .container
                max-width:970px;
        

同理，这里的 @mediamax-width:1000px  就是 允许 浏览器最大宽度 为 1000px，时它小于 1000px 时，.container 中的 值才会生效，反即失效。

也就是说：

@media 中的值，是 允许条件 ，当这条件成立时，它中的内容才会生效。

详细翻译即为：

如果浏览器的 宽度 小于或等于 1000px 时（注：理解好最大宽度为啥意思，最小宽度 即为 大于或等于这个值），.container 中的最大宽度为 970px，无论浏览器被缩到多少，.container 的宽度始终为 970px，但是当 大于 1000px 时，.container 中的值就为无效。

@media 中也可以写个固定宽度值，如：

@media(wdith:1000px)
      .container
          width:970px
      

浏览器宽度等于  1000px 时，.container 宽度即为 970px ，显然，这绝对等于的值，设置起来无意义的。

以上~

自测得出的结果……

参考技术A 这叫css媒体查询，不是css选择器。

你这段代码意思是：
当屏幕最小宽度为992px时，class为.container的元素最大宽度970px；也就是当遇到大于992px宽的屏幕尺寸时，设置.container的最大宽度970px。

比如你可以再加一条：
@media (max-width: 320px)
.container
max-width: 300px;


那么只要屏幕宽度小于320px，.container的宽度就是240px;
这样你就可以用同一套html，通过css媒体查询来区别各种屏幕尺寸的设备，为手机、电脑、pad制作不同的界面布局。 参考技术B 响应式布局的意思，具体可以百度一下子

CSS3新增的常用方法以及CSS常见属性整理

CSS 用于控制网页的样式和布局，而CSS3 是最新的 CSS 标准。

CSS3的规范仍在开发中，有些CSS3并不能完美兼容所有浏览器。

 

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

　　选择器　　盒模型　　背景和边框　　文字特效

　　2D/3D转换　　动画　　多列布局　　用户界面

CSS3选择器

　　添加了关系型选择器、属性选择器、伪元素选择器、伪类选择器等等新的选择器。

　　  可以更精准的筛选元素。CSS3选择器

CSS3边框

　　CSS3中可以为元素创建圆角边框，添加阴影框。

　　CSS3圆角

　　　　语法：border-radius: 25px 25px 20px 20px;

　　　　　可以拆分为:左上 / 右上 / 右下 / 左下

　　　　　　border-top-left-radius / border-top-right-radius / border-bottom-left-radius / border-bottom-right-radius

　　CSS3盒阴影

　　　　语法：box-shadow: 10px 10px 10px 10px #000;

　　　　　　　　　　　　　 X　　Y　　s　   r　  color

　　　　　　可加上inset属性，加上则为内部阴影，没加则为外部阴影

　　CSS3图片边框

　　　　语法：border-image: url(  ) 30 30 round;

 

CSS3背景

　　css3中包含了新的背景属性，提供更大背景元素控制。

　　background-image属性：元素的背景图片

　　　　语法：background-image: url(),url()可连接多个图片地址，如果前一个地址错误或者无法加载，会加载后面的地址。

　　　　　　也可以为不同的图片设置不同的属性：background-image: url() right bottom no-repeat ,  url() left top repeat;

　　backrgound-size属性：元素的背景图片的大小

　　　　语法：background-size: 80px 60px;

　　background-Origin属性：可以指定背景图片的位置区域

　　　　语法：background-Origin: padding-box;内填充

　　　　　　　　　　　　　　　   border-box;边框

　　　　　　　　　　　　　　　   content-box;内容

　　background-clip属性：对图片从指定位置进行裁剪

　　　　语法：background-clip: 值同上;

　　在文字中添加背景图：

　　　　-webkit-background-clip: text;

　　　　-webkit-text-fill-color: transparent;

CSS3 Flex Box 弹性盒子

　　弹性盒子是CSS3的一种新的布局模式

　　  弹性盒子由弹性容器和弹性子元素组成。

　　  弹性容器内包含了一个或多个弹性子元素。

　　用法：

　　　　display:flex;     //inline-flex

　　　　flex-direction: row | row-reverse / column | column-reverse

　　　　　　　　　　主轴以x为准，|取反　　主轴以y为准，|取反

　　　　flex-wrap: 默认no-wrap不换行，会压缩;

　　　　　　　　wrap换行　　warp反向换行排列

　　　　justify-content: flex-start / flex-end / center / space-between / space-around

　　　　　　　　基于主轴的对齐方式

　　　　基于交叉轴的对齐方式:

　　　　适用于单行的：align-items：flex-start / flex-end / center / baseline / stretch

　　　　适用于多行的：align-content：flex-start / flex-end / center / space-between / space-around / stretch

　　　　　　如果只有一行是没有区别的

　　　　order： flex中子项排序，数值小的排序在前。

　　　　align-self ：项目在交叉轴的对齐方式：

　　　　　　　　　　flex-start交叉轴最顶　　flex-end最底

　　　　　　　　　　center　　baseline　　stretch　　比前两者优先级更高。

　　　　flex: 子项，以下控制宽

　　　　　　flex-grow : ; 伸，会按照写的比例来瓜分剩下的空间，写在多个标签内会一起计算比例，不写默认值为0

　　　　　　flex-shrink : ; 缩，按照比例缩小按比例分配的值

　　　　　　flex-basis : ;基础宽，可以认为即width。最小宽度，width为最大宽度。

　　　　　　以加权值来计算，在容器宽不足以容纳子项，以每个项目的宽*比例值相加后，按照比例缩小。

 

　　CSS的过渡属性　　transition　　只要状态发生改变，就会触发过渡

　　　　　　transition-property--规定设置过渡效果的 CSS 属性的名称。all 为全部属性

　　　　　　transition-duration--规定完成过渡效果需要多少秒或毫秒。

　　　　　　transition-timing-function--规定速度效果的速度曲线。

　　　　　　transition-delay--定义过渡效果何时开始。

　　CSS的动画属性　　animation　　必须使用@keyframes

　　　　　　@keyframes--定义关键帧动画,名字随便取，调用的时候用这个名字即可

　　　　　　animation-name--动画的名字，必须与@keyframes配合使用

　　　　　　animation-duration--动画的时间，从0 - 100 的时间

　　　　　　animation-timing-function--动画的方法：

steps(<integer>[, [ start | end ] ]?)
        step-start：等同于 steps(1, start)
        step-end：等同于 steps(1, end)
cubic-bezier(<number>, <number>, <number>, <number>)

　　　　　　animation-delay--动画的延迟时间，默认值是0s

　　　　　　animation-iteration-count--动画的循环次数，默认值是一次infinite：无限循环

　　　　　　animation-direction--必须建立在循环的基础之上的

normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

　　CSS转换属性　　transform　　3D转换中元素移动坐标轴也会移动

　　　　　　CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。

　　　　rotate旋转

　　　　　　rotateX()　　rotateY()　　rotateZ()　　rotate3d(x,y,z,deg)

　　　　　　　　元素的旋转，旋转以后，元素的坐标轴也跟着发生了旋转,所以会导致先转和后转的结果会不一样

　　　　scale伸缩

　　　　　　scale()　　scelex()　　scaley()　　scelez()　　scale3d(x,y,z)

　　　　　　　　当你图片伸缩的时候，是伸缩的空间坐标轴，并不是图片的大小,造成了一个视觉差的效果

　　　　skew倾斜

　　　　　　skewx()　　skewy()

　　　　　　　　倾斜是倾斜坐标轴，并且会将坐标轴进行拉伸

　　　　translate移动

　　　　　　translatex()　　transelatey()　　translatez()　　translate3d(x,y,z)

　　　　　　　　相对于元素本身发生的偏移