css3新特性和其他常见问题（三）

最新推荐文章于 2022-07-27 09:57:38 发布

seven-yang

最新推荐文章于 2022-07-27 09:57:38 发布

阅读量406

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/yangyixue123/article/details/75095968

版权

css基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css3新特性

参考网站

css3选择器

属性选择器（IE7及以上支持）

E[attr]表示存在attr属性即可；

E[attr=val]表示属性值完全等于val

E[attr~=val]表示的一个单独的属性值这个属性值是以空格分隔的

E[attr|=val]表示的要么一个单独的属性值要么这个属性值是以“-”分隔的

E[attr*=val]表示的属性值里包含val字符并且在“任意”位置

E[attr^=val]表示的属性值里包含val字符并且在“开始”位置

E[attr$=val]表示的属性值里包含val字符并且在“结束”位置

<style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 1500px;
            height: 150px;
            border: 1px solid black;
            margin: 0 auto;
            margin-top: 150px;
            display: flex;
            justify-content:space-around;
            padding-top: 20px;
        }
        .a1{
            width:130px;
            height: 130px;
            background-color:red;
            border-radius:50%;
            text-align: center;
            font-size: 40px;
        }
        .a1[id]{
            background-color: #ff00de;
        }
        .a1[lang="add"]{
            background-color: blue;
        }
        .a1[title~="ad"]{
            background-color: aqua;
        }
        .a1[]
    </style>

<div class="box">
    <a class="a1" id="a" >1</a>
    <a class="a1" title="b" >2</a>
    <a class="a1" id="c">3</a>
    <a class="a1" title="d" >4</a>
    <a class="a1" id="e" lang="add">5</a>
    <a class="a1" id="f" lang="eee">6</a>
    <a class="a1" target="baa">7</a>
    <a class="a1" title="ad dfg" >8</a>
    <a class="a1" target="dcc" >9</a>
    <a class="a1" title="ad sdf"  >10</a>
</div>

这里写图片描述

总结：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。
E[attr=”value”]和E[attr*=”value”]是最实用的，其中E[attr=”value”]能帮我们定位不同类型的元素，特别是表单form元素的操作，而E[attr*=”value”]能在网站中帮助我们匹配不同类型的文件。

②伪类

E:nth-child(n) 表示E的父元素中的第n个子节点，且类型为E

（重要） p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n个子节点，从后向前计算，且类型为E
E:nth-of-type(n) 表示E父元素中的第n个E子节点
E:nth-last-of-type(n)表示E父元素中的第n个E子节点，从后向前计算
E:empty 表示E元素中没有子节点。注意：包含文本节点
E:first-child 表示E父元素中的第一个子节点，且类型为E
E:last-child 表示E父元素中的最后一个子节点，且类型为E

重要：  E:first-of-type 表示E父元素中的第一个E子节点
 E:last-of-type 表示E父元素中的最后一个E子节点
 E:only-child表示E父元素中只有一个子节点。注意：不包含文本节点
 E:only-of-type 表示E父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：不包含文本节点

这里写图片描述

 a:nth-child(3){
            background-color:pink;
        }
        a:nth-child(odd){
            background-color: black;
            color: green;
        }
        a:nth-child(even){
            background-color: green;
            color: aqua;
        }
        a:nth-last-child(3){
            background-color: blue;
        }

这里写图片描述

E:target 表示当前的URL片段的元素类型（id被a的href链接并被点击），这个元素必须是E

下面的三个伪类选择器一般用于输入框：

E:disabled 表示不可点击（获取焦点）表单控件
E:enabled 表示可点击（获取焦点）的表单控件
E:checked 表示已选中的checkbox或radio

<style type="text/css">
        form{
            width: 160px;
            height: 200px;
            border: 1px solid black;
        }
        li{
           width: 160px;
            height:60px ;
            background-color: indigo;
            margin-bottom: 4px;
        }
        p{
           width: 100px;
            height: 70px;
            background-color: dimgray;
        }
        li:target{
            color: blue;
            background-color: yellowgreen;
        }
        form:first-line{
            background-color: violet;
        }
    </style>

<body>
<p><a href="#new1">选一</a></p>
<p><a href="#new2">选二</a></p>
<p><a href="#new3">选三</a></p>
<form>
    <li id="new1">1</li>
    <li id="new2">2</li>
    <li id="new3">3</li>
</form>
</body>

这里写图片描述

