复习记录CSS一些碎片笔记

已于 2022-09-29 18:10:35 修改
阅读量192 收藏 1
点赞数 1
分类专栏： 学习笔记 文章标签： html 前端 css css3 学习
于 2022-09-29 01:31:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_59018571/article/details/127057066
版权

目录​​​​​​​

1、text-align

 2、width

3、height

4、<hr>

5、background-color​

6、box-shadow

7、opacity

8、text-transform

9、font-weight  

10、font-size

 11、line-height

12、链接伪类选择器 

13、position

14、float

15、z-index

16、background: linear-gradient( )

17、background: ​​​​​​​repeating-linear-gradient( )

18、transform

19、使用 CSS 创建一个图形

 20、animation属性和@keyframes规则

21、@media 媒体查询

22、图片自适应

23、使用视网膜图片

24、排版自适应

1、text-align

用于指定元素文本的水平对齐方式

 2、width

设置元素的宽度

3、height

 设置元素的高度

属性值与 width 一致

4、<hr>

可以创建一条宽度撑满父元素的水平线 (它是一个单标签)

 

5、background-color​

设置一个元素的背景颜色 (背景包括元素的总大小、padding、border) 

 使用 rgba() 可以半透明效果，rgba() 函数解释如下:

 alpha​ 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明

6、box-shadow

用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表

box-shadow 属性的参数描述:

 其中，blur-radius 和 spread-radius 是可选参数。

示例: 

还可以通过逗号分隔每个 box-shadow 元素的属性来添加多个 box-shadow。 

CSS代码:

div {
    width: 150px;
    height: 150px;
    background-color: #fff;
    
    box-shadow: 120px 80px 40px 20px #0ff;
    /* 顺序为: offset-x, offset-y, blur-size, spread-size, color */
    /* blur-size 和 spread-size 是可选的 (默认为 0) */

 图解:

7、opacity

用来设置元素的透明度

属性值在 0 - 1 之间，0 代表完全透明，1 代表完全不透明

透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

rgba 和 opacity 效果对比:

8、text-transform

用来改变​英文​字母的大小写

9、font-weight  

 用来设置文本的粗细

10、font-size

用于设置字体大小

它可以应用于任何包含文字的元素内

单位: 长度单位(px、em)、绝对大小值(small, large)、百分比 (%)

 11、line-height

用来设置行间的距离(行高)，行高就是每行文字所占据的垂直空间

12、链接伪类选择器 

（1）:hover  鼠标悬停到链接上就为样式做更改

（2）:link  链接未被访问时的样式

（3）:visited 链接已被访问后的样式

（4）:active 当链接被鼠标点击时的样式

不止是用于链接，块元素、行内元素都可以应用

示例代码:

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>

<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>

<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>

运行结果:

13、position

盒模型: 在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的 盒模型

块级元素:  会自动从新的一行开始（比如​标题​、​段落​以及 div）

行内元素: 会排列在上一个元素后，默认不会新起一行（比如图片以及 span）

普通流: 元素默认按照的布局方式，就称为文档的普通流

CSS 提供了 ​position​ 属性来覆盖普通流，可使用 position 指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型

值描述
absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

inherit规定应该从父元素继承 position 属性的值。
initial设置该属性为默认值

使用 absolute(绝对定位) :

absolute 定位会​将元素从当前的文档流里面移除，周围的元素会忽略它；

absolute 定位比较特殊的一点是元素的定位参照于最近的​已定位祖先元素；

如果它的父元素没有添加定位规则（默认是 position:relative;）,浏览器会继续寻找直到默认的 body 标签

<style>
  h2 {
    position: absolute;
    left: 100px;
    top: 150px;
  }
</style>

<h2>这是一个绝对定位了的标题</h2>
<p>
  用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100
  px和距离页面的顶部150 px的元素。.

运行结果：

使用 relative(相对定位) :

<style>
  h2.pos_left {
    position: relative;
    left: -50px;
  }

  h2.pos_right {
    position: relative;
    left: 50px;
  }
</style>

<body>
  <h2>这是位于正常位置的标题</h2>
  <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
  <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
  <p>相对定位会按照元素本身的原始位置对该元素进行移动。</p>
  <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
  <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

运行结果:

使用 fixed(固定定位) :

它是一种特殊的绝对（absolute）定位，区别是其参照物是浏览器窗口；

会将元素从当前的文档流里面移除，其它元素会忽略它的存在；

fixed 定位和 absolute 定位的最明显的区别是 fixed 定位元素不会随着屏幕滚动而移动

<style>
  #navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #767676;
  }
