html, css知识点

常见的浏览器的前缀
1.⾕歌chrome======内核(webkit)========前缀（-webkit-）
2.苹果safari======内核（webkit）======前缀(-webkit-)
3.⽕狐firefox=====内核（gecko）=======前缀(-moz-)
4.欧朋opera=======内核（presto）======前缀（-o-)
5.IE=============内核（trident）=====前缀（-ms-)
6.edge===前缀（-webkit-）
微软win11系统上浏览器已经全面改成edge了，win11以下的系统用的还是IE（IE目前已经停产了）
一:线性渐变linear-gradient
    不加浏览器前缀：方向必须要写to，写的是终点
    加浏览器前缀：方向就不能写to了，写的是起点
    加了不同的前缀只能在对应的浏览器上识别，比如加了ms只能在IE上识别，加了webkit就可以在谷歌、苹果、edge上识别
二：径向渐变radial-gradient()
    注意：
        起点可以写方位名词，也可以写具体的坐标点。
        如果写了起点了，就必须加浏览器的前缀。
        如果不写起点，起点默认在中心点，可以不加前缀。
    渐变的形状：
        默认情况：
            正方形盒子默认是圆形(正方形盒子永远都只呈现圆形)
            长方形盒子默认是椭圆形（长方形盒子是可以改成圆形的）
        circle=====圆
        ellipse====椭圆
三：重复性渐变
    线性渐变和径向渐变都支持重复。
    在渐变的单词之前加repeating-，该颜色分配比例。
四：精灵图
     精灵图也叫做雪碧图，英文单词是sprite，这是一种图片整合技术，就是把很多张小图放到了一张大图之上。
    用精灵图的好处：
        1.减少对服务器的请求次数
        2.提高网页的加载速度
        3.减少图片的体积
    使用精灵图的核心技术点：背景图的位置
五、过渡
      过渡：可以实现从一个状态缓慢的变化到另外一个状态，有一个动画效果
    一般过渡都需要结合鼠标滑过等一起实现
    非简写：
        transition-property：过渡要参与的属性
        transition-duration：过渡时间
        transition-delay：过渡的延迟时间
    简写：transition
    简写方式里面：其他值没有书写顺序，但是过渡时间必须在前，延迟时间在后，如果只写了一个时间那么必然是过渡时间

    缺一个：过渡的运动曲线（明天再讲）
六：变形transform
    位移translate，主要作用：调整元素的位置。
        常见写法：
        transform: translateX();====只会做横向移动
        transform: translateY();====只会做纵向移动
        transform: translateX() translateY();====横向和纵向同时移动
        transform: translate(x,y);====横向和纵向同时移动
    旋转： 旋转常见书写方式
        赋值的时候用的单位是角度单位deg
         transform: rotateX(0deg);====围绕x轴做旋转
         transform: rotateY(0deg);===围绕y轴做旋转
         transform: rotate(0deg);===围绕整个盒子中心点做旋转
    transform-origin：可以更改变形点
    缩放：可以实现元素的放大和缩小
        缩放的常见写法：
        赋值不带单位，值是倍数的意思
        写1没有变化，如果比1大，就是放大多少倍，如果比1小，就是缩小多少倍
        transform: scaleX();====沿着x轴做缩放，改变的宽度
        transform: scaleY();====沿着y轴做缩放，改变的高度
         transform: scaleX() scaleY();====x和y同时改变
         transform: scale();
            小括号里面只写一个值，就是x和y同时改变
            写了2个值,第一个值是x，第二个值代表的是y
        默认变形点都是在中间，可以通过transform-origin更改变形点
    倾斜：skew

要记住的东西
    1.浏览器的前缀
    2.渐变的单词
    3.精灵图的好处
    4.过渡的单词
    5.变形中位移、旋转和缩放的单词

作业：
    1.扇子：元素不可见千万不要用display:none;
        因为display:none这个属性是不参与过渡
        可以使用opacity实现元素的隐藏效果
    2.缩放的线条：
        一开始线条不可见是让缩放值为0实现的，也不是x和y同时为0，只需要让其中一个为0
        提示：创建2个盒子，一个加左右边框线，一个加上下边框线即可
    3.百叶窗尽力去做（明天会讲）

1.选择器的权重值
2.浮动的作用、特点
3.文字水平居中、垂直居中
4.如何取消超链接自带的下划线
5.红绿蓝白黑的rgb和十六进制写法 

