5.前端学习-css-03

小俞的大宝贝

已于 2023-09-12 13:47:13 修改

阅读量78

点赞数

分类专栏：前端学习文章标签：前端学习 css

于 2023-09-12 01:33:23 首次发布

本文链接：https://blog.csdn.net/dashuaigeyyds/article/details/132819930

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. BFC

1.1 BFC概念

BFC概念的解释(只针对于块级元素)
- 1.块级格式化上下文:主要是对代码规范,布局方式约束
- 2.重要:BFC区域是一个封闭的盒子,内部的布局和外面毫不相干
- 3.BFC只是一个概念,并不是具体的属性或者属性

1.2 BFC的触发

一:BFC的触发条件
- 1.最简单的触发:HTML文档最大的BFC
- 2.最常用的触发:overflow(hidden/auto)
- 定位、浮动、overflow: hidden、display 不为 none 的各种。
  - （1）position:absolute或fixed；
  - （2）float:left/right;
  - （3）overflow:hidden; 不为visible，常用方式;
  - （4）display:inline-block; flow-root, table-cell, table-caption, flex, inline-flex等。

二:BFC触发之后会有哪些规范?
- 1.Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠
  - 应用:防止marin重叠
- 2.BFC的区域不会与float box发生重叠
  - 应用:自适应两栏布局
- 3.计算BFC的高度时,浮动元素也参与计算
  - 应用:清除内部浮动(高度塌陷)
- 4、BFC内部的Box会在垂直方向,一个接一个的放置
  - 块级元素的特点
- 5、每个元素的margin box的左边会与包含块border box的左边相接触即使存在浮动也会如此
  - 设置margin的时候必须要和父级容器的边框相接触
- 6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

1.3 常见后台布局

常见后台布局:两栏布局(左侧是固定的,右侧可以根据屏幕大小进行适应)

1.定位属性

2.计算属性

3.触发BFC:浮动的盒子不与BFC相重叠

    <style>
        *{
            margin: 0;padding: 0
        }
        .box1{
            width: 200px;
            height: 500px;
            background: pink;
            float: left;
        }
        .box2{
            /* 块级元素不设置宽度的时候默认就是100% */
            /* width: 100%; */
            height: 500px;
            background: green;
            overflow: hidden
        }
    </style>

<body>
    <div class="box1">左侧盒子</div>
    <div class="box2">右侧盒子</div>
</body>

效果：

2. 自适应

2.1 宽度自适应

宽度自适应的设置

1.属性和属性值: width:100%
2.宽度自适应的特点
- 浏览器HTML、body是块级元素,宽度默认是100%
- 当块级元素设置宽度为100%或者宽度不写的时候,默认是沾满浏览器全屏宽度(通栏效果)
- 子级元素不设置宽度,会与父级等宽,宽度没有继承,只是布局规范效果
- 【重点】如果当前元素没有设置宽度并且脱离文档流的时候,宽度由内容决定
- 设置浮动和定位的时候一定切记要给元素设置宽高大小

2.2 高度自适应

高度自适应的设置

1.属性和属性值: height:100%
2.高度自适应的特点
- 浏览器默认高度是0,常用的设置html,body{height:100%}
- 设置height:0 高度为0 盒子不会显示,内容会超出容器
- 设置height:auto、或者height不写的时候,做到自适应
- 需求:
  - 三个盒子,分别是上中下
  - 上下盒子宽度是一样的
  - 中间盒子
    - 当有内容的时候要根据内容自动撑开父级高度
    - 无内容的时候父级的高度保持一个最小高度

2.3 最小高度

根据需求引出新的属性:min-height
- 1.解释:最小高度
- 2.作用
  - 第一:没有内容的时候可以保持一个固定的高度 => height:固定值
  - 第二:内容较多并且超出的时候会自动撑开高度 => height:auto
- 3.注意:最小高度的兼容问题(不支持低版本浏览器) IE8及以下