用伪类选择符（E:checked）实现多选框

 <style type="text/css">
        input:checked+span{
            background-color: red;
        }
        input:checked+span:after{
            content: "选我";
        }
    </style>

    <ul>
        <li><input type="checkbox" value="0" /><span>蓝色</span></li>
        <li><input type="checkbox" value="1" /><span>红色</span></li>
        <li><input type="checkbox" value="2" /><span>黑色</span></li>
    </ul>

效果

这里写图片描述

**<重要>**E::selection表示E元素在用户选中文字时,只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性).

demo：用伪类选择符（E::selection）

<style type="text/css">
        p{
            font-size: 15px;
        }
        p::selection{
            color: #ff00de;
            background-color: indigo;
        }
        p::before{
            content: "插入文字";
            background-color: yellowgreen;
        }
        p::after{
            content: "不选就算了";
            background-color: yellowgreen;
        }
    </style>

这里写图片描述

渐变（gradient）

参考网站

渐变分为线性渐变（linear-gradient）和径向渐变(radial-gradient)

线性渐变

由于线性渐变在不同浏览器中的使用方法不同，所以用浏览器区分

a.线性渐变在Mozilla下的应用

语法：-moz-linear-gradient( [<point> ||<angle>,]? <stop>,<stop> [,<stop>]* )

其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。如图所示：

这里写图片描述

 div{
            width: 200px;
            height:200px;
            background: -moz-linear-gradient(top,red,yellow);
        }

效果图：

这里写图片描述

b.线性渐变在Webkit下的应用

语法

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

这里写图片描述

demo

-webkit-linear-gradient(top,#ccc,#000);//新式写法

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

c.线性渐变在Opera下的应用

语法：

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

参数：-o-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

径向渐变

语法：

 -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
 -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

径向渐变到目前还不支持Opera的内核浏览器，所以径向渐变都是在firefox,safari,chrome底下进行测试完成的。

demo：

background: -moz-radial-gradient(#ace, #f96, #1E90FF);
 background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

效果图：

这里写图片描述

旋转（transform）

Transform用来向元素应用各种2D和3D转换，属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。

语法：

transform有两个值，一个是none；一个是transform-function。多个transform-function之间用空格隔开。

transform:none|<transform-function>+;

旋转
```
a.2D旋转
```
语法：transform:rotate(45deg);
单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，语法中的意思是顺时针旋转45°。

b.3D旋转:
语法：transform:rotate3d(x,y,z,a);
rotate3d()中取值说明：

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

rotate3d可以分别写成三个旋转函数，功能等同：
rotateX(a)函数功能等同于rotate3d(1,0,0,a)
rotateY(a)函数功能等同于rotate3d(0,1,0,a)
rotateZ(a)函数功能等同于rotate3d(0,0,1,a)

缩放
```
a.2D缩放
```
语法：transform: scale(0.5); 或 transform: scale(0.5, 2);

参数表示缩放倍数；
一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
scale还可以分别写，scaleX和scaleY，分别定义水平和垂直的缩放比例。

b.3D缩放

语法：transform:scale3d(sx,sy,sz);
其取值说明如下：
sx：横向缩放比例；
sy：纵向缩放比例；
sz：Z轴缩放比例；
scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。scale3d可以拆分成三种写法，分别是scaleX()、scaleY()、ScaleZ()。

定位
```
 a.2D偏移
```
（1）语法
transform：translate(sx,sy);
sx：向X轴方向偏移的数值。
sy：向Y轴方向偏移的数值。
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);参数表示移动距离，单位px。

一个参数时：表示水平方向的移动距离；
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。
translate还可以分别写，translateX()，translateY()，分别给水平方向和垂直方向定义偏移距离。

b.3D偏移：translate3d()

语法:transform:translate3d(tx,ty,tz);
其属性值取值说明如下：

tx：代表横向坐标位移向量的长度；
ty：代表纵向坐标位移向量的长度；
tz：代表Z轴位移向量的长度，此值不能是一个百分比值，如果取值为百分比值，将会无效。
translate3d可以拆分成三种写法，分别是translateX()、translateY()、translateZ()。

倾斜:skew()
语法:transform: skew(30deg); 或 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg。
一个参数时：表示水平方向的倾斜角度；也就是Ｙ轴往Ｘ轴倾斜。
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。第二个参数也就是说Ｘ轴往Ｙ轴倾斜。
skew还可以分开写，skewX是Y轴往X轴倾斜，skewY是X轴往Y轴倾斜。

新增颜色模式<重要>
Rgba
r Red 红 0-255
g Green 绿 0-255
b Blue 蓝 0-255
a Alpha 透明 0-1

文字阴影（text-shadow）
text-shadow 的属性：text-shadow:x y blur color, …
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

①外发光

<style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        h1{
            margin-left:400px;
            margin-top: 100px;
            font-size: 60px;
            color: blueviolet;
            text-shadow:  0 0 20px red;
        }
    </style>

②辉光效果

 <style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        h1{
            margin-left:400px;
            margin-top: 100px;
            font-size: 60px;
            color: blueviolet;
            text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 40px #ff00de,
               0 0 70px #ff00de;
        }
    </style>

这里写图片描述

盒模型阴影（box-shadow）
box-shadow：给元素块添加周边阴影效果,可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。(text-shadow是给文本添加阴影效果)
属性至多有6个参数设置

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；设置阴影类型为“inset”时，其投影就是内阴影；

X-offset:是指阴影水平偏移量，其值可以是正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数是可选值，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的chrome浏览器为无色，也就是透明，建议不要省略此参数。

兼容问题：Mozilla内核的要加-moz，webkit内核的加-webkit。最新版的Firefox和Google Chrome浏览器都无需加前缀。
①单边效果

<style type="text/css">
        body{
            padding: 0;
            margin:0;
        }
        .shadow{
            width: 150px;
            height: 150px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: plum;
            -moz-box-shadow:-2px 0 3px red ,
              0 -2px 3px green,
              2px 0 3px blue,
              0 2px 3px yellow;
            box-shadow: -2px 0 3px red ,
            0 -2px 3px green,
            2px 0 3px blue,
            0 2px 3px yellow;
            -webkit-box-shadow:-2px 0 3px red ,
            0 -2px 3px green,
            2px 0 3px blue,
            0 2px 3px yellow;
        }
    </style>

这里写图片描述

②四边具有相同的阴影效果

 <style type="text/css">
        body{
            padding: 0;
            margin:0;
        }
        .four{
            width: 150px;
            height: 150px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: plum;
            box-shadow: -2px 0 8px red ,
            0 -2px 8px red,
            2px 0 8px red,
            0 2px 8px red;
    </style>

这里写图片描述

实现圆角( border-radius)

border-radius可分为多个属性值（默认方向顺时针）

border-radius-top-left /左上角/

border-radius-top-right /右上角/

border-radius-bottom-right /右下角/

border-radius-bottom-left /左下角/

单个属性值
代码如下

<style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: plum;
            border-radius:10px;
        }
    </style>

效果图
这里写图片描述

多个属性值

<style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: plum;
            border-radius:10px 10px 0px 50px ;
        }
    </style>

