HTML

1、独占一行的称为块元素 li是块元素
2、a标签中target属性的可选值
   <a href="https://www.baidu.com" target="_self">本页面打开</a>
    <a href="https://www.baidu.com" target="_blank">新页面打开</a>
a标签实现页面的上下跳转
  <a id="btn2" href="#btn1">去底部</a>
    <p>很长的中间内容</p>
		....
  <a id ='btn1' href="#btn2">去顶部</a>

CSS

伪类选择器

ul>li:first-child/:last-child/ 选中第一个子元素/最后一个子元素/
ul>li:nth-child(m|n|2n/even|2n+1/odd) 选中第m个元素/全选/偶数位的元素/奇数位的元素
ul>li:not(:nth-child(m|n|2n/even|2n+1/odd)) 选中除了第m个元素/全选/偶数位的元素/奇数位的元素
a:link/:visited 没有访问过的链接/访问过的链接(只能修改颜色)
a:active/:hover 鼠标点击/滑过后触发样式

伪元素选择器

p::first-letter 选中第一个字母添加样式
p:first-line 选中第一行添加样式
p::selection 鼠标拖动选择 添加样式
div::before/::after 元素的开始/最后添加样式 必须配合content属性来使用

选择器的优先级

内联样式>id选择器>类和伪类选择器>元素(标签)优先级 加 !important就是最高优先级

边框线

solid:实线/dotted:点状虚线/dashed:虚线/double:双线

简单布局

1、子盒子溢出父盒子,在父盒子设置overflow:visible|hidden|scroll 显示/隐藏/滚动条
2、设置auto的元素会自动补齐等式 外边+边+内边+元素+内边+边+外边=父盒大小(水平垂直通用)
当设置浮动后,自动补齐等式不需要强制成立
3、垂直方向外边距折叠:

​ 兄弟元素相邻外边距的情况:正正取大者/正负取两和/负负取绝对值较大

​ 父子元素相邻外边距的情况:子元素会传递给父元素

​ 解决方案一:子元素使用padding,同时父元素高度减去padding值

​ 解决方案二:父元素添加border,同时父元素高度减去border值

