前端基础学习记录笔记（CSS3）

目录

5.CSS3

层级选择器

子集选择器

直属子集选择器

相邻兄弟选择器

通用兄弟选择器

属性选择器

选择器【属性名】

选择器【属性名="属性值"】

选择器【属性名~=“属性值”】

选择器【属性名^=“属性值”】

选择器【属性名$=“属性值”】

选择器【属性名*=“属性值”】

选择器【属性名 |=“属性值”】

伪类选择器

结构性伪类选择器

目标伪类选择器

UI元素状态选择器

否定伪类选择器

动态伪类选择器

伪元素选择器

字体

字体图标

特殊字体

阴影

盒子阴影

文字阴影

边框

border-radius

border-image

背景

背景图大小

多张背景图

渐变

浏览器兼容

弹性盒布局

容器

1.开启弹性盒

2.定主轴方向

3.主轴的排列方式

4.侧轴排列方式

5.是否折行

6.行与行之间对齐方式（折行以后）

项目

1.排序

2.自己在侧轴上的对齐方式

3.flex

 网格布局

---

5.CSS3

层级选择器

子集选择器

父级选择器 子集选择器｛属性：属性值；｝

直属子集选择器

父级选择器 > 子级选择器｛属性：属性值；｝

相邻兄弟选择器

兄弟选择器+兄弟选择器｛属性：属性值；｝

通用兄弟选择器

兄弟选择器 ~ 兄弟选择器｛属性：属性值；｝

<div>
        <h1>132</h1>
        <p>123</p>
        <p>123</p>
        <h2>123</h2>
        <p>123</p>
    </div>
    <p>123</p>

div h2{
            color: red;//子集选择器
        }
div > h1{
            color: red;//直属子集选择器
        }
h1 + p{
            color: greenyellow;//相邻兄弟选择器
        }
h1 ~ p{
            color: rebe***apurple;//通用兄弟选择器
        }

属性选择器

选择器【属性名】

指定属性名

选择器【属性名="属性值"】

指定属性名和属性值

选择器【属性名~=“属性值”】

指定属性名和其中一个属性值

选择器【属性名^=“属性值”】

指定属性名和属性值开头

选择器【属性名$=“属性值”】

指定属性名和属性值结束

选择器【属性名*=“属性值”】

指定属性名和属性值内容

选择器【属性名 |=“属性值”】

指定属性名和属性值 或者以 属性值-开头的属性

<hr>
    <hr>
    <hr color="red">
    <hr>
    <hr color="greenyellow">
    <hr>
    <ul>
        <li class="a b"></li>
        <li class="a"></li>
        <li class="asd"></li>
        <li class="cda"></li>
        <li class="bsfg"></li>
        <li class="a-5"></li>
        <li class="c a"></li>
        <li>132</li>
        <li>15132</li>
    </ul>

hr[color]{
            width: 500px;
            margin: 0 auto 0;//指定属性名
        }
        hr[color="red"]{
            width: 300px;
            margin: 0 auto 0;//指定属性名和属性值
        }
        /* li[class~=a]{
            color: red;//指定属性名和其中一个属性值
        } */
        /* li[class^="a"]{
            color: green;//指定属性名和属性值开头
        } */
         /* li[class$="a"]{
            color: pink;//指定属性名和属性值结束
         } */
        /* li[class*="a"]{
            color: orange;//指定属性名和属性值内容
        } */
         li[class|="a"]{
            color: red;//指定属性名和属性值 或者以  属性值-开头的属性
         }

伪类选择器

结构性伪类选择器

• ：first-child

• • 第一个子级

• ：nth-child（）

• • 第几个子级

• ：last-child

• • 最后一个子级

• ：only-child

• • 唯一的一个子级

• ：first-of-type

• • 同类型的第一个子级

• ：nth-of-type( )

• • 同类型的第几个子级

• ：last-of-type

• • 同类型最后一个子级

• ：root

• • 根元素
  • 一个页面只有一个根元素，就是html

• ：empty

• • 没有任何一个子元素（包含文本）的标签

<div>
        <h1>123456879</h1>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
    </div>