</style>
<body>
    <nav id="navbar">
      <ul>
        <li><a href="/">网站首页</a></li>
        <li><a href="/about/about.html">联系我们</a></li>
      </ul>
    </nav>

14、float

用来设置元素的浮动定位​​​​​​​​​​​​​​

浮动元素不在文档流中，它向左或向右浮动；

直到它的外边缘碰到包含框或另一个浮动框的边框为止；

浮动元素之后的元素将围绕它；

浮动元素之前的元素将不会受到影响

示例：

图像添加了右浮动，在它下面的文本将环绕在它左边

<style>
  img {
    float: right;
  }
</style>
<body>
  <p>
    在下面的段落中，我们添加了一个
    <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。
  </p>
  <p>
    <img
      src="https://atts.w3cschool.cn/attachments/image/20201019/1603097333917107.png"
      width="95"
      height="84"
    />
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
  </p>
</body>

运行结果：

15、z-index

可以指定元素的堆叠次序，它的取值是整数，数值大的元素优先于数值小的元素显示

图解：​​​​​​​

16、background: linear-gradient( )

CSS提供的 background 里面的 linear-gradient() 方法，可以实现HTML 元素背景色的线性渐变，它是利用最后一个颜色把位置填充完

语法:

background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);

参数​​​​​​​1：指定了颜色过渡的方向，它的值是角度 (如: 90deg 代表垂直渐变，45deg 和反斜杠方向差不多)

其余参数：指定了渐变颜色的顺序

示例：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

运行结果：

17、background: ​​​​​​​repeating-linear-gradient( )

repeating-linear-gradient() 方法与 linear-gradient( ) 的区别是，它是用重复的效果去填充没有填充的位置

语法：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

参数及描述：

Value描述
angle定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。
side-or-corner指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的。
color-stop1, color-stop2,...指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。

单位可以用百分比或像素值

示例：

运行结果：

18、transform

transform 属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作

值描述
none定义不进行转换。
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换，只是用 X 轴的值。
translateY(y)定义转换，只是用 Y 轴的值。
translateZ(z)定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。

（1）scale( ) 

可以定义 2D 缩放转换​​​​​​​​​​​​​​  

示例：

p {
  transform: scale(2);
}
div {
    width：50px；
    height: 50px;
    tranform: scale(2, 3);
}

 只写一个值表示同比例放大，两个值表示宽、高各自放大多少倍；

元素里的文字会跟着变化

 图示：

使用伪类描述元素的指定状态时(如 :hover)，transform 属性可以方便的给元素添加交互

示例：

p:hover {
  transform: scale(2.5);
// 表示当用户悬停段落元素时，段落大小缩放到原始大小 2.5 倍
}

（2）skewX()、skewY()

 skewX() 能使选择的元素沿着 X 轴（横向）翻转指定的角度

值是度数，可以是正数也可以是负数

示例：

div { 
    width: 70%;
    height: 100px;
    margin:  50px auto;
    background-color: blue;
    transform: skew(28deg);
  }

运行结果：

skewY() 能使指定元素沿 Y 轴（垂直方向）翻转指定角度

示例：​​​​​​​

div { 
    width: 70%;
    height: 100px;
    margin: 50px auto;
    background-color: orange;
    transform: skewY(-15deg);
  }

 运行结果：

transform 属性的其他函数，可自己到编辑器里去测试

19、使用 CSS 创建一个图形

（1）巧用 box-shadow、border-radius 属性，创建新月图形

 代码：

<style>
  body {
    background-color: black;
  }
  .newmoon {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 25px 10px 0px 10px white;
  }
</style>
<body>
  <div class="newmoon"></div>
</body>

运行结果：

 （2）使用 CSS 和 HTML 创建更复杂的形状

（2.1）先认识一下 ::before 和 ::after 伪类

