前端学习笔记(简易)_前端填满盒子-CSDN博客

本文链接：https://blog.csdn.net/m0_47066335/article/details/124737614

web三大标准的构成

HTML：结构，决定了身体
CSS：表现，决定了样式美观
Javascript：行为，决定了交互的动态效果

HTML

HTML(Hyper Text Markup Language):超文本标记语言

<strong>加粗字体</strong>

开发工具：Visual Studio、HBuilder、DreamWeaver、等
Alt+B:以默认浏览器打开

颜色取值方法

属性名：文字颜色color；背景颜色background-color
属性值：
- 关键字：red、green
- rgb表示法：红绿蓝三原色，每项取值范围：0-255；rgb(0,0,0),rgb(255,255,255)
- rgba表示法：红绿蓝三原色+a表示透明度，取值范围是0-1，rgba(255,255,255,0.5)
- 十六进制表示法：#开头，将数字转换成十六进制表示：#000000,#ff0000

元素显示模式

块级元素

显示特点：
- 独占一行
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高生效
- 代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header

行内元素

显示特点：
- 一行可以显示多个，不换行
- 宽度和高度默认内容撑开，尺寸和内容的大小相同
- 不可以设置宽高
- 代表标签：a、span、b、u、i、s、strong、ins、em、del

行内块元素

显示特点：
- 一行可以显示多个
- 可以设置宽高
- 代表标签：input、textarea、button、select
- 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求
语法：
- display：block，转换成块级元素
- display inline-block：转换成行内块元素
- display：inline：转换成行内元素

css

继承性：
- 特性：子元素有默认继承父元素样式的特点（子承父业）
- 可以继承的常见属性（文字控制属性都可继承）：
  - color
  - font-style,font-weight,font-size,font-family
  - text-indent,text-align
  - line-height
- 继承失效的特殊情况：
  - 如果浏览器有默认样式，继承存在，但会失效。如a标签有默认颜色标签，继承父元素颜色标签会失效
层叠性：
- 给同一个标签设置不同的样式，此时样式会层层叠加，会共同作用在标签上
- 给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

css特性

后代选择器语法：选择器1 选择器2{css}
子选择器语法：选择器1>选择器2{css}
并集选择器语法：选择器1，选择器2{css}，多组标签设置相同的样式
交集选择器语法：选择器1选择器2{css}，选中页面中同时满足多个选择器的标签
权重叠加计算
- 复合选择器中的优先级：行内选择器>id选择器>类选择器>标签选择器
- 比较规则：
  - 先比较第一级数字，如果比较出来了，之后的统统不看
  - 如果第一级数字相同，再去比较第二级数字，如果比较出来了，之后的统统不看
  - 。。。。
  - 如果最终所有数字都相同，表示优先级相同，则比较层叠性，谁写在下面说了算
  - !important如果不是继承，则权重最高，天下第一！
清除默认内外边距：

* {
     margin:0;
     padding:0;
  }

css书写顺序：
（1）浮动/display
（2）盒子模型：margin border padding 宽度高度背景色
（3）文字样式
清除浮动一：双伪元素，直接复制粘贴

 /*
        .clearfix::before 作用：解决外边距塌陷问题
        外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置
        */
        /*清除浮动*/
        .clearfix::before,clearfix::after {
            content: '';
            display: table;
        }
        /*真正清除浮动的标签*/
        .clearfix::after {
            clear: both;
        }

清除浮动二：给父元素设置overflow:hidden

伪元素

::before：在父元素内容的最前添加一个伪元素
::after：在父元素的最后添加一个伪元素
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .father::before{
            /*内容*/
            /*content必须添加，否则不生效*/
            content: '老鼠';
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;
            /*默认是行内元素，宽高不生效*/
            display: block;
        }

        .father::after {
            content: '大米';
        }
    </style>
</head>
<body>
    <!--伪元素  通过css创建标签，装饰性的不重要的小图-->
    <!--找父级，在这个父级里面创建了子级标签-->
    <div class="father">爱</div>
</body>
</html>

显示结果：
在这里插入图片描述

浮动的特点

浮动元素会脱离标准流，在标准流中不占位置
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
- 浮动的元素不能通过text-align:center或者margin:0 auto居中

定位

设置定位方式
- 属性名：position
- 常见属性值：
  - 静态定位：static
  - 相对定位：relative，独占一行，别人不能来
    - 占有原来的位置，没有脱标
    - 仍然具有标签原有的显示模式特点
    - 改变位置参照自己原来的位置
    - 如果left和right都有，以left为准；top和bottom都有，以top为准
  - 绝对定位：absolute
    - 父级没有定位的情况
    - 脱标，不占位
    - 改变标签的显示模式特点：具备了行内块的特点，宽高生效，在一行共存，如果没有宽度也没有高度，盒子的尺寸就是0
    - 绝对定位查找父级的方式：就近找定位的父级，如果逐层找不到这样的父级，
    - 就以浏览器窗口为参照进行定位

.box{
           /*1.绝对定位的盒子不能使用左右margin auto居中*/
           position: absolute;
           /* margin: 0 auto; */
           /*left:50%,整个盒子移动到浏览器中间偏右的位置*/
           left: 50%;
           /*吧盒子向右侧移动：自己宽度的一般*/
           margin-left: -150px;

           top: 50%;
           margin-top: -150px;
           width: 300px;
           height: 300px;
           background-color: pink;
       }
        /*绝对定位查找父级的方式：就近找定位的父级，如果逐层找不到这样的父级，就以浏览器窗口为参照进行定位*/

固定定位：position:fixed;
- 脱标，不占位置
- 改变位置参考浏览器窗口
- 具备行内块特点
元素层级问题
- 不同布局方式元素的层级关系
  - 标准流<浮动<定位
- 不同定位之间的层级关系
  - 相对、绝对、固定默认层级层级相同
  - 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
  - 默认情况下，定位的盒子，后来者居上
  - z-index：整数；取值越大，显示顺序越靠上,z-index的默认值是0，但是必须配合定位才生效

装饰

垂直

认识基线：浏览器文字类型元素排版中存在用于对齐的基线(baseline)
垂直对齐方式：
- 属性名：vertical-align
- 属性值：
  - baseline：默认基线对齐
  - top：顶部对齐
  - middle：中部对齐
  - bottom：底部对齐

光标类型

场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：
- default：默认值，通常是箭头
- pointer：小手效果，提示用户可以点击
- 工字形：提示用户可以选择文字
- move：十字光标，提示用户可以移动

边框圆角

场景：让盒子四个角变圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
一个值：表示四个角是相同的
四个值：左上，右上，右下，左下
三个值：最后一个没有值的看对角
两个值：看对角

隐藏效果

visibility: hidden;占位隐藏
display:none;不占位隐藏

精灵图

精灵图的介绍

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

精灵图的使用步骤

创建一个盒子设置盒子的尺寸和小图尺寸相同
将精灵图设置为盒子的背景图片
修改背景图位置
通过pxcook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
设置背景图片大小：background-size
- 取值：数字+px
  * 百分比
  * contain：包含，将背景图片等比例缩放，直到不会超出盒子大小（宽或高其中一个填满了盒子，另一个就不会缩放了）
  * cover：覆盖，将背景图片等比例缩放，刚好填满盒子（保证宽和高和盒子尺寸完全相同，导致图片显示不全）
  * 工作中，图的比例和盒子是完全相同的，
background完成连写：background:color image repeat position/size;