div p:first-of-type{
            color: red;
        }//同类型的第一个子级
        div p:nth-of-type(1){
            color: green;
        }//同类型的第几个子级
        div p:last-of-type{
            color: yellow;
        }//同类型的最后一个子级
        :root{
            font-size: 20px;
        }//根元素，一个页面只有一个根元素，就是html
        h2:empty{
            width: 100px;
            height: 100px;
            background-color: red;
        }//没有任何一个子元素（包含文本）的标签

目标伪类选择器

target

h2:target{
            color: red;
        }

UI元素状态选择器

• ：enable

• • 表单中可用状态的控件

• ：disable

• • 表单中不可用状态的控件

• ：checked

• • 表单中选中状态的控件

• • • 针对单选多选

• ：selection

• • 高亮显示选择器

input{
            width: 100px;
            height: 30px;
            background-color: red;
        }
        input:enabled{
            background-color: green;
        }//表单中可用状态的控件
        input:disabled{
            background-color: aqua;
        }//表单中不可用状态的控件
        
        input[type="checkbox"]:checked{
            background-color: green;

        }//表单中选中状态的控件——针对单选多选
        p::selection{
            background-color: aqua;
            color: orange;
        }//高亮显示选择器

否定伪类选择器

not（）

div p:not(:nth-child(6)){
            font-size: 10px;
        }

动态伪类选择器

• ：link

• • 未被访问过

• ：visited

• • 已被访问过

• ：hover

• • 鼠标悬停

• ：active

• • 鼠标按住

• ：focus

• • 获取焦点

• • • 一般针对表单控件

a{
            font-size: 50px;

        }
        a:link{
            color: pink;
        }//未被访问过
        a:visited{
            color: green;
        }//已被访问过
        a:hover{
            color: red;
        }//鼠标悬停
        a:active{
            color: purple;
        }//鼠标按住
        input:focus{
            background: pink;
            height: 50px;
        }获取焦点

伪元素选择器

• ：first-letter

• • 获取第一个字

• ：first-line

• • 获取第一行字

• ：before

• • 在元素之前

• ：after

• • 在元素之后

p::first-letter{
            color: aqua;
            font-size: 20px;
        }//获取第一个字
        p::first-line{
            color: red;
            font-size: 20px;
        }//获取第一行字
        p::before{
            content:"鞠委晟 ";
        }//在元素之前
        p::after{
            content: "";
            width: 50px;
            height: 50px;
            background: url(../day04/img/45bafb6f867a426f513ca6***9df8add.png) no-repeat center center/100% 100%;
            display: block;
        }//在元素之后

字体

字体图标

• 1.下载文件

• • iconfont

• 2.安装iconfont字体
• 3.把整个文件夹放到项目中 加载iconfont.css文件
• 4.标签添加两个类名 一个为iconfont 一个为图标对应类名

特殊字体

• 1.把字体文件放到项目中
• 2.在html页面 所有样式最上面 （包括link标签） 加载字体

• • @font-face{
  • font-family："自己起的名字"；
  • src：url（字体路径）；
  • }

• 3.正常使用此字体

• • font-family："对应加载字体时，自己起的名字"；

@font-face {
            font-family: wx;
            src: url(../day05/fonts/锐字工房洪荒之力黑简1.0.otf);
        }
 @font-face {
            font-family: jws;
            src: url(../day05/fonts/ygyxsziti2.0.ttf);
        }

阴影

盒子阴影

• box-shadow

• • 0px 0px 5px 5px red inset
  • 沿X轴平移 沿Y轴平移 模糊度 模糊范围 颜色 是否为内阴影（可以不给 不给为外阴影）

div{
            width: 200px;
            height: 100px;
            margin: 0 auto;
            border: 30px solid red;
            box-shadow: 0px 0px 5px 5px red inset;
            border-image: url(../day04/img/45bafb6f867a426f513ca6***9df8add.png) ;
            border-image-slice: 30;
        }

文字阴影

• text-shadow

• • 0px 0px 5px red
  • 沿X轴平移 沿Y轴平移 模糊度 颜色

h1{
            font-family: wx;
            text-shadow: 0 0 10px red;
            
        }

边框

border-radius

border-image

• • 单一属性

• • • border-image-sourse

• • • • 属性值为url（图片地址）

• • • border-image-slice

• • • • 按照顺序 上右下左进行图片切片 不加单位

• • • border-image-width

• • • • 图片边框的厚度（需要加单位）

• • • border-image-repear

