首页 前端知识 Html、Css基础

Html、Css基础

2024-02-01 12:02:49 前端知识 前端哥 286 219 我要收藏

一、Html

<!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>
</head>
<body>
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    <p>段落标签</p>
    <img src="" alt="">图片标签,src地址,alt文本替代
    <a href=""target="_blank"></a>href为跳转地址 target:_blank(另起一页)、_self(本页面)、规定在何处打开 action URL。
    text-decoration: none;没有下划线
    <i></i> <em></em>倾斜标签
    <div></div> <span></span>区域,盒子标签
    <strong></strong><b></b> 强调加粗标签
    <br>换行标签
    <table>表格
        cellspacing:设置单元格的距离
        cellpadding:设置内容到单元格距离
        colspan:在行里合并列
        rowspan:在列里合并行,之后删除多余行列
        <thead>表头
            <tr>表行
                <th></th>表行头
            </tr>
        </thead>
        <tbody>表身
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <ul>无序列表
        <li></li>
        去掉li前面的项目符号(小圆点)
        list-style: none;
    </ul>
    <ol>有序列表
        <li></li>
    </ol>
    <dl>自定义列表
        <dt></dt>列表头
        <dd></dd>
    </dl>
    <form action=""> target:_blank(另起一页)、_self(本页面)、规定在何处打开 action URL。
        <input type="text">单行文本字段 value    指定输入字段的初始值
        <input type="button">按钮
        <input type="checkbox">多选框 checked:checked     指定该属性的复选框,默认显示为勾选状态
        <input type="password">密码栏
        <input type="radio">单选按钮 name要一致
        <input type="reset">重置按钮
        <input type="submit">提交按钮
        <input type="textarea">多行文本字段
        <input type="file">选择文件
        <label for="nan">男</label>for     input单选按钮里id=nan     指定 label 将绑定另一个表单元素的 ID 属性值
        <select name="" id=""><option value=""></option><option value=""></option><option value=""></option></select>下拉列表
    </form>
    表单元素属于行内块,两者之间默认有缝隙,只需将其浮动起来就可以

    二、Css

    <font-family></font-family>字体类型
    <font-size></font-size>字体大小px
    <font-weight></font-weight>字体粗细700=bold normal=400;
    <font-style></font-style>字体风格
    font-style: italic倾斜 normal正常,多数让i,em标签不倾斜

    复合属性,简写方式 其他可以省略,font-size和font-family不可省
    font: font-style font-weight font-size/font-height font-family
    font: italic 700 16px 微软雅黑

    对齐文本 左(默认) 右 居中
    text-align: left right center;

    装饰文本 给文本添加下划线 删除线 上划线
    text-decoration: none(默认,没有装饰线) underline overline line-though

    文本缩进 首行缩进2em两个文字大小
    text-indent:  2em 20px;

    行间距 行高
    line-height: 26px;
    行高等于盒子高度可以使文字居中对齐

    外部样式引入
    <link rel="stylesheet" href="">
    后代选择器 元素1 元素2{样式声明}
    div ul li
    子选择器 元素1>元素2{样式声明}只选择最近的一级子元素
    ul>a
    <ul>
        <li>
            <a href=""></a>只选择这个子元素
        </li>
        <li>
            <a href=""></a>
        </li>
    </ul>
    并集选择器 元素1,元素2{样式声明} 喜欢竖着写
    div,
    p,
    a{} div 和 p 和 a标签

    伪类选择器 用:表示,:hover :first-child   链接伪类 结构伪类
    a:link  选择所有未被访问的链接
    a:visited 选择所有已被访问的链接
    a:hover  选择鼠标指针位于其上的链接
    a:active 选择活动链接(鼠标按下未弹起的链接)
    按顺序写lvha

    :focus伪类选择器 用于选取获得焦点的表单元素
    焦点就是光标
    input:focus{
        background-color:yellow;
    }

    元素显示模式转换

    转化为块级元素: display:block
    转化为行内元素: display:inline
    转化为行内块元素: display:inline-block

    背景图片
    backgroud-image: url()
    背景平铺
    background-repeat: repeat no-repeat repeat-x repeat-y
    背景图片位置
    background-position: x y
    background-position: center left (中上位置)  精准位置(20px 50px) 混合位置(center 20px)
    背景图片固定
    background-attachment: scroll(图像随对象内容滚动) | fixed(图像固定)
    背景属性复合写法
    background: 背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置
    背景颜色半透明
    background: rgba(0,0,0,0.3)取值范围在0-1

    盒子模型
    边框border
    bordder-width: 50px 粗细
    border-style: solid 实线 dashed 虚线 dotted 点线
    border-color: pink 颜色
    边框简写 border: 1px solid pink
    border-top: 上边框   border-bottom: 下边框    border-left: 左边框    border-right: 右边框
    border-collapse: collapse 合并相邻的边框

    内边距 padding
    padding-left: 左内边距    padding-right: 右内边距    padding-top: 上内边距    padding-bottom: 下内边距
    内边距复合写法
    padding: 5px 上下左右内边距
    padding: 2px 2px 上下 左右内边距
    padding: 2px 3px 4px 上 左右 下内边距
    padding: 2px 3px 4px 5px 上右下左内边距 顺时针

    外边距 margin
    margin-left: 左外边距 margin-right: 右外边距 margin-top: 上外边距 margin-bottom: 下外边距
    margin 简写方式与 padding 一样
    外边距可以让块级盒子水平居中(盒子必须有宽度 只要左右设为auto)
    margin: 0 auto
    行内 行内块元素水平居中对齐
    给其父元素添加 text-align: center

    外边距合并-嵌套块元素塌陷解决方法:
    (父元素和子元素都有外边距时)
    1. 可以给父元素定义上边框
    2.可以给父元素定义上内边距
    3.可以给父元素添加 overflow: hidden
    浮动的盒子不会有外边距合并的问题

    清除内外边距
    (css第一行代码)
    * {
        padding: o;
        margin: 0;
    }

    圆角边框
    border-radius: 10px ;(数值 或百分比)
    正方形盒子,数值改为高度的一半可变为园
    矩形,数值改为高度一半可为(__)
    border-top-left-radius
    border-top-right-radius
    border-bottom-right-radius
     border-bottom-left-adius

     盒子阴影
     box-shadow: h-shadow v-shadow blur spread color inset;
     h-shadow: 必须,水平阴影的位置,允许负值
     v-shadow: 必须,垂直阴影的位置,允许复制
     blur: 可选 模糊距离
     spread: 可选 阴影的尺寸
     color: 阴影的颜色
     inset: 将外部阴影改为内部阴影
     鼠标经过盒子出现阴影
     div:hover {
         box-shadow:
     }

     文字阴影
     text-shadow: h-shadow v-shadow blur color

     浮动(float)
     浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
     清除浮动
     由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,
     本质:清除浮动元素造成的影响
     选择器 {
         clear: 属性值; (left 不允许左侧有浮动元素 right both )        
     }
     清除浮动的策略是: 闭合浮动
     清除浮动的方法:
     1.额外标签法也称为隔墙法,是w3c推荐的做法
     在最后的浮动盒子后面添加一个新标签 (必须是块级元素,不能是行内元素)
     2.父级添加overflow属性
     overflow: hidden ,auto 或 scroll
     但是溢出部分会隐藏
     3.父级添加 :after伪元素
     选择器(clearfix):after {
         content: "";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
     }
     选择器 {
         IE6 ,7 专有
         *zomm: 1;
     }
     4.父级添加双伪元素
     选择器.clearfix:before,
     .clearfix:after {
        content: "";
        display: table;        
     }
     .clearfix:after {
         clear: both;
     }
     .clearfix {
         *zoom: 1;
     }

     css 属性书写顺序
     布局定位属性
     自身属性
     文本属性
     其他属性

     导航栏 nav 制作
     实际开发中用 li 包含链接 a 的做法

     css定位 position
     定位=定位模式 (指定一个元素在文档中的定位方式) + 边偏移 (决定该元素的最终位置)
     static : 静态定位
     选择器 {
         position : static;
     }     静态定位按照标准流特性摆放位置,没有边偏移

     relative : 相对定位
     选择器 {
         position: relative;
     }   1. 相对自己原来的位置来移动;
         2.原来在标准的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)
     
     absolute : 绝对定位 是在元素移动位置的时候,相对于它祖先元素来说的
     选择器 {
         position: absolute;
     }  1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
        2.如果祖先元素有定位(相对 绝对 固定定位),则以最近一级有定位祖先元素为参考点移动位置
        3.绝对定位不再占用原有的位置
        子绝父相

     fixed : 固定定位 是元素固定于浏览器可视区域的位置
     选择器 {
         position: fixed;
     }  1.以浏览器的可视窗口为参照点移动元素
        跟父元素没有关系
        不随滚动条滚动
        2.固定定位不在占用原先的位置
        固定定位也是脱标的,其实固定定位也可以看作一种特殊的绝对定位
        固定定位小技巧: 固定在版心右侧位置
        1. 让固定定位的盒子 left: 50%;走到浏览器可视区的一半位置
        2.让固定定位的盒子 margin-left: 版心宽度的一半距离

    粘性定位 sticky
        选择器 {
            position: sticky;
        }   1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
            2.粘性定位占有原先的位置(相对定位特点)
            3.必须添加 top left right bottom 其中一个才有效
     边偏移 : top bottom left right
     定位叠放次序 z-index
     选择器 {
         z-index: 1;
     } 数值默认为 auto ,数值越大,盒子越靠上
      如果属性值相同,则按照书写顺序,后来居上
      数字后面不能加单位
      只有定位的盒子才有 z-index 属性

    绝对定位的盒子居中
    加了绝对定位的盒子不能通过 margin: 0 auto 水平居中
    left: 50% 让盒子的左侧移动到父级元素的水平中心位置
    margin-left: -100px; 让盒子向左移动自身宽度的一半
    定位特殊特性
    绝对定位固定定位也和浮动类似
    1.行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度
    2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
    3.脱标的盒子不会触发外边距塌陷
    4.绝对定位(固定定位)会完全压住盒子
      浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字
      但是绝对定位(固定定位)会压住下面标准流所有内容
      浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果,文字会围绕浮动元素
      
      一个盒子既有 left 属性又有 right 属性,则默认 left

      元素的显示和隐藏
      1.display : none;隐藏对象  block : 除了转化为块级元素,还有显示元素的作用
      display 隐藏元素后不再占有原来的位置
      2.visibility : hidden 元素隐藏   visible 元素可视
      visibility 隐藏元素后,继续占有原来的位置
      3.overflow : visible : 默认显示
                  hidden : 溢出的部分隐藏
                  scroll : 溢出的部分显示滚动条,不溢出也显示滚动条
                  auto : 在溢出的时候显示滚动条,不溢出不显示滚动条
        如果有定位的盒子,慎用 overflow: hidden 因为它会隐藏多余的部分

    精灵图 sprites
    移动背景图片位置 background-position 一般情况下精灵图都是负值
    字体图标 iconfont
    icomoon 阿里iconfont字库
    @font-face{
        font-family: 'icomoon';
        src: url('../fonts/icomoon.eot?7kkyc2');
        src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
            url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
            url('../fonts/icomoon.woff?7kkyc2') format('woff'),
            url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        }

        三角制作
        宽度和高度都为0,只给边框大小,transparent
        width: 0;
        height: 0;
        <!-- 为了照顾兼容性 -->
        line-height: 0;
        font-size: 0;
        border: 5px solid transparent;
        border-bottom-color: red;

        鼠标样式 cursor
        li {cursor: pointer;}
        default: 小白 默认  pointer: 小手 move: 移动 text: 文本 not-allowed: 禁止
        轮廓线 outline
        input {outline: none;} 去掉表单默认的蓝色边框
        防止拖曳文本域 resize
        textarea {resize: none;}

        vertical-align : 用于设置图片或者表单(行内块元素)和文字垂直对齐
        vvertical: baseline  默认元素放置在父元素的基线上
                   top  把元素的顶端与行中最高元素的顶端对齐
                   middle  把元素放置在父元素的中部
                   bottom  把元素的顶端与行中最低元素的顶端对齐
        解决图片底侧空白缝隙(图片是行内块元素会和文字的基线对齐)
        1.给图片添加 vertical-align: middle top bottom 等
        2.把图片转化为块级元素 display: block;

        单行文字溢出省略号显示
        1.先强制一行内显示文本
         white-space: nowrap;
        2.超出部分隐藏
         overflow: hidden;
        3.文字用省略号代替超出的部分
         text-overflow: ellipsis;

        多行文字溢出省略号显示
        overflow: hidden;
        text-overflow: ellipsis;
        弹性伸缩盒子模型显示
        display: -webkit-box;
        限制在一个块元素显示的文本的行数
        -webkit-line-clamp: 2;
        设置或检伸缩盒对象的子元素的排列方式
        -webkit-box-orient: vertical;

        布局技巧
        1.margin 负值运用
        margin-left: -1px;
        让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
        鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),
        如果有定位,则加 z-index )
        2.文字围绕浮动元素
        3.行内块巧妙运用
        4.css三角强化
        (只保留右边边框)盒子宽度和高度都为0,把上边框宽度调大,颜色透明,左边框和下边框宽度设为0
        border-color: transparent red transparent transparent ;
        border-style: solid;
        border-width: 100px 50px 0 0 ;

       三、 HTML5新特性

        <header> 头部标签
        <nev> 导航栏标签
        <article> 内容标签
        <section> 定义文档某个区域
        <aside> 侧边栏标签
        <footer> 尾部标签
        <audio> 音频标签 mp3格式
            <audio src=""></audio>
            autoplay: autoplay 音频自动播放
            controls: controls 向用户显示播放控件
            loop: loop 循环播放
        <video> 视频标签 mp4格式
            <video src="文本地址" controls="controls"></video>
            autoplay: autoplay 视频自动播放
            controls: controls 向用户显示播放控件
            width height : 宽度 高度
            loop: loop 循环播放
            preload: auto(预先加载视频) none(不应加载视频)
            poster: lmgurl 加载等待的画面图片
            mutted: mutted 静音播放
        新增 input 类型
        type= search: 搜索框 email: 输入email格式 url: 输入url类型 date: 日期类型 time: 时间类型
              month: 月类型 week: 周类型 number: 数字类型 tel: 手机号码 color: 生成一个颜色选择表单
        新增表单属性
        <input type="text" required="required">
        required: required; 内容不能为空
        placeholder: 提示文本; 表单的提示信息,默认值将不显示
        input::placeholder {color:pink;}
        autofocus: autofocus; 自动聚焦属性,页面加载完成自动聚焦到指定表单
        autocomplete: off/on; 默认已经打开,需要放在表单内,同时加上name属性,同时成功提交
        multiple: multiple; 可以多选文件提交

       四、 Css3新特性

        新增选择器
          一.属性选择器
        1.利用属性选择器可以不用借助类或id选择器
        input[value] {color:pink;}
        2.属性选择器还可以选择属性=值的某些元素
        input[type=text] {color:pink;}
        3.属性选择器可以选择属性值开头的某些元素
        div[class^=icon] {color:pink;}
        4.属性选择器可以选择属性值结尾的某些元素
        div[class$=data] {color:pink;}
         
          二.结构伪类选择器
        选择li里面的第一个孩子
        ul li :first-child {background-color: pink;}
        选择li里面的最后一个孩子
        ul li :last-child {background-color: pink;}
        选择第n个孩子 n可以是数字,关键字和公式
                     n如果是数字,就是选择第n个子元素,里面从1开始
                     n可以是关键字: even 偶数, odd 奇数
                     n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略,也就是选择全部
                        2n : 偶数; 2n+1 :奇数; 5n:5 10 15...; n+5:从第五个开始,包括第五个,到最后; -n+5 : 前5个,包括第五个 )
        ul li : nth-child(n) {background-color: pink;}
        ul li: nth-of-type {}
        nth-child: 会把所有的盒子都排列序号,执行的时候先看 nth-child(1) 之后回去看前面 div 不同则不能执行
        nth-of-type: nth-of-type会把指定元素盒子排列序号,执行的时候首先看div指定的元素,之后回去看 nth-of-type(1)
        
          三.伪元素选择器 可以帮助我们利用css创建新标签元素,而不需要HTML标签,从而简化HTML结构
        ::before 在元素内部的前面插入内容
        ::after 在元素内部的前面插入内容
        before 和 after 创建一个元素,但是属于行内元素
        新创建的这个元素在文档是找不到的,所有称为伪元素
        语法: element::before {}
        before 和 after 必须有 content 属性
        before 在父元素内容的前面创建元素,after在父级元素的后面插入元素
        伪元素选择器和标签选择器一样,权重为1
        巧妙使用:伪元素字体图标 \e91e
        
        伪元素清除浮动
        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix::before,.clearfix::after {
            content: "";
            display: table;}
        .clearfix::after{
            clear: both;
        }

        css3盒子模型
        1.box-sizing: content-box 盒子大小为width + padding + border (以前默认的)
        2.box-sizing: border-box 盒子大小为 width;
        如果盒子模型我们为了改为了 box-sizing: border-box ,那padding 和 border 就不会撑开盒子了(前提 padding 和border不会超过width宽度)
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        css3其他特性
        css3滤镜filter:
        filter: 函数();例如 blur(5px);blur模糊处理,小括号数值越大就越模糊
        calc()计算
        width: calc(100%-80px);
        css3过渡 transition
        transition: 要过渡的属性 花费的时间 运动曲线 何时开始
        1.属性 : 想要变化的css属性,高度宽度 背景颜色 内外边距都可以 如果想要所有属性都变化过渡,写一个all就可以
        2.花费时间 : 单位是秒 0.5s;
        3.运动曲线: 默认是ease 低速到加速; linear: 匀速; steps(2): 指定时间函数中的间隔数量,步长
        4.何时开始: 单位是秒 可以设置延迟触发时间 默认是 0s
        谁过渡给谁加

        网站TDK三大标签SEO优化
        title :网站标题 网站名-网站介绍; kyeword : 关键字; description :网站说明

        2D转换 transform 可以实现元素的位移: translate,旋转: rotale,缩放: scale等效果
        二维坐标系
        transform: translate(x,y);或者分开写
        transform: translateX(n);
        transform: translateY(n);
        translate:不会影响到其他元素的位置,translate中的百分比单位是相对于自身元素的translate:(50%,50%)
        对行内标签没有效果
        盒子垂直居中 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        旋转 rotate
        transform: rotale(度数)
        rotale里面跟度数,单位是deg rotale(45deg);
        角度为正时,顺时针;负时为逆时针;默认旋转的中心点是元素的中心点
        2D转换之旋转rotate   css3 三角制作 div:hover::after
        2D转换中心点 transform-origin: x y; 空格隔开
        x y 默认转换的中心点是元素的中心点(50% 50%);还可以给x y 设置像素或者方位名词(top bottom left right center )
        缩放scale
        transform: scale(1 ,1)长宽,里面写的是数字不跟单位,倍数的意思,等比例缩放scale(2);
        不影响其他的盒子,还可以设置缩放的中心点transform-origin: left bottom
        转换综合写法: transform: translate() rotate() scale()等 同时有位移和其他属性,需要把位移放在最前面;

        css3动画animation 可以实现更多变化,更多控制,自动播放
        先定义动画,再使用动画 (可以做多个状态的变化)
        @keyframs 动画名称 { from  to相当与0%和100% (里面的百分比要是整数)
            0% {  开始状态
                transform: translate(0,0);
            }
            25% {
                transform: translate(100px,0);
            }
            50% {
                transform: translate(0,100px);
            }
            75% {
                transform: translate(100px,0);
            }
            100% {  结束状态
                transform: translate(0,0);
            }
        }
        调用动画 animation-name: 动画名称;
        持续时间 animation-duration: 2s;

        动画常用属性: @keyframs: 规定动画
                     animation: 所有属性的简写,除了 animation-play-state 属性;
                     animation-name: 规定动画的名称;
                     animation-duration: 规定动画完成的时间
                     animation-timing-function: 规定动画的速度曲线,默认是"ease"
                     animation-delay: 规定动画何时开始,默认为0
                     animation-iteration-count: 规定动画播放的次数,默认是1,还有infinite 无限循环
                     animation-direction: 规定动画是否在下一周期逆播放,默认是 normal,altemate逆播放
                     animation-play-state: 规定动画是否正在运行或暂停,默认是running,还有pause (经常和鼠标经过等其他配合)
                     animation-fill-mode: 规定动画结束后状态,保持forwards回到起始baskwards
        动画简写: animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态,
        opacity: 阴影度
        3D转换 三维坐标系
        z轴:垂直屏幕 y轴竖直向下 x轴水平向右 transform: translate3d(x,y,zpx);
        透视 perspective: 500px
        透视写在观察元素的父盒子上
        3D旋转 rotate3d transform: rotate3d(x,y,zdeg);
        3D呈现 transform-style: flat(默认子元素不开启3D立体空间); preserve(子元素开启3D立体空间)代码写给父级,但是影响的是子盒子
        私有前缀: -moz: 代表firefox; -ms: ie浏览器; -webkit: safari chorm; -o-:opera

       五、 移动端

        布局视口 layout viewport
        视觉视口 visual viewport
        理想视口 ideal viewport
        meta 视口标签
        <meta name="viewport" content="width=device-width,user-scalable=no,
        initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
        with: 宽度设置是viewport宽度,可以设置device-width特殊值
        initial-scale: 初始缩放比,大于0的数字
        maximum-scale: 最大缩放比,大于0的数字
        minimum-scale: 最小缩放比,大于0的数字
        user-scalable: 用户是否可以缩放, yes或no(1或0)
        标准的viewport设置
        视口宽度和设备保持一致,视口的默认缩放比例1.0,不允许用户自行缩放,最大允许的缩放比例1.0,最小允许的缩放比例1.0

        二倍图
        物理像素 & 物理像素比
        多倍图
        背景缩放 background-size: 图片宽度 图片高度(里面的单位可以是%,相对父盒子);
        cover: 完全覆盖div盒子; content: 把高度和宽度等比例拉伸,宽度或者高度到达盒子则不会继续拉伸会有空白部分


        css3初始化 normalize.css
        css3盒子模型: box-sizing: border-box;
        -webkit-box-sizing: border-box;
        点击高亮我们需要清除 设置为transparent完成透明
        -webkit-tap-highlight-color: transparent;
        在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
        -webkit-apperance: none;
        禁用长按页面时弹出菜单
        img,a {-webkit-touch-callout: none;}

        移动端常见布局
        单独制作移动端页面
        1.流式布局(百分比布局)
        通过设置盒子的宽度设置为百分比
        max-width: 最大宽度 min-width: 最小宽度
        body设置{ width: 100%; min-width: 320px; max-width: 640px;
            margin: 0 auto; font-size: 14px; font-famiy: -apple-system, Helvetice, sans-serif ;
            line-height: 1.5; color: #666;
        }
        二倍精灵图做法
         在firework里面把精灵图等比缩放为原来的一半,之后根据大小测量坐标,注意代码里面backgrund-size也要写:精灵图原来宽度的一半
        焦点图制作

        2.flex弹性布局 display: flex;
        任何一个容器都可以指定为flex布局
        当父盒子设为flex布局后,子元素的float clear 和veritical-align属性将失效
        伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
        常见父项属性: flex-direction: 设置主轴的方向 x轴  row: 默认值从左到右 row-reverse: 从右到左
                                    column: 从上到下 column-reverse: 从下到上
                     justify-content: 设置主轴上的子元素排列方式
                                     flex-start: 默认值从头部开始 如果主轴是X轴,则从左到右
                                     flex-end: 从尾部开始排列
                                     center: 在主轴居中对齐(如果主轴是X轴则水平居中)
                                     space-around: 平分剩余空间
                                     space-between: 先两边贴边再平分剩余空间
                     flex-wrap: 设置子元素是否换行 nowrap不换行  wrap换行
                                默认子元素不换行,如果装不开,会缩小子元素大小
                     aligin-content: 设置侧轴上的子元素的排列方式(多行)
                                     子项出现换行的情况
                                     flex-start: 默认值从头部开始 flex-end: 从尾部开始排列 center: 在侧轴中间显示 pace-around: 子项在侧轴平分剩余空间
                                     space-between: 子项在侧轴先两边贴边再平分剩余空间 stretch: 设置子项元素高度平分父元素高度                             
                     aligin-items: 设置侧轴上的子元素排列方式(单行)
                                  flex-start: 从上到下 flex-end: 从下到上 center: 垂直居中 stretch: 拉伸,默认值
                     flex-flow: 复合属性,相当于同时设置了flex-direction和flex-wrap
        常见子项属性: flex: 1 ;子项目占的份数 可以是%
                     aligin-self: flex-end;控制子项自己在侧轴的排列方式
                     order: -1;默认是0,属性定义子项的排列顺序(前后顺序) 越小越靠前            
        
        背景线性渐变 : background: linear-gradient(起始方向,颜色1,颜色2,...)
 必须添加浏览器私有前缀 background: -webkit-linear-gradient(left,red,bllue)
                      background: -webkit-linear-gradient(left,top,red,bllue)                         
                      
        3.less+rem+媒体查询布局

        rem单位 相对于html元素 字体大小来说的
        rem 可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
        em单位是父元素字体大小
        媒体查询 可以针对不同的屏幕尺寸设置不同的样式
        @media mediatype and|not|only(media feature){
            css3-Code;
        }    用@media开头 注意@符号
             mediatype 媒体类型  all: 用于所有设备; print: 用于打印机和打印机预览; scree: 用于电脑屏幕 平板电脑 智能手机等;            
             关键字 and not only
             media featurre 媒体特性 必须有小括号包含  width: 定义输出设备中页面可见区域的宽度 min-width max-width
        @madia scree and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }  在屏幕上 并且 最大宽度是 800px 设置想要的样式
            媒体查询可以根据不同屏幕尺寸在改变不同的样式
        @madia scree and (min-width: 500px) and (max-width: 900px){
            body {
                background-color: purple;
            }
        }
        媒体查询+rem 实现元素动态大小变化 媒体查询最好的方法是从小到大
        引入资源 根据屏幕不同大小调用不同样式
        <link rel="stylesheet" media="mediatype and|not|only (meida feature)" href="mystylesheet.css">

        六、less基础

        维护css弊端
        less使用 新建后缀名.less文件
        less变量 @变量名: 值; div{ background-color: @变量名 }
                 变量名必须有@为前缀,不能包含特殊符号,不能以数字开头,大小写敏感
        less编译 将.less文件编译成.css文件 vscode中easyless
        less嵌套 子元素的样式直接写在父元素里
                 如果有伪类,交集选择器,伪类选择器 内层选择器的前面要加 &  a{&::after }
        less运算 + - * /  运算符左右两侧要空格隔开
                 两个数参与运算 如果只有一个数有单位则最后的结果就以这个单位为准     
                 两个数参与运算 如果两个数都有单位则以第一个单位为准
        
        rem适配方案 less+ 媒体查询+ rem   flexible.js + rem
        动态设置html标签字体大小
        1.首先选一套标准尺寸 750为准 2.用屏幕尺寸除以我们划分的份数 得到html里面的文字大小
        但是我们知道不同屏幕下的文字大小是不一样的 3.页面元素的rem值=页面元素在750像素下的px值 / html里面的文字大小

        将设置好的comon.less引入到index.less里面
        @import "common";
        4.混合布局

转载请注明出处或者链接地址:https://www.qianduange.cn//article/984.html
标签
less
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!