一、背景
    非简写方式（单一写法）
        1.背景的颜色：background-color
        2.背景的图片：background-image:url(图片的路径)
            盒子大于图片：会发生平铺的现象
            盒子等于图片：刚好显示
            盒子小于图片：会把图片裁切
        3.背景图片的平铺规则：background-repeat
            repeat===平铺，默认值
            no-repeat===不平铺
            repeat-x===横向平铺
            repeat-y===纵向平铺
        4.背景图片的位置：background-position
            写法一：写具体的坐标点
                左上角是0，0
                x轴：向右为正，向左为负
                y轴：向下为正，向上为负
            写法二：借助方位名词写（top、bottom、left、right、center）
    简写方式（复合写法）
        background:需要什么就写什么。没有书写顺序。
二、盒子模型
    组成部分：内容  内间距   边框线  外间距
    我们写的width和height指的是内容区的宽度和高度
    加了内间距和边框线会导致把盒子撑大
    总宽：width+左右的内间距+左右的边框线
    总高：height+上下的内间距+上下的边框线

三、内间距的常见书写方式
    内间距padding：内容到盒子边的距离
    padding:1个值，同时给4个方向都添加
    padding：2个值，上下  左右
    padding：3个值，上  左右  下
    padding：4个值，上 右 下  左 顺时针的顺序赋值
    padding-left：左间距
    padding-right
    padding-top
    padding-bottom
    注意：内间距不支持写负数
四、外间距的常见书写方式
    外间距margin：盒子与盒子的距离
    书写方式和内间距是一样的
    注意：外间距支持写负数
    调整位置：
        上下：margin-top
            正数：向下走  负数：向上走
        左右：margin-left
            正数：向右走  负数：向左右
五、边框线的书写方式
    非简写方式（单一写法）：
        1.border-width：边框线的粗细
        2.border-style：边框线的样式
            solid：实线
            dashed:虚线
            dotted:点线
            double:双线
            none:没有线
        3.border-color：边框线的颜色，默认颜色是黑色
    简写方式（复合写法）：border:需要哪个值就写哪个，没有书写顺序。
六、利用边框线画三角形
    1.宽高为0
    2.给4个方向都加透明的边框线（transparent）
    3.需要哪个方向就给对立面写上颜色即可。
七、元素的居中方式
    文字的居中
        水平居中：text-align:center
        垂直居中：line-height的值height一致
    图片的居中
        水平居中：text-align:center;
        注意：要写在图片的父元素身上。
        垂直居中：下周再讲。
    盒子的居中：
        水平居中：margin:0 auto;
        注意：一定要写在自己身上。
        垂直居中：下周再讲。
八、清除标签自带的间距
    *{padding:0;margin:0;}
 

一、元素类型
     1.块元素block
            特点：
                1.纵向排列，可以设置宽高
                2.如果不设置宽度，那么宽度默认和父亲保持一致。
                3.一般在网页布局中都当作容器来使用。
            常见标签：div、p、标题标签（h1,h2,h3,h4,h5,h6)、ul、ol、li、dl、dt、dd、hr、form
        2.行内元素inline
            特点：
                1.横向排列的，不能设置宽高
                2.宽度默认由内容决定
                3.有时候上下的内外间距有可能加不上。
            常见标签：span、a、b、strong、i、em、u、s、del、sup、sub
        3.行内块元素inline-block
            特点：
                1.横向排列的，可以设置宽高
                2.自带3-5px的间距,这个间距不是由padding、margin造成的。
            常见标签：img、input
二、元素类型之间的转换
      display:block;====转成块元素
      display:inline;===转成行内元素
      display:inline-block;====转成行内块元素
三、元素的显示和隐藏
      隐藏：display: none;元素隐藏之后不占据位置。
      显示：只要让display的值不为none就是显示。
        block、inline、inline-block
        显示一般推荐用block。
四、vertical-align可以实现的垂直居中。(了解)
    但是仅限于行内块元素使用
    top:顶线对齐
    middle:中线对齐
    baseline:基线对齐,默认值
    bottom：底线对齐

    行内块元素为什么自带3-5px的间距？
        因为行内块元素默认是和文字的基线进行的对齐。
    如何取消这个自带的间距呢？
        1.让vertical-align的值只要不是baseline即可。
        2.浮动：缺点：会脱离文档流，不占据位置。
        3.font-size: 0;使用这种方式的前提是盒子里面没有文字才能使用，如果有文字，虽然能取消间距，但是文字就看不见了。