• • • • 图片是否平铺

• • • • • repeat / strerch（拉伸默认值) /round 铺满

• • 复合属性

• • • border-image

div{
            width: 200px;
            height: 100px;
            margin: 0 auto;
            border: 30px solid red;
            box-shadow: 0px 0px 5px 5px red inset;
            border-image: url(../day04/img/45bafb6f867a426f513ca6***9df8add.png) ;
            border-image-slice: 30;
        }

背景

背景图大小

cover

contain

多张背景图

逗号隔开

渐变

线性渐变（linear-gradient）

• linear-gradient

• • 方向，颜色1，颜色2，......
  • 方向

• • • to top
    • to bottom
    • to left
    • to right
    • to top left
    • to top right
    • to bottom left
    • to bottom right
    • 15deg

.p1{
            background: linear-gradient(to top,pink,skyblue);
        }
        .p2{
            background: linear-gradient(30deg,red,green);
        }

径向渐变（radial-gradient）

• radial-gradient

• • 开始位置，形状，大小，颜色1，颜色2
  • 注意：形状和大小二选一，如果都书写，渐变背景颜色将不显示
  • 开始位置

• • • 位置1 位置2
    • 位置1

• • • • X轴上的位置

• • • 位置2

• • • • Y轴上的位置

• • • 可以给百分比
    • 可以给center
    • 0% 0% 是左上角
    • 100% 100% 是右下角

• • 形状

• • • circle

• • • • 圆形

• • • ellipse

• • • • 椭圆形

• • • 如果是正方形，圆形和椭圆形效果一致

• • 大小

• • • closest-side

• • • • 最近的边

• • • closest-corner

• • • • 最近的角

• • • farthest-side

• • • • 最远的边

• • • farthest-corner

• • • • 最远的角

.p3{
            background: -webkit-radial-gradient(center center ,circle,pink,skyblue);
        }
        .p4{
            background: -webkit-radial-gradient(center center,ellipse,pink,skyblue);
        }
        .p5{
            width: 500px;
            background: -webkit-radial-gradient(center center, circle,pink,blue);
        }
        .p6{
            width: 500px;
            background: -webkit-radial-gradient(center center, ellipse,pink,blue);
        }
        .p7{
            width: 500px;
            background: -webkit-radial-gradient(15% 15%,closest-side,pink,blue);
        }
        .p8{
            width: 500px;
            background: -webkit-radial-gradient(15% 15%,closest-corner,pink,blue);
        }
        .p9{
            width: 500px;
            background: -webkit-radial-gradient(15% 15%,farthest-side,pink,blue);
        }
        .p10{
            width: 500px;
            background: -webkit-radial-gradient(15% 15%,farthest-corner,pink,blue);
        }

重复渐变

repeating

所有颜色后面加上百分比（位置）

.p11{
            background: -webkit-repeating-radial-gradient(center center,circle,pink 10%,blue 20%,pink 30%);
        }
        .p12{
            background: repeating-linear-gradient(to top,pink 10%,blue 20%,pink 30%);
        }

浏览器兼容

• 加对应的浏览器前缀

• • border-image:url(.......)；
  • /*针对webkit 内核的浏览器 === 谷歌/苹果/Edge*/
  • -webkit-border-image：url（.......）；
  • /*针对Gecko内核的浏览器 === 火狐*/
  • -moz-border-image：url（.........）；
  • /*针对Trident内核的浏览器 === 微软/IE */
  • -ms-border-image：url（.........）；
  • /*针对Blink内核的浏览器 === 欧朋*/
  • -o-border-image：url（.........）；

弹性盒布局

容器

1.开启弹性盒

• display

• • 属性值

• • • flex

• • • • 块级

• • • inline-flex

• • • • 行内

display：flex；//块级

display：inline-flex//行内

2.定主轴方向

• flex-direction

• • 属性值

• • • row

• • • • 从左到右

• • • • • 默认值

• • • row-reverse

• • • • 从右到左

• • • column

• • • • 从上到下

• • • column-reverse

• • • • 从下到上

flex-direction: row;//从左到右（默认值）
flex-direction:row-reverse;//从右到左
flex-direction:column;//从上到下
flex-direction:column-reverse;//从上到下

3.主轴的排列方式

• justify-content

• • 属性值

• • • flex-start