拓展

1.最大值
- 最大的宽度 max-width:1920px 约束页面的最大值
- 最大的高度 max-height:1000px 评论区
2.最小值
- 最小的宽度布局问题
- 最小的高度 min-height 自适应

    <style>
        *{
            margin: 0;padding: 0;
        }
        .box1{
            height: 100px;
            background: pink
        }
        .box3{
            height: 100px;
            background: skyblue;
        }
        .box2{
            /* 有内容的时候会自动撑开高度 */
            /* height: auto; */
            background: orange;
            /* 无内容的时候会有最小固定高度 */
            min-height:300px
        }
    </style>

<body>
    <div class="box1">上面</div>
    <div class="box2">
        <p>0001</p>
        <p>0002</p>
        <p>0003</p>
        <p>0004</p>
        <p>0005</p>
        <p>0006</p>
        <p>0007</p>
        <p>0008</p>
        <p>0009</p>
        <p>0010</p>
        <p>0011</p>
        <p>0012</p>
        <p>0013</p>
        <p>0014</p>
        <p>0015</p>
        <p>0016</p>
        <p>0017</p>
        <p>0018</p>
        <p>0019</p>
        <p>0020</p>
    </div>
    <div class="box3">下面</div>
</body>

效果：

2.4 高度塌陷

高度塌陷/高度坍塌的概念

一.造成的原因:父级没有设置高度(实现自适应),子级设置了浮动属性
二.高度塌陷的解决方法有很多(10几种)
- 1.在父级元素上添加overflow:hidden即可解决
  - 原理:触发了BFC,BFC中有一条布局规则:浮动元素也参与计算高度
- 2.在浮动元素的下面添加一个任意标签,设置div{clear:both}
  - 解释:clear清除 left/right/both两者
  - 原理:清浮动,清除的是上方预留出来的空间
  - 优缺点:优点清除方便、缺点代码冗余
- 3.万能清除法(只要求会用,不要求理解)
  - 原理:触发BFC并且清除浮动
  - 代码:在父级元素上设置类名 clear-fix

.clear-fix::after{
content:"";
display:block;
width:100%;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}

    <style>
        /* 中间盒子:自适应 */
        .box {
            width: 1000px;
            height: auto;
            border: 10px solid red;
            margin: 100px auto;
        }

        .box1 {
            width: 300px;
            height: 200px;
            background: pink;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 200px;
            background: skyblue;
            float: left;
            margin: 0 10px;
        }

        .box3 {
            width: 300px;
            height: 200px;
            background: orange;
            float: left;
        }
    </style>


<body>
    <div class="box clear-fix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <!-- 这个位置添加 -->
    </div>
</body>

效果;

2.5 万能清除法的属性解释

.clear-fix::after{
content:"";
display:block;
width:100%;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}

一:伪对象选择器/伪元素选择器
- 1.选择器::after{content:""} 表示在xxx之后添加内容,content固定搭配,可以不写任何内容
- 2.选择器::before{content:""} 表示在xxx之前添加内容,content固定搭配,可以不写任何内容
- 3.first-letter{} 第一个字符
- 4.first-line{} 第一行文本
- 5.::selection 鼠标选择到的时候状态改变
二:隐藏元素的使用
- 1.visibility:hidden 隐藏了显示方式、位置还是存在的
- 2.display:none 隐藏元素(显示方式、页面结构、控制台中结构)
三:思考题:伪类和伪对象的区别?
- 1.伪类:link、visited、hover、active
- 2.伪对象:before、after
- 区别: - 在css2中伪类和伪对象都是一个冒号,css3中为了区分,规定伪对象需要使用两个冒号 - 伪类只能改变元素的样式,伪对象不仅仅可以改变样式还可以增加结构

3. h5

3.1 语义化标签

语义化标签:顾名思义、一看就懂、懂得都懂