​ 最终方案:

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      .box1{
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
      }
        /*阻断相邻*/
      .box1::before{
           /* ::before是行内元素 不能独占一行 */
        content: '';
        display: table;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: coral;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">

      </div>
    </div>
  </body>
</html>
4、行内元素不支持设置宽高,可以使用display:block设置成块元素 然后再进行设置
:inline设置成行内元素 靠内容大小撑大
:inline-block设置成行内快元素 可以设置宽高 不独占一行
5、box-sizing:content-box|border-box 宽高用来设置内容区大小|宽高用来设置可视区大小
box-shadow:x,y,模糊半径,rgba(0,0,0,透明度)
6、轮廓outline和边框border用法类似 outline/border 不改变/改变 可视区大小即页面布局
7、浮动元素不会盖住文字,文字会自动环绕在浮动元素周围
浮动后元素会从文档流中脱离,改变原有性质:

​ 行内元素可以设置宽高,块元素不独占一行

8、高度塌陷问题以及解决方案BFC
父元素没有设置高度,高度由子元素内容撑高。当子元素浮动脱离文档流,无法再撑起父元素的高度,导致父元素高度丢失,其下面的元素会由此上移,导致页面布局混乱。
元素开启BFC
作用:可以包含浮动的子元素|不会被浮动元素覆盖|子元素和父元素的内外边距不会重叠
方式:1、父元素打开浮动 会丢失宽度
2、父元素设置为行内快 会丢失宽度
3、子元素设置overflow:auto|hidden 常用
4、clear:left|right|both 清除左侧浮动|右侧浮动|两侧浮动影响较大的影响
最终方案:通过::after伪元素设置clear实现
  <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>
      * {
        margin: 0;
        padding: 0;
      }
      .box1{
        border: 10px solid cadetblue;
      }
      .box2{
        width: 200px;
        height: 200px;
        background-color: coral;
        float: left;
      }
      /* 解决浮动高度塌陷问题最终方案 */
      .box1::after{
        /* ::after是行内元素 不能独占一行 */
        display: table;
        content: '';
        clear: both;
      }

    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">

      </div>
    </div>
  </body>

定位 position

relative:相对于自己进行偏移,没有脱离文档流
absolute:相对于其包含块(最近开启定位的祖先)进行偏移,层级提升 脱离文档流
fixed:相对于视口进行偏移,特殊的绝对定位,不会随网页滚动条滚动,层级提升 脱离文档流
sticky:相对于body进行偏移,特殊的相对定位,使元素到达某处固定,没有脱离文档流
设置auto的元素会自动补齐等式 left+外边+边+内边+元素+内边+边+外边+right=父盒大小(水平垂直通用)
z-index:整数 设置层级来控制定位元素的覆盖 祖先层级再高也不会盖住后代层级

字体

      body{
          /*设置全局字体*/
        @font-face {
          font-family: '字体名称';
          src: url('服务器中字体的路径');
        }
      }

图标字体fontawesome使用步骤

下载解压:https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

引入:将CSS和webfonts移动到项目中,将all.css引入到网页中

使用:

文本

white-space:normal|nowrap|pre 处理网页空白方式 正常|不换行|保留空白、
如果文本过长想要夹断加省略号
      .box{
        white-space:nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

背景 background

background-position:上下左右中,上下左右中 |偏移量 设置背景图片位置
background-origin:border-box/padding-box/content-box 背景图片偏移量原点从边框处/内边距处/内容区
background-size: width,height/cover/contain 背景图片尺寸/图片比例不变在元素铺开/完整显示
background-attachment:scroll/fixed 背景图片随着滚动条滚动/固定
background-clip:border-box/padding-box/content-box 背景出现在边框下/内容区和内边距/内容区
background-image: linear-gradient(red,yellow) 线性渐变色
background-image:radial-gradient(red,yellow) 径线渐变色(放射效果)

过渡 transition

transition-property:属性/all 指定要执行过渡的属性
transition-duration:时间 指定过滤效果的持续时间
transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out 指定过渡的速度视觉
transition-timing-function:steps(数字) 分几步实现过渡
transition-delay:时间 指定过渡效果的延迟

动画 animation

设置关键帧
      @keyframes test{		//关键帧名
        0%{
          //起始状态
        }
        100%{
         // 结束状态
        }
      }
添加动画
.box{
        animation-name: test;			//关键帧名
        animation-duration: 2s;			//动画持续时间
}
animation-iteration-count:infinite/整数 动画执行无限次/次数
animation-direction:normal/reverse/alternate 动画执行方向 from->to/to->from/不断切换方向
animation-play-state:running/paused 动画的执行状态 正常/停止
animation-fill-mode:none/forwards/backwards/both 动画执行完成后状态
回到初始位置/停在终点位置/延时处在开始位置/延时处在开始位置,停在终点位
简写
animation:关键帧名,持续时间,完成状态,速度视觉

变形 transform

设置视距:html{perspective:800px}
transform-origin:0 0 设置变形的原点 默认值center
transform:translate(偏移量|百分比) 元素平移 百分比是基于自身 可以实现居中
transform:rotate(角度deg|数字turn) 元素旋转
transform:scale(数字) 元素缩放

flex弹性盒 新的布局手段替代浮动

使元素具有弹性,让元素可以跟随页面大小的改变而改变
display:flex 使一个元素称为弹性盒子 其子元素成为弹性元素(不包括全部后代)
一个元素可以即是弹性盒子也是弹性元素
弹性盒子属性:
flex-direction:row/row-reverse|column/column-reverse 子元素按行左右/右左 按列上下/下上 排列 方向
flex-wrap:nowrap/warp/warp-reverse 子元素不自动/自动换行/反方向自动换行
flex-flow: 方向 是否换行 flex-direction+flex-wrap的简写属性
justify-content:flex-start/center/flex-end/space-around/space-evenly/between 子元素水平对齐方式
开始/居中/尾部/空白分配到元素两侧/元素单侧/元素之间
align-item:stretch/flex-start/center/flex-end/baseline 子元素垂直方向对象方式
子元素高度设置为相同值/顶部/居中/底部/基线对齐
align-content:flex-start/center/flex-endspace-around/space-evenly/between
父元素空白分配 下/上下/上/元素两侧 /元素单侧/元素之间
弹性元素属性:
flex-grow:数字 父盒子空间有多余 子元素伸展系数 填满父盒子 0为不伸展
flex-shrink:数字 父盒子空间不足 子元素收缩系数 适应父盒子 0为不收缩
flex-basis:像素/auto 子元素开始大小/子元素本身大小 没有grow和shrink的情况下使用
简写 flex:grow,shrink,basis
order:1…. 子元素排列顺序

响应式布局

媒体查询
@media all/print/screen {样式} 所有设备/打印机/带屏幕设备 控制哪些设备具有样式

sass中&的作用:

.withdrawalBtn{
			width: 590upx;
			height: 80upx;
			&.sure{
				background: #FFDC03;
			}
		}
只有当同时拥有withdrawalBtn和sure两个样式,才会有背景颜色

原文地址:http://www.cnblogs.com/kq981024/p/16796000.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性