• • • • 主轴开始位置

• • • • • 默认值

• • • flex-end

• • • • 主轴结束位置

• • • center

• • • • 主轴中间位置 居中

• • • space-between

• • • • 两端对齐，项目与项目之间距离相等，项目与容器之间没有距离

• • • space-around

• • • • 环绕对齐，项目与项目之间距离相等，是项目与容器之间距离的2倍

• • • space-evenly

• • • • 等分对齐，项目与项目之间距离相等，和项目与容器之间的距离也相等

justify-content:flex-start;//主轴开始位置（默认值）
justify-content:flex-end;//主轴结束位置
justify-content:center;//主轴中间位置 居中
justify-content:space-between;//两端对齐，项目与项目之间距离相等，项目与容器之间没有距离
justify-content:space-around;//环绕对齐，项目与项目之间的距离相等，是项目与容器之间距离的2倍
justify-content:space-evenly;//等分对齐，项目与项目之间的距离相等，和项目与容器之间的距离也是相等

4.侧轴排列方式

• align-items

• • 属性值

• • • flex-start

• • • • 侧轴开始位置

• • • • • 默认值

• • • flex-end

• • • • 测轴结束位置

• • • center

• • • • 侧轴中间位置 居中

align-items:flex-start;//侧轴开始位置（默认值）
align-items:flex-end;//侧轴结束位置
align-items:center;//侧轴中间位置 居中

5.是否折行

• flex-wrap

• • 属性值

• • • nowrap

• • • • 不折行

• • • • • 默认值

• • • wrap

• • • • 折行

• • • wrap-reverse

• • • • 反向折行

flex-wrap:nowrap;//不折行（默认值）
flex-wrap:wrap;//折行
flex-wrap:wrap-reverse;//反向折行

6.行与行之间对齐方式（折行以后）

• align-content

• • 属性值

• • • flex-start

• • • • 侧轴开始位置，行与行之间没有距离

• • • flex-end

• • • • 测轴结束位置，行与行之间没有距离

• • • center

• • • • 侧轴中间位置 居中，行与行之间没有距离

• • • space-between

• • • • 两端对齐，行与行之间距离相等，行与容器之间没有距离

• • • space-around

• • • • 环绕对齐，行与行之间距离相等，是行与容器之间的距离的2倍

• • • space-evenly

• • • • 等分对齐，行与行之间距离相等，和行与容器之间的距离也相等

align-content:flex-start;//侧轴开始位置，行与行之间没有距离
align-content:flex-end;//侧轴结束位置，行与行之间没有距离
align-content:center;//侧轴中间位置 居中，行与行之间没有距离
align-content:space-between;//两端对齐，行与行之间距离相等，行与容器之间没有距离
align-content:space-around;//环绕对齐，行与行之间距离相等，是行与容器之间的距离的2倍
align-content:space-evenly;//等分对齐，行与行之间距离相等，和行与容器之间的距离也相等

项目

1.排序

• order

• • 属性值为数字，没有单位
  • 数字越大，排列越靠后
  • 默认为0
  • 可以为负数

order:1
order:-1

2.自己在侧轴上的对齐方式

• align-self

• • 属性值

• • • auto

• • • • 继承父元素的align-items属性

• • • • • 默认值

• • • flex-start

• • • • 侧轴开始位置

• • • flex-end

• • • • 侧轴结束位置

• • • center

• • • • 侧轴中心位置 居中

• • • stretch

• • • • 拉伸适应父级容器

• • • • • 本身没有宽度/高度

align-self: auto;//继承父元素的align-items属性——默认值
align-self: flex-start;//侧轴开始的位置
align-self: flex-end;//侧轴结束的位置
align-self: center;//侧轴中心位置 居中
align-self: stretch;//拉伸适应父级容器（本身没有宽度/高度）

3.flex

• 单一属性

• flex-grow
• 扩展的是
• 属性值为数字
• 当父级元素有剩余的时候，子级元素按照比例进行扩展
• 默认值为0
• 当父级元素有剩余的时候，子级元素按照比例进行扩展
• flex-shrink
• 收缩的量
• 0
• 当父级元素小于子级元素总长度的时候，自己元素不会被压缩
• 1
• 默认值
• 当父级元素小于子级元素总长度的时候，子级元素会被压缩
• 当父级元素小于子级元素总长度的时候，如果子级元素都选择不被压缩，那么会正常溢出
• flex-basis
• 项目默认长度
• 子级元素给的宽高，如果没有宽高，默认子级元素占地面积为准
• 复合属性
• flex：1
• 1 1 0%
• flex：auto
• 1 1 auto
• flex：none
• 0 0 auto
• flex：0 auto
• 0 1 auto
• 多列布局