解释
- 浏览器搜索引擎会优先捕捉语义化标签
- 在pc端布局中不推荐使用语义化标签、移动端中去用
- main 主体内容

section header nav aside article footer figure figcation mark hgroup dialog dl dt dd

    <style>
        section{
            width: 1000px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto
        }
        header{
            width: 100%;
            height: 50px;
            background: pink
        }
        nav{
            height: 50px;
        }
        nav a{
            width: 200px;
            height: 50px;
            float: left;
            text-decoration: none;
            text-align: center;
            line-height: 50px;
            color: #000
        }
        aside{
            width: 200px;
            height: 400px;
            background: green;
            float: left;
        }
        article{
            width: 800px;
            height: 400px;
            background: orange;
            float: right;
        }
        footer{
            width: 100%;
            height: 50px;
            background: skyblue;
            float: left;
            text-align: center;
            line-height: 50px;
        }
    </style>

<body>
    <section>
        <header>
            <nav>
                <a href="">首页1</a>
                <a href="">首页2</a>
                <a href="">首页3</a>
                <a href="">首页4</a>
                <a href="">首页5</a>
            </nav>
        </header>
        <aside>
            新闻的导航
        </aside>
        <article>
            网页中的新闻信息
        </article>
        <footer>底部</footer>
    </section>
    <hr>
    <dl>
        <dt>名词</dt>
        <dd>名词的解释</dd>
    </dl>
    <figure>
        <p>名词</p>
        <figcaption>名词的解释</figcaption>
    </figure>
    <mark>
        文本
    </mark>
   <hgroup>
        <h1>文本</h1>
        <h2>文本</h2>
        <h3>文本</h3>
        <h4>文本</h4>
        <h5>文本</h5>
        <h6>文本</h6>
   </hgroup>
   <dialog open>
       <input type="button" value="一刀999级">
   </dialog>
</body>

效果：

3.2 音视频标签

之前的页面可以使用embed或者flash去实现,很多浏览器都不支持了,所以不建议使用
音视频标签的使用
- 1.音频 audio
- 2.视频 video
- 3.属性
  - src 引入文件的路径
  - contorls 控件比如播放按钮
  - autoplay 自动播放
  - loop 循环
  - muted 静音
  - poster 类似于img 首屏的图片
- 4.注意
  - 属性:属性值!important 表示权重最高
  - 现在很多浏览器为了追求性能占据市场份额,不可以自动播放一些动态的资源
- 5.问题:每个浏览器对资源的解析都是不一样的识别不同的资源后缀名

<body>
    <audio src="images/晴天.mp3" controls autoplay preload="auto" loop muted></audio>
    <video src="images/kk.mp4" controls autoplay loop poster="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F19%2F20210619153702_ef185.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655869651&t=f9469b6e5bfa2a754e9728d05f771a9d"></video>
    <!-- 适配所有的浏览器写法 -->
    <audio>
        <!-- 资源加载 -->
        <source src="images/晴天.mp3">  <!-- 谷歌浏览器 -->
        <source src="images/晴天.mp4"> 
    </audio>
    <video>
        <!-- 资源加载 -->
        <source src="images/kk.mp4">    
    </video>
</body>

效果：

3.3 h5新增的智能标签

H5中新增的智能表单有前提

1.需要在form表单域中设置

2.必须要有提交按钮

3.智能表单只能检测你的数据格式是否是正确的的,数据是否存在的是无法检测

<form>
<p> 邮件: <input type="email" multiple> </p>
<p> 路径: <input type="url"> </p>
<p> 数字: <input type="number" min="0" max="100" step="3"></p>
<p> 滑块: <input type="range" min="0" max="100" step="10"></p>
<p> <input type="submit"> </p>
</form>

效果：

3.4 h5新增的时间表单

<form>
<p> 年月日: <input type="date"></p>
<p> 年月: <input type="month"> </p>
<p> 周数: <input type="week"></p>
<p> 时间: <input type="time"></p>
<p> 本地时间: <input type="datetime-local"></p>
<p> 标准时间: <input type="datetime"></p>
<p> <input type="submit"> </p>
</form>