五、省略号的制作
       1.加宽度
        2.让文字不要自动换行： white-space: nowrap;
        3.让超出的部分隐藏：overflow: hidden;
        4.显示省略号：text-overflow: ellipsis;
六、overflow的值
        visible:超出的部分依然可见，默认值
        hidden:让超出的部分隐藏====常用
        auto:当内容超出之后会自动产生滚动条。（推荐auto制作滚动条）====常用
        scroll:不管内容有没有超出都会产生滚动条

标签嵌套：
    建议：竖着排列的可以嵌套横向排列的，但是横向排列的里面最好不好嵌套竖着排列
    
一、伪类选择器
    伪类选择器：标志是一个冒号
    :link===链接未访问（只能用在超链接）
    :visited====链接已访问（只能用在超链接）
    :hover===鼠标滑过、鼠标悬停(可以用在任何一个标签之上)=====常用
    :active===鼠标按下(可以用在任何一个标签之上)

    注意：如果这4个状态同时书写，顺序不可打乱。
二、选择器的权重
    权重值越大，优先级越高。
        通配符选择器：0
        标签选择器：1
        类选择器：10
        伪类选择器：10
        id选择器：100
        行内样式表：1000

        包含选择器（后代和子代）：用到的所有的选择器权重相加之和

        群组选择器：各自选择器的权重值（选择器和选择器之间毫无关系）
三、和文字相关的样式
    1.文字的颜色：color
        1.直接写颜色单词：red
                2.rgb()===取值区间：0-255
                    rgb(50,200,100)
                    红色：rgb(255,0,0)
                    绿色:rgb(0,255,0)
                    蓝色：rgb(0,0,255)
                    白色：rgb(255,255,255)
                    黑色：rgb(0,0,0)
                3.十六进制写法===取值区间：0-9a-f
                    #跟6位数字，2位是一组，可以分成3组，依次代表红色、绿色、蓝色的取值
                    红色：#ff0000====#f00
                    绿色：#00ff00====#0f0
                    蓝色：#0000ff===#00f
                    白色：#ffffff===#fff
                    黑色：#000000===#000
    2.字号：font-size
         谷歌浏览器默认字号为16px
                谷歌最小字号是12px  其他浏览器中可能是10px
                字号最好写偶数
    3.字体：font-family
         谷歌的默认字体是微软雅黑，其他浏览器可能是宋体。
                注意：写字体的时候如果字体是汉字或者1个以上的英文单词，那么必须加引号。
                字体可以写多个，中间通过逗号隔开，使用字体的时候会从左到右依次查找，如果能用就用，不能用就下一个，如果都不能使用就使用默认的。
    4.加粗：font-weight
         1.写单词
                            lighter===变细
                            normal===正常
                            bold==加粗
                            bolder==更粗（只是语气加重而已）
                        2.写数字（100-900）
                            100===变细
                            400===正常
                            600===变成加粗了，但是程序员更加喜欢用700
                            注意：千万不要带单位
    5.倾斜：font-style
         normal===正常
                    italic===倾斜
                    oblique===更倾斜（只是语气加重而已）
    6.首行缩进text-indent
          em单位是一个相对单位，相对于当前元素的文字大小而言的
                假设当前文字大小是16px，那么1em=16px  2em=32px
                假设当前文字大小是20px，那么1em=20px  2em=40px
    7.对齐方式
         水平对齐：text-align
        left:左对齐
        right：右对齐
        center：居中对齐（常用）
        justify:2端对齐
        垂直对齐：line-height
            当line-height与height保持一致的时候：文字垂直居中
            当line-height比height小：文字垂直偏上
            当line-height比height大：文字垂直偏下
        注意：
            如果文字是单行的，line-height可以调整文字的垂直对齐方式
            如果文字是多行的，那么line-height就变成行高了（行与行的间距，上一行文字的顶端到下一行的顶端）
    8.修饰线：text-decoration
         underline:下划线
                overline:上划线
                line-through:中划线、删除线、贯穿线
                none:没有线(常用)
    9.了解
        字间距：letter-spacing
        词间距：word-spacing
        大小写转换：text-transform
             uppercase===转大写
                lowercase==转小写
                capitalize==首字母大写