::before 和 ::after 伪类用来在选择元素之前和之后添加一些内容；

这个属性通常用来给元素添加内容诸如图片或者文字；

::before 和 ::after 必须配合 content 来使用​​​​​​​；

当 ::before 和 ::after 伪类用来添加某些形状而不是图片或文字时，content 属性仍然是必需的，但是它的值可以是空字符串。 

示例：

使用::before 伪类元素给 .box 元素添加一个正方形

<style>
	.box::before {
	  content: "";
	  background-color: blue;
	  border-radius: 25%;
	  position: absolute;
	  height: 50px;
	  width: 70px;
	}

</style>
<body>
	<div class="box"></div>
</body>

运行结果：

 创建一个心形

代码：

<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content: " ";
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style>
<div class="heart"></div>

运行结果：

 20、animation属性和@keyframes规则

​​​​​​​它们一起使用可以给元素添加动画，animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。

创建动画的原理：将一套 CSS 样式逐渐变化为另一套样式

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值说明
animation-name指定要绑定到选择器的关键帧的名称
animation-duration动画指定需要多少秒或毫秒完成
animation-timing-function设置动画将如何完成一个周期
animation-delay设置动画在启动前的延迟间隔。
animation-iteration-count定义动画的播放次数。
animation-direction指定是否应该轮流反向播放动画。
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state指定动画是否正在运行或已暂停。
initial设置属性为其默认值。 阅读关于 initial的介绍。
inherit从父元素继承属性。  阅读关于 initinherital的介绍。

animation共有8个属性，其中最常用的属性是 animation-name 和 animation-duration

（1）基本使用

示例：

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
  }

  #rect {
    /* 给选择的id为 rect 的元素添加animation属性 */
    animation-name: rainbow;
    animation-duration: 4s;
  }

  /* @keyframes要引用创建的动画名称 */
  @keyframes rainbow {
      /* 以百分比来规定改变的时间，或者通过关键词“​from​”和“​to​”，等价于 0% 和 100% */
      0%{
          background-color: blue;
      }
      50% {
          background-color: green;
      }
      100% {
          background-color: yellow;
      }
  }
  
</style>
<div id="rect"></div>

0%是动画以什么样子开头，100%就是动画怎么结束；

不是只有开始和结束的过渡可以设置，​0% 到 100% 间的任意百分比都可以设置​。

（2）使用CSS动画在鼠标悬停时改变元素的样式

示例：

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }
  
  button:hover {
    animation-name: button;
    animation-duration: 500ms;
    /* animation-fill-mode 指定了在动画结束时元素的样式 */
    animation-fill-mode: forwards;
  }
  @keyframes button {
      /* 可以只添加一个规则 */
      100% {
          background-color: #4791d3;
      }
  }
  
</style>
  
<button>注册</button>

（3）使用 CSS 动画创建运动

当元素的 position 被指定，如 fixed 或者 relative 时，

CSS 偏移属性 right、left、top 和 bottom可以用在动画规则里创建动作

示例：

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
    position: relative;
  }

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}

@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
    left: 0;
  }
  50% {
    background-color: green;
    top: 50px;
    left: 100px;
  }
  100% {
    background-color: yellow;
    top: 0px;
    left: -100px;
  }
}
</style>

<div id="rect"></div>

（4）使元素渐隐

示例：

<style>
  #ball {
    width: 70px;
    height: 70px;
    margin: 50px auto;
    position: fixed;
    left: 20%;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: fade;
    animation-duration: 6s;
    animation-iteration-count: infinite;
  }

  @keyframes fade {
    50% {
      left: 60%;
      opacity: 0.1;
    }
  }

</style>

<div id="ball"></div>

（5）制作一个持续跳动的球

