博客

H5_C3

  • Post author:
  • Post category:其他




《CSS》



浏览器内核前缀

有些样式属性是需要 加 内核前缀的， 这是因为 样式属性 都要经历 从 提案 到 批准 的过程，

有些 在 提案阶段 的属性， 有些浏览器是不支持的，所以 在 提案阶段的属性 使用是 要加 内核前缀，

例如 盒子 倒影的 属性： 

-webkit-box-reflect: below 5px -webkit-linear-gradient(transparent  10%,  rgba(0, 0, 0, 0.5));
  • 火狐浏览器

Gecko内核， 前缀

-moz-

  • 谷歌、苹果（safari）浏览器

Webkit内核， 前缀

-webkit-

  • IE浏览器

Trident内核， 前缀

-ms-



变量

在 根部 通过 – 定义全局变量，定义的全局变量可以在本地Style标签 和 外联样式文件 中使用。 

/* html */
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>wtt</title>
  <style>
    :root {
      --color: red;
      --len: 8px;
    }

    .aaa {
      width: var(--color);
      border: var(--len);
    }
  </style>
  <link rel="stylesheet" href="a.css" type="text/css" />
</head>
......

/* 外联css文件： a.css */
:root {
  --color: black;
}

.bbb {
  color: var(--color);
}


说明：

当全局变量 重名时，后面的说了算，所以类元素aaa 的字体颜色是 黑色的。



性状属性

  • width、height

  • border

  • 边圆角 

border-radius: 一个值：上下左右边 || 两个值：上下边 左右边 || 四个值: 上 右 下 左 边;
  • 修剪边形 
// clip：修剪; polygon:多边形      
clip-path: polygon(33% 0, 0 33%, 0 66%, 33% 100%,66% 100%,100% 66%,100% 33%,66% 0); ⇒ 八边形
  • 盒子阴影 
box-shadow: 影子左右移 上下移 模糊度 大小 rgba() inset;
  • 字体阴影 
text-shadow: 影子左右移 上下移 模糊度  rgba() ; /* 与盒子阴影相比 没有 大小、inset */

/* 实现 文字浮雕效果 */
text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc ;
  • 盒子类型 
box-sizing: content-box(有padding扩充) || border-box(没有)；
  • 背景 
/* 渐变背景 */
background: linear-gradient(to right, pink, skyblue);

/* 图背景 */
background-image: url(" ");
background-size: Wpx Hpx || auto;
background-repeat: round(缩放平铺) || space(不缩放平铺) || no-repeat(不平铺);
background-attachment: local(随内容动) || fixed(固定);
background-position: 左右移 上下移;


background-size 属性用于定义背景图片的尺寸大小。以下是常用的 background-size 属性值：
	auto: 默认值，保持背景图片的原始尺寸。
	cover: 背景图片将被缩放以填充整个元素，可能会超出元素的边界。保持图片比例不变。
	contain: 背景图片将被缩放以适应元素的内容框内（完全可见），可能在元素的垂直或水平方向留有空白区域。保持图片比例不变。
	length or percentage: 可以使用具体的长度单位（如像素 px）或百分比来指定背景图片的宽度和高度。例如：200px 100px 表示宽度为 200 像素，高度为 100 像素。
	initial: 将 background-size 属性重置为默认值。
	inherit: 继承父元素的 background-size 属性值。



文章属性

  • 字体 
font-family: Microsoft YaHei, "宋体";
font-size: 1em = 16px;
font-weight: 100~900;
font-style: italic;
  • 文本 
letter-spacing: px; /* 字间距 */
line-heigt: px; /* 行高 */
text-align: left || right || justify || center;
text-indent: px; /* 首行缩进 */
text-decoration: none || overline || line-throught || underline;

word-break: break-all; /* 文字自动换行 */
vertical-align: center; /* 图文对齐 */
  • 超出文本 省略号 代替： 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
  • 文字无法被选定复制 