效果图
这里写图片描述

border-radius的优势不仅仅在制作圆角的边框，还是利用border-radius属性来画圆和半圆。

① 半圆

<style type="text/css">
        .semi-circle{
            width: 200px;
            height: 100px;/*高度是宽度的一半*/
            background-color: plum;
            border-radius:100px 100px 0 0;/*左上和右下至少为高度值*/
        }
    </style>

这里写图片描述

②实心圆
将四个角设置为高度或宽度的一半

<style type="text/css">
        .circle{
            width: 200px;
            height: 200px;
            background-color: plum;
            border-radius: 50%;
        }
    </style>

这里写图片描述

Webfont(@font-face)

webfont：即在线字体或者网络字体，是CSS3中的一个模块，主要是把自定义的特殊字体嵌入到网页中。无需安装，无需下载，直接在线使用。web font技术需要通过CSS的@font-face语句引入在线字体。
@font-face你可以在页面中嵌入不同的自定义字体，为不同的元素应用不同的字体。

@font-face语法：

@font-face {
    font-family: <your-webfont-name>;
    src: <source> <format> [, <source> <format>];
    [font-weight: <weight>;]
    [font-style: <style>;]
}

常见的字体格式及format如下：

format:

浏览器支持情况

demo：定义字体

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?'); /* 兼容IE9以上 */
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /*兼容IE8以下*/
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype'),
        url('fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

在页面中就可以正常使用icomoom

div.title {
    font-family: 'icomoon'
}

媒体查询（Media query）

1.媒体类型（Media Type）

用于定义不同媒体类型在不同CSS属性时的样式表现。

语法：

@media screen and (width: 888px) {
    p {
        color: gold;
    }
}

其中，
 @media是关键字（可以将其理解成css的一种语法糖，跟@import类似）
 screen，这个关键字就是我们所说的媒体类型（这里screen其实就是电脑屏幕）
 width: 888px，需要查询的CSS属性
 表达的意思是：当页面在电脑屏幕上展现时，且屏幕的width（宽度）属性为888px时，设置所有的p标签元素的字体颜色为gold

常见的媒体类型：

这里写图片描述

常用的有all、print、screen这几种类型。其中screen要属于最常用的媒体类型了。

在具体使用media type时，我们还可以使用not或者only这两个关键字修饰媒体类型，only表示只对某类型使用，not表示除了某类型之外的所有设备类型生效。

2.媒体查询（Media query）

语法：

@media screen and (width: 888px) {
    /* your css code */
}

查询页面的width属性，当其宽度为888px时，将应用特别设置的样式。

可查询属性表：

这里写图片描述

从表中可以看出还有max-与min-作为前缀进行查询

@media screen and (min-width: 961px) and (max-width: 1200px) {
    p {
        color: pink;
    }
}

上面代码的含义是指，当展现页面的宽度大于960px且小于1200px时，将p标签的字体颜色设置为粉色。

其他常见问题

box-sizing

控制元素和模型的解析模式，默认值为content-box

属性值：

content-box:让元素维持标准的盒模型，元素宽高分别由border+padding+content决定，设置的width和height指的是center的部分宽高

border-box::让元素维持IE传统盒模型，设置的width和height属性指border+padding+content。

link与@import的区别

link属于HTML标签，除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，而@import是由css提供，就只能加载CSS
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。
@import只有在IE5以上的才能识别。而link标签无此问题。
link的权重高于@import

css的伪类与伪元素

伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器

伪类种类

这里写图片描述

伪元素种类

这里写图片描述

两者的区别

用伪类 :first-child 和伪元素：:first-letter 来进行比较。

伪类：first-child

<style type="text/css">
        p>i:first-child{
            color: #ff5555;
        }
    </style>

<p>
    <i>first</i>
    <i>second</i>
</p>

效果图：

这里写图片描述

不使用伪类时，达到上面的效果则需要

.first-child {color: red}
<p>
    <i class="first-child">first</i>
    <i>second</i>
</p>

伪元素：：first-letter

 <style type="text/css">
        p::first-letter{
            color: #ff5555;
        }
    </style>

<p>
    I am stephen lee.
</p>

效果图：

这里写图片描述

不使用伪元素时，达到上面的效果则需要

.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

margin折叠

外边距折叠是相邻的两个或多个元素（含有子元素的情况）的外边距会在垂直方向上合并成一个一个外边距。

margin折叠的计算

1.折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

2.折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。

3.折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后和正 margin 值中最大的 margin 相加。

4.相同大小的负数：同相同大小正数。-30px与-30px折叠，折叠后为-30px。

5.不同大小负数：取绝对值较大的负数。-30px与-20px折叠，折叠后为-30px。
外边距折叠情况

无子元素的相邻兄弟元素

两个元素之间没有被其他非空元素隔开时触发外边距折叠。

1.两个元素的margin均为正值，则两个元素之间的margin=max(margin1,margin2)；
2.两个元素的margin负值，则两者之间的margin=min(margin1,magin2)
3.两个元素中有margin为正值，有一个为负值，则两者之间的margin=margin1+margin2

子元素与父元素发生的外边距折叠

父元素无外边框(border)、无内边距(padding)，且父元素与子元素之间无非空元素或文本信息时（子元素上边与父元素上边之间无非空元素文本信息，子元素下边与父元素下边之间可可以有非空元素和文本信息），折叠的基线为父元素最上的边或最下的边。

计算规则同上

元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
绝对定位元素，float元素，inline-box元素，overflow : hidden不会和垂直方向上的其他元素margin折叠–其实就是可以生成新的BFC

margin折叠的消除

1.BFC块级格式化上下文阻止外边距折叠，设置display:inline-block形成BFC

2.父子DIV顶部外边距折叠解决方法

给父元素div设置边框
父元素div设置padding
给父元素div设置overflow–其实是生成了一个新的BFC

seven-yang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3新特性和其他常见问题（三）

css3新特性参考网站css3选择器属性选择器（IE7及以上支持）E[attr]表示存在attr属性即可；E[attr=val]表示属性值完全等于valE[attr~=val]表示的一个单独的属性值这个属性值是以空格分隔的E[attr|=val]表示的要么一个单独的属性值要么这个属性值是以“-”分隔的E[attr*=val]表示的属性值里包含val字符并且在...
复制链接

扫一扫

专栏目录