效果：

3.5 h5新增的表单属性

<style>
/* placeholder 设置字体大小的时候可以直接使用文本属性 */
/* 如果设置的是字体颜色的话就需要借助伪对象选择器 */
input{
font-size: 12px
}
input::-webkit-input-placeholder{
color: green
}
</style>


<form novalidate>

<p> 姓名: <input type="text" required autofocus></p>
<p> 密码: <input type="password" placeholder="请填写你的密码"></p>
<p> 号码: <input type="text" maxlength="11"></p>
<p> <input type="submit"></p>
</form>

效果：

3.6 h5新增的表单标签

<form>


<p> 搜索: <input type="text" list="search"></p>
<datalist id="search">
<option value="http://www.baidu.com">百度</option>
<option value="http://12345.com">111</option>
</datalist>
<p><input type="submit"></p>
</form>

效果：

4. css3基础

4.1 css属性选择器

CSS3的属性选择器:表示通过选择属性从而修饰标签

1.E[attr] 选择标签并且选择到属性
- E:标签名称/某个选择器
- [] 表示选择设置属性
- attr 属性
2.E[attr="value"] 选择标签并且选择到属性和属性值
3.E[attr^="value"] 选择标签并且选择到属性和属性值(开头)
4.E[attr$="value"] 选择标签并且选择到属性和属性值(结束)

    <style>
        /* 标签选择器 */
        a{
            color: red
        }
        /* E[attr] */
        a[href$="www.8.com"]{
            color: green
        }
    </style>

<body>
    <a href="www.8.com">8号技师宝贝</a>
    <a href="www.9.com">你是9号</a>
    <a href="www.top.com">你是头牌</a>
</body>

效果：

4.2 css3的结构选择器

结构性伪类选择器:选择到集合中的某一个

一:当标签名称一样的时候
- 1.E:first-child 获取相同标签组成的集合下面的第一个子级元素
- 2.E:last-child 获取相同标签组成的集合下面的最后一个子级元素
- 3.E:nth-child(n){} 获取相同标签组成的集合下面的第几个子级元素(从前往后数)
- 4.E:nth-last-child(n){} 获取相同标签组成的集合下面的第几个子级元素(从后往前数)
  - n 默认表示选择到全部
  - 2n/3n/2n+1/2n-1
  - odd/even 奇数和偶数
二:当标签名称不一样的时候:先筛选分类相同的标签组成一个集合,再从集合中选择到第几个
- 1.E:first-of-type 获取相同标签组成的集合下面的第一个子级元素
- 2.E:last-of-type 获取相同标签组成的集合下面的最后一个子级元素
- 3.E:nth-of-type(n){} 获取相同标签组成的集合下面的第几个子级元素(从前往后数)
- 4.E:nth-last-of-type(n){} 获取相同标签组成的集合下面的第几个子级元素(从后往前数)

<style>
      p:nth-of-type(1){
          color: red
      }
      div:nth-of-type(8){
          color: green
      }
    </style>

<body>
   <div>男同学1</div>
   <p>女同学1</p>
   <div>男同学2</div>
   <p>女同学2</p>
   <div>男同学3</div>
   <p>女同学3</p>
   <div>男同学4</div>
   <p>女同学4</p>
   <div>男同学5</div>
   <p>女同学5</p>
   <div>男同学6</div>
   <p>女同学6</p>
   <div>男同学7</div>
   <p>女同学7</p>
   <div>男同学8</div>
   <p>女同学8</p>
   <div>男同学9</div>
   <p>女同学9</p>
   <div>男同学10</div>
   <p>女同学10</p>
</body>

效果：

4.3 鸡肋选择器

/* 当div下面是空的时候可以设置的样式 */
div:empty{
width: 100px;
height: 100px;
background: pink
}
html:root{
background: pink
}