.wtt{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
  • 文章分列 
column-count: 列数;
column-width: Wpx;



布局属性

  • float

  • margin

  • padding

  • position

响应式一般是要求x轴上的，如果需要x和y轴上都要有响应式，可以采用如下手段： 

  <div class="aaa">
    <div class="bbb"></div>
  </div>
  
    <style>
   .aaa {
     width: 200px;
     height: 200px;
     position: relative;
   }
   .bbb { 
     position: absolute;
     top: 10px;
     left: 10px;
     right: 10px;
     bottom: 10px;
   }
  </style>
  • 形变 
transform: translate(Xpx, Ypx);
         : rotate(90deg);  /*(以中心，顺转90度)*/
         : scale(Xpx, Ypx); /*(上下边，上下动； 左右边，左右动)*/
         : skew(Xdeg, Ydeg); /*(上下边，左右动； 左右边，上下动)*/

transform-origin: left top;(基点： left、right、bottom、top、center)
  • flex布局 
display: flex;
/*水平方向*/
justify-content: space-between || space-around || center; 
/* 竖直方向 */
align-items: flex-start || center || flex-end;
/* 主轴 + 换行 */
flex-flow: column wrap; /* 默认为 row nowrap */

/* 在子元素中的属性 */
flex-grow: 1;
flex-shrink:1;
align-self: flex-start || center || flex-end; /* 侧轴上的排布 */



效果属性

  • cursor: pointer;

  • 毛玻璃效果： 模糊渡 + 透明度 

backdrop-filter: blur(3px); /* 模糊度3px */ 
background-color: rgba(255, 255, 255, 0.3); /* 透明度0.3 */
  • 过渡 
transiton-property: all;
transiton-duration: 多少s;
transiton-timing-function: linear;
transiton-delay: 多少s;

/* 语法糖 */
transition: all 3s ease 0s;
  • 动画 
@keyframes wtt {
  0% {
    width: 10px;
    height: 10px;
  }
  50% {
    width: 20px;
    height: 20px;
  }
  100% {
    width: 30px;
    height: 30px;
  }
}

div {
  border:1px soid red;

  animation-name: wtt;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-direction: alternate; (头->尾->头)
  animation-iteration-count: infinite; (循环次数：永久)
}
  • 改动 原生 滚动条 
div {
 overflow-y: scroll;
}
div::-webkit-scrollbar {//滚动条系统
        width: 10px;
}
div::-webkit-scrollbar-thumb:vertical {//滚动条 滑块
        border-radius: 10px;
        background-color: #4574ff;
}
div::-webkit-scrollbar-track {//滚动条 滑块轨道
        background-color: rgb(192, 190, 190);
        border-radius: 10px;
}
  • 隐藏 浏览器 原生 滚动条 
/* Chrome | Safari */
div {
	overflow-y: scroll;
}
div::-webkit-scrollbar {
	display: none;
}

/* Firefox */
div {
	overflow-y: scroll;
	scrollbar-width: none;
}

/* IE | Edge */
div {
	overflow-y: scroll;
	-ms-overflow-style: none;
}



其他属性

  • overflow: hidden;



选择器

  • 组合选择器 
div#abc   交集
div,#abc   并集
div #abc   后辈
div>#abc   子辈
div+#abc   后一
div~#abc   后多
  • 属性选择器 
div[class]
div[class ~= abc]   include
div[class ^= abc]   start
div[class $= abc]   end
div[class = abc]   must be
  • 伪类选择器 （主语：定语） 
div:first-child 第一个div
div:last-child  最后一个div
div:nth-child(2)  第2个div
div:nth-child(2n) 偶数行
div:nth-child(2n+1) 奇数行
div:nth-child(-n+5) 前5个
div:nth-last-child(-n+5) 前5个
  • 动作选择器 
div {
  width: 10px;
  height: 10px;
  border: 5px solid black;
}
div:hover {
  border: 5px solid red;
}
div:active {
  border: 5px solid green;
}



《HTML》



文本

  • pre

用来定义预格式化的文本，被包围在pre标签中的 文本 or 标签中的文本 通常会

保留


空格

和

换行符

. 

<pre> 123
123
12 3
</pre>

显示效果：
    123
123
12 3
  • code

用于表示计算机源代码或者其他机器可以阅读的文本内容。

code标签 一般 用于 放在 pre标签中使用。 

<pre>
	<code>
		let name = "tom";
		let age = 10;
		console.log(name);
	</code>
</pre>



《常用样式》



背景图变形铺开不重复

div {
	background-size: 100% 100%;
	background-repeat: no-repeat;
}



字体动态大小

div {
	font-size: 1.5vw;
}



flex多个盒子 为正方形， 且 盒子宽度 动态变化

利用 width 的百分比是 根据 父盒子的 宽度，

padding-top： 10% 的百分比 也是根据 父盒子的宽度

，

这就确保了 为正方形， 且 盒子宽度 动态变化。

然后 子盒子中 再放一个 孙盒子 进行 绝对定位 来盛放 页面要展示的内容 即可 

<!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>
        /* 父 */
        .container { 
            border: 1px solid pink;

            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        /* 子 */
        .item {
            width: 15%;
            padding-top: 15%;
            position: relative;
        }

        /* 孙 */
        .aaa1 {
            border: 1px solid red;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">
            <div class="aaa1">
                123
            </div>
        </div>
        <div class="item">
            <div class="aaa1"></div>

        </div>
        <div class="item">
            <div class="aaa1"></div>

        </div>
        <div class="item">
            <div class="aaa1">
                123
            </div>
        </div>
        <div class="item">
            <div class="aaa1"></div>

        </div>
        <div class="item">
            <div class="aaa1"></div>

        </div>
        <div class="item">
            <div class="aaa1">
                123
            </div>
        </div>
        <div class="item">
            <div class="aaa1"></div>

        </div>
        <div class="item">
            <div class="aaa1"></div>

        </div>
    </div>

</body>
</html>



盒子动态 长宽比

上面 使用的盒子动态的长宽比 是比较传统的 方法，虽然 兼容性强，但是 使用起来麻烦。

下面介绍一个

盒子动态 长宽比 的属性

aspect-ratio


，使用起来很方便，而且兼容性也是很好的。 

<!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>
    div{
      width: 80%;
      aspect-ratio: 2/1; /* 2/1 ==> 宽 和 高 的长度之比是 2:1 */
      /* height: 200px; 此时 不要设置 高度 */

      background-color: aqua;
    }
  </style>
</head>
<body>
  <div>

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


版权声明：本文为weixin_45541665原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。