前端css笔记(pink老师)

css

css书写顺序

https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Screenshot_2021-05-11-16-53-42-74_149003a2d400f6adb210d7e357a3a646.jpg

  • 自适应屏幕

    html {

    width: 100%;

    height: 100%;

    display: table;

    }

    body {

    display: table-cell;

    }

    用了这个方法以后,如果希望页面内的盒子也适应屏幕大小,则使用以下方法,会根据父亲的宽高计算出该盒子的宽高

    width:xx%;

    height:xx%;

    margin和padding也可以这样用,padding可以撑开盒子,某些时候这样使用很方便。

    padding:100%;

  • 兼容性适配 浏览器私有前缀

    https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled.png

    兼容老版本,新版本无需添加。

  • li去除小点,a去除下划线,去除input聚焦时的默认框

    list-style:none;//li去除小点
    
    outline:none;//去除input聚焦时的默认框
    
    • 元素的显示模式(块级,行内,行内块)

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%201.png

  • 表单域form

    点击后可跳转到index.html并传递锚点链接 name=输入内容

    <form action="index.html">用户名<input type="text" name="name"><input type="submit" value="登录"></form>
    

    location对象的search可获得?name=输入内容

  • 定位的注意情况

    https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%202.png

    行内元素:绝对,固定定位→可设置宽高

    块级元素:绝对固定定位→无宽高默认内容大小

    浮动,绝对,固定定位→不会外边距合并

    浮动→压住下面标准流盒子,但不会压住文字,文字围绕浮动元素(盒子设置动画时不用浮动,避免文字挤在一起);

    绝对定位→压住所有内容

  • display,visiblilty,overflow隐藏元素

    display:none不占有位置

    visibility:hidden占有位置

    overflow:auto需要时候添加滚动条;scroll右边和底部都会出现滚动条;

  • border,margin,padding的注意情况

    border(外部)和padding(内部)会撑大盒子。

    box-sizing: border-box;//使border在盒子内部
    
    margin:0 auto;//常用于盒子水平居中
    

    margin-left添加border的大小可以消除border带来的边框重叠变粗问题。

    如果需要hover边框变色效果,由于右边框会被压住,则需提高hover盒子的层级。(加相对定位保留原来位置并压住标准流。或z-index。)

  • 三角形的border实现

    https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Screenshot_2021-05-16-16-13-50-40.jpg

    https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%203.png

  • textarea和input取消轮廓

    outline:none;//取消轮廓
    

    textarea设置resize:none使其不能被鼠标拖动缩放。

    padding撑开盒子更加美观。

  • vertical-align:middle文字,img垂直居中

    行内元素,行内块元素(img,textarea等)默认基线对齐。

    直接加border底部有空白缝隙(底线与基线间的缝隙) → ①.vertical-align:bottom使底线对齐。②display:block改为块级元素独占一行

    middle使文字垂直居中。

    https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/IMG_20210516_181156.jpg

    除此之外,行内行内块元素还可以line-height:设置成行高使上下居中,text-align:center;水平居中

  • 文字溢出省略号显示

    单行溢出文字省略号显示:

    white-space:nowrap;//不换行
    overflow:hidden;//溢出隐藏
    text-overflow:ellipsis;//省略号
    

    多行文字:(适用于webkit内核与移动端)

    https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Screenshot_2021-05-16-18-54-08-43.jpg

  • text-decoration文字穿过线效果,a去除下划线

    text-decoration:none;
    text-decoration:line-through;
    
  • background居中对齐

    background:url() no-repeat center center;
    
  • 精灵图使用

    1.精灵图计算宽高时需把图片缩小一半,把图片盒子用width,height缩小为需要的部分大小

    2.引入背景图

    background:url() norepeat -x -y
    

    3.background-size固定为精灵图原来宽度的一半,高度为auto

  • H5CSS3特殊属性

    • H5标签

      1.语义化标签

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%204.png

      2.video为兼容尽量使用mp4格式

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%205.png

      3.为兼容尽量使用mp3格式

      兼容问题:添加子标签顺次执行

    • contenteditable,user-modify使div可编辑

      contenteditable:true;//使盒子可编辑类似于input
      
      user-modify: read-only;
      user-modify: read-write;
      user-modify: write-only;//可以输入富文本
      user-modify: read-write-plaintext-only;//只能输入纯文本
      

      read-write和read-write-plaintext-only会让元素表现得像个文本域一样,可以focus()以及输入内容

      contenteditable="plaintext-only"//编辑区只能键入纯文本
      

      兼容性:

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%206.png

    • input新属性

      type属性实现表单验证。(button,checkbox,color,date,datetime,datetime-localemail,file,hidden,image,month,number,password,radio,range,reset,search,submit,tel,text,time,url,week)

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%207.png

      其他属性

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%208.png

    • 属性选择器(类,属性,伪类选择器权重为10)

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%209.png

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2010.png

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2011.png

    • 结构伪类选择器

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2012.png

      如:

      ul li:first-child{}
      ul li:nth-child(even){}//选出偶数孩子,可以用于隔行变色
      ul li:nth-child(odd){}//选出奇数孩子
      ul li:nth-child(n){}//选出所有孩子
      ul li:nth-child(2n){}//选出所有偶数孩子
      

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2013.png

    • 伪元素选择器与字体图标(伪元素与标签选择器权重为1)

      ::before在元素内部前插入

      ::after在元素内部后插入

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2014.png

      字体图标的使用:

      1. 在https://icomoon.io/下载icomoon文件夹
      2. 打开demo.html找到字体图标框框或代号
      3. 打开style.css复制@font-face{}引入style标签中
      4. 字体图标框框或代号位置使用font-family与@font-face中保持一致

      鼠标悬浮出现罩遮代码实现

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2015.png

    • box-sizing使padding和border不撑大盒子

      默认值为content-box,是css3的盒子模型

      box-sizing:border-box;//前提:padding和border不超过width
      box-sizing:content-box;//传统盒子模型
      

      可以加入*{}初始化

    • filter:blur(5px);模糊处理

      数值越大越模糊

    • width:calc(100% - 30px)不要忘记空格

          • /都可以用
    • transition过渡

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2016.png

      运动曲线:ease(渐慢),linear(匀速),ease-in(加速),ease-in-out(先加速后减速)

    • transform 2D+3D转换(多属性位移translate写最前)

      1.translate

      transform:translate(x,y);
      transform:translate3D(x,y,z);//xyz不可省略
      transform:translateZ(px);//前提:透视,可改变盒子大小
      

      不会影响其他盒子的位置,对行内元素无效;

      可以用于对绝对定位居中(百分比相对于自身宽高)

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2017.png

      2.rotate旋转

      transform:rotate(45deg);//顺时针旋转45度
      transform-origin:x y;//x,y → 像素,百分数,top bottom,center等
      transform:rotateX();
      transform:rotateY();
      transform:rotateZ();
      transform:rotate3d(x,y,z,deg);//x,y,z=0或1
      

      transform:rotate(45deg);默认绕元素中心点顺时针旋转,设置负值时逆时针旋转

      3.scale缩放

      transform:scale(x,y);//宽度变为x倍,高度变为y倍
      transform:scale(x);//宽高都变为x倍
      

      x,y为倍数,不跟单位

      不影响其他盒子,transform-origin改变缩放中心点,默认为几何中心

    • perspective透视 transform-style:preserve-3d;3D呈现

      都需要写在父盒子上

      perspective单位为px,值越小,盒子越大

    • keyframes动画及属性

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2018.png

      0%和100%等价于from和to

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2019.png

      https://gitee.com/onlytonight/csdn-note-image/raw/master/CSS/css%20ca58254149634d75bf7c669b78f53e27/Untitled%2020.png

    • background-size背景恰好铺满盒

      background-size:500px;//如果只有一个参数,则为宽度,高度等比缩放
      background-size:500px 500px;//图片高度和宽度
      background-size:cover;//相对父盒子铺满,图片可能显示不全
      background-size:contain;//相对父盒子铺满,图片全显示
      
  • 背景颜色渐变

    必须添加私有前缀,移动端用webkit前缀即可。

    background: -webkit-linear-gradient(left, #a0328c, #e44d51);/* Safari 5.1 - 6.0 */background: -o-linear-gradient(right, #a0328c, #e44d51);/* Opera 11.1 - 12.0 */background: -moz-linear-gradient(right, #a0328c, #e44d51);/* Firefox 3.6 - 15 */background: linear-gradient(to right, #a0328c, #e44d51);/* 标准的语法 */
    
  • 按钮无法被点击

    点击事件不生效

    this.diabled=true;
    
  • a阻止链接跳转

    javascript:void(0);
    javascript:;
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/308765.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript入门--变量

JavaScript入门--变量 一、JS变量二、变量命名三、常量四、局部变量 一、JS变量 定义变量a, b, c&#xff0c;并输出到控制台。 var a 1; var b 13.14; var c hello Js;console.log(a, b, c) //console.log()语句用于输出结果到控制台&#xff0c;类似python的print语句…

分布式存储系统Megastore

文章目录 说明设计目标及方案选择数据的分区和复制 数据模型照片共享服务数据模型实例Megastore索引Bigtable中存储情况 事务及并发控制Megastore提供的三种读Megastore的写操作完整的事务周期 Megastore基本架构快速读与快速写 核心技术之复制复制的日志数据读取数据写入协调者…

分布式系统架构中的相关概念

1.1、衡量网站的性能指标 响应时间&#xff1a;指执行一个请求从开始到最后收到响应数据所花费的总体时间。并发数&#xff1a;指系统同时能处理的请求数量。 并发连接数&#xff1a;指的是客户端向服务器发起请求&#xff0c;并建立了TCP连接。每秒钟服务器连接的总TCP数量请…

一款免费、开源、可批量识别的离线OCR软件,适用于 Windows7 x64及以上平台

免费&#xff1a;本项目所有代码开源&#xff0c;完全免费。方便&#xff1a;解压即用&#xff0c;离线运行&#xff0c;无需网络。高效&#xff1a;自带高效率的离线OCR引擎&#xff0c;内置多种语言识别库。灵活&#xff1a;支持命令行、HTTP接口等外部调用方式。功能&#x…

超越常规:用PHP抓取招聘信息

在人力资源管理方面&#xff0c;有效的数据采集可以为公司提供宝贵的人才洞察。通过分析招聘网站上的职位信息&#xff0c;人力资源专员可以了解市场上的人才供给情况&#xff0c;以及不同行业和职位的竞争状况。这样的数据分析有助于企业制定更加精准的招聘策略&#xff0c;从…

记录一个Kafka客户端Offset Explore连不上的问题

我昨天把集群重装了一下&#xff0c;再连这个工具就连不上了&#xff08;你先把zk和kafka在集群启起来&#xff09;&#xff0c;报错截图如下&#xff1a; 英文翻译过来大概就是说遍历zk指定路径不存在&#xff0c;我还以为zk的问题&#xff0c;回去又把zk的文档翻了一遍&#…

【AI基本模型】简化生成对抗网络 (GAN)

目录 一、说明 二、GAN的工作 三、如何手动计算生成对抗网络&#xff08;GAN&#xff09;&#xff1f;✍️ 四、GAN的应用 一、说明 生成对抗网络 &#xff08;GAN&#xff09; 是一种机器学习算法&#xff0c;可以生成与现实世界数据几乎无法区分的合成数据。它们的工作原理是…

【JSON2WEB】14 基于Amis的CRUD开发30分钟速成

【JSON2WEB】系列目录 【JSON2WEB】01 WEB管理信息系统架构设计 【JSON2WEB】02 JSON2WEB初步UI设计 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代码前端框架介绍 【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成 【JSON2WEB】06 JSO…

【Java探索之旅】方法重载 递归

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Java编程秘籍 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、方法重载1.1 为什么要有方法重载1.2 方法重载的概念与使用1.3 方法签名 二、递归2…

Go语言中如何正确使用 errgroup

不管是哪种编程语言,重新发明轮子都不是一个好主意。代码库重新实现如何启动多个goroutine并汇总错误也很常见。但是Go生态系统中的一个包旨在支持这种常见的用例。让我们来看看这个包并了解为什么它应该成为Go开发人员工具集的一部分。 golang.org/x是一个为标准库提供扩展的…

Disk Drill Enterprise for Mac v5.5.1515数据恢复软件中文版

Disk Drill 是 Mac 操作系统固有的Mac数据恢复软件&#xff1a;使用 Recovery Vault 轻松保护文件免遭意外删除&#xff0c;并从 Mac 磁盘恢复丢失的数据。支持大多数存储设备&#xff0c;文件类型和文件系统。 软件下载&#xff1a;Disk Drill Enterprise for Mac v5.5.1515激…

李廉洋;4.11#黄金,WTI原油#行情走势分析策略。

美国银行预计&#xff0c;在今天召开的欧洲央行会议上不会有重大的政策变化&#xff0c;但欧洲央行正逐渐接近开始降息&#xff0c;尽管它采取的是一种谨慎的、依赖数据的方式。虽然欧洲央行对降息轨迹的信心不断增强&#xff0c;但降息的具体速度和幅度仍未公布&#xff0c;而…

K8S node节点执行kubectl get pods报错

第一个问题是由第二个问题产生的&#xff0c;第二个问题也是最常见的 网上找的都是从master节点把文件复制过来&#xff0c;这样确实可以解决&#xff0c;但是麻烦&#xff0c;有一个node节点还好&#xff0c;如果有多个呢&#xff1f;每个都复制吗&#xff1f;下面是我从外网…

基于SSM的在线学习系统的设计与实现(论文+源码)_kaic

基于SSM的在线学习系统的设计与实现 摘要 随着信息互联网购物的飞速发展&#xff0c;一般企业都去创建属于自己的管理系统。本文介绍了在线学习系统的开发全过程。通过分析企业对于在线学习系统的需求&#xff0c;创建了一个计算机管理在线学习系统的方案。文章介绍了在线学习系…

访问者模式类图与代码

某图书管理系统中管理着两种类型的文献&#xff1a;图书和论文。现在要求统计所有馆藏文献的总页码(假设图书馆中有一本540页的图书和两篇各25页的论文&#xff0c;那么馆藏文献的总页码就是590页)。采用Visitor(访问者)模式实现该要求&#xff0c;得到如图7.16所示的类图。 访…

VS2015 自定义模板

VS2015 自定义模板 文章目录 VS2015 自定义模板写在前面自定义项目模板导出模板 更新模板vstemplate 文件元素修改参考 参考 写在前面 ​ VS自定义模板是为了&#xff0c;将一些习惯性、通用性的设置预先设置到项目中&#xff0c;再次创建项目时就不用重复设置相同的参数了。 …

密码知识汇总

文章目录 密码学知识&#xff23;&#xff29;&#xff21;三要素机密性&#xff08;Confidentiality&#xff09;完整性&#xff08;Integrity&#xff09;可用性&#xff08;Availability&#xff09; 非安全信道的风险以及应对措施风险应对措施使用加密技术&#xff08;防窃…

基于SSM+Jsp+Mysql的网络视频播放器

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

Leetcode面试题 01.06. 字符串压缩

Every day a Leetcode 题目来源&#xff1a;面试题 01.06. 字符串压缩 解法1&#xff1a;分组循环 分组循环统计连续字符的出现次数&#xff0c;构造压缩字符串&#xff0c;比较原字符串和压缩字符串的长度&#xff0c;返回长度较小的那个。 代码&#xff1a; class Solut…

Docker部署WebRTC-Streamer

文章目录 WebRTC-Streamer概述Docker部署WebRTC-StreamerVue使用WebRTC-Streamer一些问题 WebRTC-Streamer概述 WebRTC-Streamer是一个基于WebRTC技术的流媒体传输工具&#xff0c;它可以通过Web浏览器实现实时音视频流的传输和播放。它提供了一种简单而强大的方式&#xff0c…