flex-grow: 2;
flex-shrink: 1;
flex-basis：auto;
flex:1;——1  1  0%
flex:auto;——1  1  auto
flex:none;——0  0  auto
flex:0 auto;——0  1  a

 网格布局

容器属性

a. 1. 开启网格

display

grid

inline-grid

 display: grid;
 display: inline-grid;

b. 2. 划分行列

划分行 grid-template-rows

划分列 grid-template-columns

属性值
1. 绝对大小
grid-template-rows:50px 50px 50px
2. 百分比
grid-template-rows:30% 30% 30%
3. 功能函数 repeat(重复的次数，重复的数值)
grid-template-rows:repeat(3,15%);
4. auto-fill关键字
自动填充，配合 功能函数 repeat使用
grid-template-rows:repeat(auto-fill,76.54px)
5. fr关键字
片段划分
grid-template-rows:100px 1fr 3fr 1fr 35px;
grid-template-columns:repeat(7,1fr);
6. minmax()功能函数
设置范围 100px 100px minmax(150px,300px);
7. auto
自动填充 grid-template-rows:100px 100px auto;

    /* grid-template-rows: 100px 100px 100px 100px;
            grid-template-columns: 100px 100px 100px 100px; */

            grid-template-rows: 20% 20% 20% 20%;
            grid-template-columns: 20% 20% 20% 20%;

            /* grid-template-rows: repeat(4,25%);
            grid-template-columns: repeat(4,25%); */

            /* grid-template-rows: repeat(auto-fill,56px);
            grid-template-columns: repeat(auto-fill,56px); */

            /* grid-template-rows: 100px 1fr 3fr 1fr 100px;
            grid-template-columns: 100px 1fr 3fr 1fr 100px; */

            /* grid-template-rows: 50px 50px  50px minmax(200px ,300px);
            grid-template-columns: 50px 50px 50px minmax(200px ,300px); */

            /* grid-template-rows: 50px 50px 60px auto;
            grid-template-columns: 50px 50px 60px auto; */

c. 3.单元格间距

单一属性

grid-row-gap 行间距

grid-column-gap 列间距

复合属性

grid-gap 行间距 列间距

注意: 新版可以省略 grid

gap: 10px 10px;

d. 4. 项目排列顺序

grid-auto-flow

row 默认值

column

            grid-auto-flow: column;

e. 5. 单元格内容对齐

单一属性

justify-items

align-items

复合属性

place-items 值1 值2

属性值

start 开始位置

end 结束位置

center 居中

stretch 拉伸 项目没有固定宽高

f. 6.单元格项目对齐

单一属性

justify-content

align-content

复合属性

place-content 值1 值2

属性值

start 开始位置

end 结束位置

center 居中

stretch 拉伸 项目没有固定宽高

space-around（与弹性盒效果相同）

space-evenly（与弹性盒效果相同）

space-between（与弹性盒效果相同）

eg:

网格合并

        p{ 
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        .con1{
            width: 1000px;
            height: 300px;
            display: grid;
            grid-template-rows: repeat(4,1fr);
            grid-template-columns: repeat(13,1fr);
            
            margin: 50px auto 10px;
            gap: 10px 10px;
        }
        .con1 div{
            background-color: #e27d71;
        }
        .con1 div:nth-child(1){
            grid-column: 1/3;
            grid-row: 2/3;
        }
        .con1 div:nth-child(2){
            grid-column: 1/3;
            grid-row: 3/5;
        }
        .con1 div:nth-child(3){
            grid-column: 6/9;
            grid-row: 2/4;
        }
        .con1 div:nth-child(4){
            grid-column: 10/12;
            grid-row: 1/2;
        }
        .con1 div:nth-child(5){
            grid-column: 12/14;
            grid-row: 1/3;
        }
        .con1 div:nth-child(6){
            grid-column: 12/14;
            grid-row: 4/5;
        }