四、浮动
     浮动float：
    主要作用：实现元素的横向排列。
    浮动的书写方式：
        float:left;=====让元素向左漂浮
        float:right;===让元素向右漂浮
        float：none;====不漂浮（写了和不写是一样）
    特点：
        1.元素一旦加了浮动，就会立即漂浮起来，不占据位置，后面的元素会向前补齐。
        2.浮动的元素是无法覆盖文字和图片的。
        3.如果给‘相邻’的多个元素都写了左浮动：那么元素会从左到右依次横向排列
          如果给‘相邻’的多个元素都写了右浮动：那么元素会从右到左依次横向排列
        4.如果元素过多，一行放不下，会自动换行的。
            注意：换到下一行的时候如果上一行有一个元素的高度太大了，会导致卡着过不去
        5.大多情况下纵向排列的标签比如div如果不设置宽度，宽度默认和父亲保持一致，但是一旦加了浮动，宽度是由内容去决定的。
        6.大多情况下横向排列的标签是无法设置宽高的，但是加了浮动之后就可以设置了。
    清除浮动：是清除上一个浮动的元素带来的影响，而不是取消浮动（谁受到影响就写在谁的身上）
         clear:left;====清除左边浮动带来的影响
        clear:right;===清除右边浮动带来的影响
        clear:both;===左右2边都清除
 

一、网站三要素（网页的组成部分）
    html====结构=================w3c
    css====表现（美化网页的）=====w3c
    js====行为（实现交互效果的）===ECMA
二、标签语法
    html：超文本标记语言，目前使用的版本是5.0
    标记：也叫做标签、元素、盒子
    记住：所有的标签都是长在尖括号里面的<>
        长在尖括号里的第一个单词叫做：标签的名字，后面的单词统称为属性
        属性：分为属性名字和属性值，中间通过等号连接，属性值需要加引号
        属性根据情况可写可不写。
    分类：
        单标签：<标签名字 属性名字1='属性值' 属性名字2='属性值'。。。>
        双标签：<标签名字 属性名字1='属性值' 属性名字2='属性值'。。。>标签内容</标签名字>
三、标签的关系
    父子关系（嵌套）
    兄弟关系（并列）
四、各种标签
    1.文章标题标签h1-h6
        特点：双标签  文字自带加粗效果,h1字号最大，h6字号最小的，纵向排列
        注意：h1标签有唯一性，一个页面只允许使用一次，h1标签一般是用来放logo图的
    2. 段落标签：p
    特点：双 段落与段落中间自带间距 纵向排列
    3.倾斜标签：i、em
        特点：双、横向排列
        区别：em标签表示强调，有语气加重效果，有利于搜索引擎的搜索
    4.加粗：b、strong
        特点：双、横向排列
        区别：strong标签表示强调，有语气加重效果，有利于搜索引擎的搜索
    5.下划线：u
        特点：双、横向排列
    6.删除线：s、del
        特点：双、横向排列
        区别：del标签表示强调，有语气加重效果，有利于搜索引擎的搜索
    7.上标：sup  下标：sub
        特点：双、横向排列
    8.修饰性标签
        hr：水平线
        br：强制换行
        都是单标签
    9.列表标签
        有序列表：ol+li=====几乎不用
    默认列表符号是数字
    可以通过type属性更改列表符号
        type="1"===按照阿拉伯数字排序
        type="A"===-按照大写字母排序
        type="a"====按照小写字母排列
        type="I"===按照大写的罗马数字排序
        type="i"====按照小写的罗马数字排序
    start属性：可以更改排序的起始值。
    无序列表:ul+li
        默认列表符号是实心圆点
        type="disc"====实心圆点
        type="circle"===空心圆
        type="square"===实心方块
        type="none"===没有符号
    使用场景：新闻条、导航条
    自定义列表：dl+dt和dd
        使用场景：用在图文混排的地方
        dd是对dt的解释说明，所以一般会再dt中放图片，dd中文字
    10.图片标签：img
        单标签
        src属性：写图片的路径的
        上一级：../  上2级:../../
        alt属性：当图片加载不出来的时候显示的提示信息
        title属性：鼠标悬停时候的提示信息
    11.超链接：a
        双、自带文字颜色和下划线、横向排列
        href属性：写你要跳转的地址的
            1.可以写真实网址
            2.可以写自己创建的页面（就是自己创建的html文件）
            3.可以写图片的地址
        target属性：规定页面的打开方式的
             _self:在当前窗口打开，默认值
             _blank：在新窗口打开
    12.div和span
         div标签：一般是用来划分区域的（双，纵向排列）
         span标签：一般是用来修饰某一小段文字的（双，横向排列）