4.4 css3的ul选择器

CSS3中的UI伪类选择器:实现交互的标签 input

1.input:enabled{可用状态下的样式}
2.input:disabled{禁用状态下的样式}
3.input:checked{选中状态下的样式}
4.注意:
- input中的默认样式
- 多个表单控件之间设置会有间距,需要把多个写在一行
- 当type类型为button的时候,默认是怪异盒模型

    <style>
        *{
            margin: 0;padding: 0
        }
        input[type="text"]{
            width: 200px;
            height: 30px;
            border: 1px solid #000;
            float: left;
            outline: none;
            border-right: none
        }
        input[type="button"]{
            float: left;
            width: 50px;
            height: 30px;
            border: 1px solid #000;
            box-sizing: content-box
        }
        /* 可用状态 */
        input:enabled{
            background: skyblue
        }
        /* 禁用状态 */
        input:disabled{
            background: #ccc
        }
        /* 默认选择 */
        input:checked{
            width: 30px;
            height: 30px;
        }
    </style>

<body>
    <input type="text">
    <input type="button" value="提交">
    <br>
    <br>
    <input type="password" disabled>
    <input type="checkbox" checked> 
</body>

效果：

4.5 css3的其他选择器

CSS3中的否定选择器:表示除了xx其他的都会被选择中
- 用法:选择器:not(排除的对象){}

    <style>
        div:not(.box){
            color: red
        }
    </style>

<body>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div class="box">你D毛</div>
</body>

效果：

CSS3中的目标选择器:选择器可用于选取当前活动的目标元素(改变元素的状态,类似于点击事件)
- 1.语法: :target
- 2.使用: 哪个元素改变就给元素添加即可
- 3.注意: 需要结合锚点使用

    <style>
        div:target{
            font-size: 50px;
            color: red
        }
    </style>

<body>
    <div id="box1">灯</div>
    <a href="#box1">开关</a>
</body>

效果：

点击开关后：

4.6 浏览器前缀

市面上常见的五大浏览器:谷歌、火狐、欧朋、Safari、IE 市面上常见的弟弟浏览器:QQ、360、uc、搜狗、夸克、王牌2345(注册码10块) 浏览器厂商不一样,所以源码也不一样(内核解析CSS) 由于CSS3版本更新了有很多的新的属性,浏览器不是全部都可以支持,有的属性不支持所以就需要使用每个浏览器的私有前缀

1.-ms-   IE浏览器专属的CSS属性需添加
2.-moz-   所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加
3.-o-   Opera浏览器专属的CSS属性需添加,现在已经抛弃了使用,和谷歌一起研发了blink内核
4.-webkit- 所有基于Webkit引擎的浏览器（如Chrome、Safari）

优雅降级和渐进增强:开发思想
        1.优雅降级:保证自己正常的生活才去帮助别人(先写PC后写移动)
        2.渐进增强:从风扇到空调的安装(先写移动后写PC)

插件：
自动生成前缀的插件名称:Autoprefixer
        1.在编辑器中按住ctrl+shift+p 调出命令行
        2.选中使用即可

截图插件名称:polacode 可以长截图代码
        1.在编辑器中按住ctrl+shift+p 调出命令行
        2.选中polacode 在代码页面选中
        3.在截图下面保存即可

4.7 文本阴影和盒子阴影

文本阴影的设置
- 1.属性:text-shadow
- 2.属性值:常见的属性值有4个
  - 第一个属性值:X轴
  - 第二个属性值:Y轴
  - 第三个属性值:模糊程度
  - 第四个属性值:颜色值
  - 四个是一组属性值,还可以添加多组,只需要在前面一组后面添加一个逗号即可
盒子阴影的设置
- 1.属性:box-shadow
- 2.属性值:常用的有5个
  - 第一个属性值:X轴
  - 第二个属性值:Y轴
  - 第三个属性值:模糊程度
  - 第四个属性值:颜色
  - 第五个属性值:阴影在内还是在外显示 inset