这次要利用到 animation-iteration-count 属性，它可以控制动画循环的次数，它的值可以是数字(指定循环多少次) 或者​​​​​​​ infinite(永久循环)

 示例：

    <style>
        #ball {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            position: relative;
            border-radius: 50%;
            border: 1px solid #888;
            background: linear-gradient(35deg,
                    #8800cc,
                    #ff00ff);
            animation-name: bounce;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        @keyframes bounce {
            0% {
                top: 0px;
            }
            50% {
                top: 249px;
                width: 130px;
                height: 70px;
            }
            100% {
                top: 0px;
            }
        }
    </style>
</head>

<body>
    <div id="ball"></div>
</body>

（6）制作无限跳动的心形

示例：

<style>

  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s; 
    animation-iteration-count: infinite;
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<div class="back"></div>
<div class="heart"></div>

这个心跳动画的每一秒包含两个部分:

  1. heart 元素(包括 :before 和 :after) 使用 transform 属性改变其大小；
  2. 背景 div 使用 background 属性改变其颜色​​​​​​​

（7）绘制星空(简易)

<style>
  .stars {
    background-color: white;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    animation-iteration-count: infinite;
  }

  .star-1 {
    margin-top: 35%;
    margin-left: 60%;
    animation-name: twinkle-1;
    /* 若是给 animation-duration 指定不同的动画时长，也可以让星星以不同频率闪烁 */
    animation-duration: 1s;
  }

  .star-2 {
    margin-top: 25%;
    margin-left: 25%;
    animation-name: twinkle-2;
    animation-duration: 1s;
  }

  .star-3 {
    margin-top: 5%;
    margin-left: 45%;
    animation-name: twinkle-3;
    animation-duration: 1s;
  }

  .star-4 {
    margin-top: -60%;
    margin-left: 10%;
    animation-name: twinkle-4;
    animation-duration: 1s;
  }

  /* 给星星不同的 @keyframes 规则，使小星星以不同的频率闪烁 */
  @keyframes twinkle-1 {
    50% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

  @keyframes twinkle-2 {
    20% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

  @keyframes twinkle-3 {
    40% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

  @keyframes twinkle-4 {
    80% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

  #back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
  }
</style>

<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>
<div class="star-4 stars"></div>

cubic-bezier 贝塞尔曲线，它是 animation-timing-function 属性里的一个函数，可以更好的控制动画的速度曲线。

曲线的形状代表了动画的速度；

曲线在 1*1 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变；

cubic-bezier 函数包含了 1 * 1 网格里的4个点：p0、p1、p2 和 p3；

其中 p0 和 p3 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)；

你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线；

在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 和 p2 两个点。

示例：​​​​​​​

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

在这个例子中，两个点的 x 和 y 值相等 (x1 = 0.25 = y1 和 x2 = 0.75 = y2) ，​​​​​​​​​​​​​​也就是动画速度呈线性，效果和 linear 一致(匀速运动)。

一个 贝塞尔曲线在线取值 ​​​​​​​​​​​​​工具

长这样：

 贝塞尔曲线是在 1*1 的坐标系统内 x 值只能在 0 到 1，但是 y 值可以是任意的

21、@media 媒体查询

媒体查询是 ​CSS3​ 中引入的一项新技术，它可以根据不同的​可视窗口大小调整内容的布局​；

​可视窗口​是用户在网页上的可见区域，根据访问网站的设备不同而不同；

媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式；

使用 ​@media​ 查询，你可以针对不同的媒体类型定义不同的样式；

​@media​ 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的；

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：

@media mediatype and|not|only (media feature) {
    /* CSS-Code; */
}

例子，当设备宽度小于或等于 100px 时返回内容：

@media (max-width: 100px) { /* CSS Rules */ }

例子，当设备高度大于或等于 350px 时返回内容：

@media (min-height: 350px) { /* CSS Rules */ }

只有当媒体类型与所使用的设备的类型匹配时，媒体查询中的 CSS 属性才生效

示例：

<style>
  p {
    font-size: 20px;
  }
  
  /* 在这行下面添加代码 */
  @media (max-height: 800px){
      p {
          font-size: 14px;
      }
  }
  
</style>
  
<p>
    CSS 指层叠样式表 (Cascading Style Sheets), 通过使用 CSS 我们可以大大提升网页开发的工作效率！
</p>

22、图片自适应

用 CSS 来让​图片自适应​，只需要给图片添加这些属性:

img {
  /* ​确保图片不超出父容器的范围 */
  max-width: 100%;
  /* 保持图片的原始宽高比 */
  height: auto;
}

示例：

<style>
.responsive-img {
max-width: 100%;
height: auto;
}

img {
  width: 600px;
}
</style>

<img class="responsive-img" src="https://atts.w3cschool.cn/rabbitgray1.jpg" alt="gray rabbit">
<img src="https://atts.w3cschool.cn/rabbitgray1.jpg" alt="gray rabbit">

23、使用视网膜图片

由于 视网膜 和 非视网膜​ 显示器之间的像素密度(PPI​ 或​ DPI​) 不同，

某些 未考虑高分辨率显示器的图像 在 高分辨率显示器上渲染 时可能看起来像素化​；

使图像在高分辨率显示器(例如：MacBook Pro​ 的视网膜显示器​) 

上正常显示的最简单方法是将其 ​width​ 和 ​height​ 值设置为原始文件的一半

示例：

<style>
img {
    width: 300px;
    height: 300px;
}
</style>

<img src="https://atts.w3cschool.cn/rabbit600x600.png" alt="gray rabbit">

24、排版自适应

除了使用 em 或 px 设置文本大小，还可以用 视窗单位 来做响应式排版；

视窗单位和百分比都是相对单位，但它们是基于不同的参照物；

视窗单位是相对于设备的视窗尺寸(宽度或高度)，百分比是相对于父级元素的大小；

四个不同的视窗单位分别是：

  • vw：如 10vw 的意思是视窗宽度的 10%。
  • vh： 如 3vh 的意思是视窗高度的 3%。
  • vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
  • vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。

例子， 设置 body 标签的宽度为视窗宽度的 40%：

body { width: 40vw; }

示例：

<style>
h2 {
    /* h2 标签的 width 为视窗宽度的 85% */
    width: 85vw;
}

p {
    /* p 标签的 width 为视窗高度和宽度中较小值的 75% */
    width: 75vmin;
}
</style>

<h2>十六进制颜色</h2>
<p>
所有浏览器都支持十六进制颜色值。

十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

举例说，#0000ff 值显示为蓝色，这是因为蓝色成分被设置为最高值（ff），而其他成分被设置为 0。
</p>

茶茶是我的猫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css课堂笔记前端css课堂笔记
08-05
CSS课堂笔记 本文档详细介绍了CSS的基本概念、语法、选择器、导入方式等知识点，为读者提供了系统的CSS基础知识。 一、CSS概念 CSS（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。...
CSS3手写笔记.md
04-14
看黑马视频里面的前端css3笔记，里面主要是讲课老师在课堂上手写的笔记，非常详细，供大家学习，一起交流学习
css碎片
weixin_33989780的博客
08-04 80
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS知识碎片
yiyan12的专栏
03-18 144
1、常用display :none           /*不显示，不占位*/ :inline /*行内*/ :block /*块*/ :flex /*弹性*/ :flow /*流式布局*/ :grid /*网格布局*/   2、position: :static   //无定位         3种最常用的定位 :relative //相对定位，相对...
CSS碎片知识整理
duandianyiwai的博客
08-05 342
1.效果 border-style:none;//无边框          border-width:0;//边框宽度为0px   2.区别 （1）性能差异 border:0;浏览器对border-width、border-color进行渲染，占用内存。 （当定义边框时，不仅要设置边框宽度，还要设置边框样式才能达到显示的效果） border:none;浏览器不进行渲染，不占用内存
使用 CSS 遮罩和自定义属性实现图像碎片效果
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
08-16 993
前言 今天我们要实现一个这样的效果：首先我们页面上有一张完整的图像，然后当我们鼠标滑过图像的时候，让它一次消失一块，就像漂浮在微小的碎片中一样，从而达到碎片消失的效果。 具体实现方式不需要JavaScript处理，也不需要SVG。只有一个img和一些SCSS。 先看一个效果： 很酷，对吧？当然，但问题是。您必须在Chrome、Edge或Opera中查看这一点，因为这些浏览器是目前唯一支持@property的浏览器，这是实现这一想法的关键组件。我们不会让它阻止我们，因为这是一个很好的机会，可以让我们接触到很
CSS pink老师教学笔记详解
starry-sea1412的博客
05-17 737
CSS 是一种用于网页设计的样式表语言，通过定义样式规则来控制页面元素的显示效果。它提供了大量的样式属性和值，可以实现众多的视觉效果和交互特效，同时还支持媒体查询和响应式设计。CSS 可以以多种方式引入到 HTML 文档中，是 Web 页面的重要组成部分。
计算机导论期末复习笔记
2301_78723800的博客
01-06 1028
第1章概述 一．选择题 1. D 2.C 3.D 4.B 5.A 6. D 7.B 8.A 9.A 10. C 11.A 12.B 13.ABCD 世界上第一台电子数字计算机是 ENIAC 计算机系统必须具备的两部分是硬件和软件 摩尔定律的内容是 微处理器的处理能力每18~24个月将增加1倍 CAI 计算机辅助教学 计算机学科的根本问题是 什么能被有效的自动进行 二．简答题 1．举例说明石子计数的过程 答：早上放10头牛出去，就拿10颗小石子表示，
Java 复习笔记
热门推荐
qq_40422256的博客
08-18 2万+
Java复习笔记 持续更新 1.讲解一下Java跨平台原理 由于操作系统的的指令集不是完全一致的，就会让我们的程序在不同的操作系统上执行不同的程序代码 Java通过不同的系统，不同版本不同位数的java虚拟机来屏蔽不同的系统指令集差异而对外提供统一的接口（Java API）。我们只需按照接口开发即可。 2.面向对象的特征 封装：把客观的事物封装成抽象的类，并且类可以把自己的数据...
【八股】2023秋招八股复习笔记1（CSBase+部分WXG题）
小哈里的博客
08-17 1253
相反的，如果并发访问共享资源时，冲突概率非常低的话，就可以使用乐观锁，它的工作方式是，在访问共享资源时，不用先加锁，修改完共享资源后，再验证这段时间内有没有发生冲突，如果没有其他线程在修改资源，那么操作完成，如果发现有其他线程已经修改过这个资源，就放弃本次操作。而树的高度决定于磁盘 I/O 操作的次数，因为树是存储在磁盘中的，访问每个节点，都对应一次磁盘 I/O 操作，也就是说树的高度就等于每次查询数据时磁盘 IO 操作的次数，所以树的高度越高，就会影响查询性能。，为什么不选择它作为缓存呢？
DOM的复习笔记
lwr3379966的博客
06-01 242
文章目录DOM的复习笔记一.DOM的概念及作用二.DOM的基本操作1.查询（获取元素）2.创建、添加、删除、克隆、替换三.DOM元素类型四.属性获取和操作五.outerHTML/innerHTML/innerText六.childNodes节点的集合七.节点的高级选取八.读写css样式的值九.文档碎片（createDocumentFragment）十.DOM尺寸和位置1.尺寸2.坐标 DOM的复习笔记 一.DOM的概念及作用 DOM是”Document Object Model”的首字母缩写，即文档对象模型
HTML+CSS+JS复习笔记
03-07
在学习web技术中自己整理的学习笔记，附练习，可通过记事本打开查看源码
CSS基础_css_笔记
09-23
css基础笔记，适用于新手小白，浅显易懂
前端三件套css学习笔记分享
02-24
前端三件套css学习笔记分享
HTML初体验
linux423的博客
06-14 461
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
【数据结构与算法（C语言）】离散事件模拟- 单链表和队列的混合实际应用
weiweiliude2的专栏
06-17 813
事件驱动模拟，银行业务窗口排队模拟程序。合理利用 单链表和队列数据结构，C语言代码实现
HTML静态网页成品作业(HTML+CSS)——美食火锅介绍网页(1个页面)
最新发布
weixin_42283461的博客
06-18 488
HTML静态网页成品作业(HTML+CSS)——美食火锅介绍网页(1个页面)
Html_Css问答集(7)
白话魔法师
06-14 791
html与css学习中的一些疑问，问答中轻松获取知识。
html+css+javascript笔记
12-29
以下是一个简单的HTML+CSS+JavaScript笔记的示例： ```html <!DOCTYPE html> <title>HTML+CSS+JavaScript笔记 <link rel="stylesheet" href="demo.css"> /* 在demo.css中定义的样式 */ div { color: red; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值