4.8 背景尺寸大小

CSS3背景尺寸大小的设置

1.属性:background-size
2.属性值
- 100% 100% 宽度和高度容器一样图片变形
- 100% 和100% auto相等宽度和父级容器一样高度自适应
- cover 覆盖图片等比例的缩放盖住整个容器图片不会变形只会裁切
- contain 覆盖宽高某一个方向碰到父级包含框的时候就会停止变化图片不会变形也不会裁切

4.9 css3圆角属性

使用CSS绘制图形:正方形、长方形、梯形、三角形、圆形、爱心
圆角属性的设置
- 1.属性:border-radius(半径)
- 2.属性值
  - 一个属性值:左上右上右下左下 (可以设置宽高的一半,还可以50%~100%)
  - 两个属性值:左上右下右上左下
  - 三个属性值:左上右上左下右下
  - 四个属性值:左上右上右下左下
  - 八个属性值:左上x 右上x 右下x 左下x/左上y 右上y 右下y 左下y
- 3.在设计图上如何量取圆角值:顶部和左侧相交的点开始量取,接触到容器的边框就是当前盒子的圆角大小

4.10 css3渐变

线性渐变
- 一.属性:background/background-image
- 二.属性值:linear-gradient
- 三.linear-gradient(方向,颜色值1,颜色值2,...表示更多颜色)中的参数使用
- 四.参数中方向的设置
  - 1.如果没有需求的时候,方向可以省略不写(从上到下)
  - 2.每个参数之间都需要使用逗号隔开
- 五:线性渐变的方向设置标准写法兼容写法属性 background background 属性值 linear-gradient -浏览器前缀-linear-gradient 方向1 to 结束的方向值不加to,设置开始的方向方向2 to 结束的对角不加to,设置开始的角度方向3 角度值 deg 90-标准写法
径向渐变的设置(了解)
- 1.属性:background
- 2.属性值:radial-gradient(起点位置,渐变的形状,渐变的大小,颜色1,颜色2)
  - 起点的位置:默认是在正中间的/top、right、bottom、left/value值
  - 渐变的形状:ellipse默认为椭圆形 circle表示圆形
  - 渐变的大小:closest-side farthest-side closest-corner farthest-corner
- 3.径向渐变的注意点
  - 径向渐变只有兼容写法
  - 当渐变的形状和大小同时存在的时候之间需要使用空格隔开
重复渐变

background: repeating-linear-gradient(#000 15%,#fff 30%)
background: repeating-radial-gradient(#fff 5%,#000 10%);

   // 重复渐变
<style>
        .box1{
            width: 500px;
            height: 200px;
            background: repeating-linear-gradient(#000 15%,#fff 30%)
        }
        .box2{
            width: 500px;
            height: 500px;
            background: repeating-radial-gradient(#fff 5%,#000 10%);
            margin: 100px auto;
            border-radius: 50%;
            transition: 10s
        }
        .box2:hover{
            transform: rotate(3600deg)
        }
    </style>

<body>
    <div class="box1"></div>
    <div class="box2">
        你有压力吗?
    </div>
</body>

效果：

5. 阿里巴巴矢量图

阿里巴巴矢量图标库(iconfont-阿里巴巴矢量图标库) iconfont字体库
- 下载到本地使用 => 公司开发没有网络的时候
- 在线直接使用 => 正常公司
关于本地使用下载后文件的解释
- demo_index.html+deno.css 表示当前文件的操作手册
- iconfont.css/js/json 修饰图标
- ttf/woff/woff2 字体库/字体类型
多种方式使用的优缺点
- unicode:优点是兼容性好,缺点是没有颜色,使用麻烦
- fontClass:优点是方便简单推荐使用,缺点是没有颜色
- symbol:优点是有颜色,缺点是svg图片格式加载慢效果没有jpg好