CSS基础知识3

最新推荐文章于 2024-02-23 10:22:08 发布
最新推荐文章于 2024-02-23 10:22:08 发布
阅读量131 收藏
点赞数 1
文章标签： css 前端 html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64204485/article/details/131866519
版权

续CSS基础知识2

文章目录

五丶字体

5.1 font-family 属性

可以通过font-family指定字体

代码：

<style>
        h1{
            font-family: "楷体";
        }
        h2{
            font-family: "黑体";
        }
        h3{
            font-family: "宋体";
        }
    </style>
<body>
    <h1>楷体</h1>
    <h2>黑体</h2>
    <h3>宋体</h3>
</body>

在这里插入图片描述

5.2 字体样式

代码：

<style>
	.text1{
		font-style: normal;
	}
	.text2{
		font-style: italic;
	}
</style>
<body>

    <p class="text1">我是正常文本</p>
    <p class="text2">我是斜体</p>
</body>

在这里插入图片描述

5.3 字体加粗

代码：

<style>
		.text-1{
            font-weight: normal;
        }
        .text-2{
            font-weight: bold;
        }
</style>
<body>
    <span class="text-1">我是正常文本</span>
    <span class="text-2">我是加粗文本</span>
</body>

在这里插入图片描述

5.4 字体大小

5.4.1 以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小：

h1 {
	font-size: 40px;
}
h2 {
	font-size: 30px;
}
p {
	font-size: 14px;
}

如果你使用了像素，则仍然可以使用缩放工具来调整整个页面的大小。

5.4.2 以em设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

实例：

h1 {
	font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
	font-size: 1.875em; /* 30px/16=1.875em */
}
p {
	font-size: 0.875em; /* 14px/16=0.875em */
}

这种方式设置的字体可以再浏览器的设置中更改字体大小

5.4.3 百分比和em的组合

body {
	font-size: 80%;
}
h1 {
	font-size: 2.5em;
}
h2 {
	font-size: 1.875em;
}
p {
	font-size: 0.875em;
}

5.4.4 响应式字体大小

可以使用vw单位设置文本大小，它的意思是”视口宽度“

这样，文本大小将遵循浏览器窗口的大小。当调整浏览器窗口的大小时，字体大小将会缩放。

h1 {
	font-size: 10vw;
}

视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

5.5 字体颜色

color字体颜色

h1 {
	color: red;
    /* color: #c1c1c1; */
    /* color: rgb(125, 254, 208); */
}

六丶盒子模型

6.1 盒子模型概述

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 盒模型实质上是一个包围每个 HTML 元素的盒子。它包括：外边距、边框、内边距以及实际的内容。下图展示了盒模型：

在这里插入图片描述

对不同部分的说明：

  • 内容 - 盒的内容，其中显示文本和图像。
  • 内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。
  • 边框 - 围绕内边距和内容的边框。
  • 外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。

盒模型允许我们在元素周围添加边框，并定义元素之间的空间。

背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

*{
	margin:0;
	padding:0;
}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元 素框的总尺寸。

假设盒的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置 为 70 像素

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

外边距可以是负值，而且在很多情况下都要使用负值的外边距。

6.2 宽度和高度

height和width

有如下的值：

  • auto浏览器计算高度和宽度（默认）
  • length以px或者cm定义
  • %包含块的百分比

6.3 内边距

padding内边距

  1. 内边距是什么：

    • 内边距是CSS中用于控制元素内容与边框之间距离的属性。
    • 内边距位于元素的边框与元素内容之间。

  2. 设置内边距：

    • 使用CSS的padding属性来设置元素的内边距。
    • padding属性可以通过指定像素值、百分比值或相对长度单位（如em或rem）来定义内边距的大小。

  3. 内边距的属性值：

    • 单值：指定的值将应用于元素的所有四个内边距（上、右、下、左）。
    • 双值：第一个值应用于上下内边距，第二个值应用于左右内边距。
    • 三值：第一个值应用于上内边距，第二个值应用于左右内边距，第三个值应用于下内边距。
    • 四值：按顺序应用于上、右、下、左内边距。

  4. 内边距的单位：

    • 像素（px）：使用固定的像素值设置内边距。

    • 百分比（%）：相对于包含元素的宽度来设置内边距。

    • 相对长度单位（如em或rem）：相对于元素的字体大小来设置内边距。

      内边距不允许出现负值

  5. 相关注意事项：

    • 内边距会增加元素的尺寸。在计算元素的总宽度或高度时，需要考虑到内边距的值。
    • 内边距不会影响元素的背景颜色或边框的绘制，它们仅影响元素内容与边框之间的空间。

6.4 两种盒子模型：

  1. 标准盒模型：

    • 标准盒模型是CSS中默认的盒模型。

    • 标准盒模型的宽度（width）和高度（height）属性仅包括内容区域（content area）的尺寸。

    • 内容区域的尺寸不包括内边距（padding）、边框（border）和外边距（margin）。

    • 公式：在标准盒模型中，元素的宽度（width）指的是元素内容区域的宽度，不包括边框（border）、填充（padding）和外边距（margin）。换句话说，元素的宽度只包括纯粹的内容宽度。即：
      盒子的宽度 = w i d t h ( c o n t e n t ) + p a d d i n g + b o r d e r 盒子的宽度=width(content) + padding + border 盒子的宽度=width(content)+padding+border

​ 标准盒模型示意图：

在这里插入图片描述

  1. 怪异盒模型：

    • 怪异盒模型是某些浏览器的非标准盒模型。
    • 怪异盒模型的宽度（width）和高度（height）属性包括内容区域（content area）、内边距（padding）和边框（border）的尺寸。
    • 公式：在怪异盒模型中，元素的宽度（width）包括内容区域的宽度、填充（padding）和边框（border），但不包括外边距（margin）。换句话说，元素的宽度包括内容宽度、填充和边框的总和。即：
      盒子的宽度 = w i d t h ( c o n t e n t + p a d d i n g + b o r d e r ) 盒子的宽度=width(content + padding + border) 盒子的宽度=width(content+padding+border)

​ 怪异盒模型示意图：

在这里插入图片描述

  1. 区分标准盒模型和怪异盒模型：

    • 在CSS中，通过设置box-sizing属性来控制盒模型的类型。
    • 对于标准盒模型，box-sizing的值为content-box（默认值）。盒子的宽度为内容的宽度。
    • 对于怪异盒模型，box-sizing的值为border-box。将盒子转为怪异盒模型的计算方式，不会出现因为最初设置好的宽高被内边距撑大的情况。

    总结：在不设置box-sizing:border-box的情况下，自己定义的width相当于只定义了content的宽高；但是如果设置了box-sizing:border-box，自己定义的宽高就相当于定义了padding+border+content的总宽度，此时不管你是否添加内边距和边框，都不会影响盒子的大小，会自动裁剪掉content的相应区域。

6.5 边框

6.5.1 边框类型

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 500px;
            text-align: center;
        }
        p:nth-child(1){
            border-style: solid;
        }
        p:nth-child(2){
            border-style: dotted;
        }
        p:nth-child(3){
            border-style: dashed;
        }
        p:nth-child(4){
            border-style: none;
        }
        p:nth-child(5){
            border-style: double;
        }
        p:nth-child(6){
            border-style: dotted dashed solid double;
        }
    </style>
</head>
<body>
    <p>我是实线</p>
    <p>我是点状线</p>
    <p>我是虚线</p>
    <p>我是无边框</p>
    <p>我是双线</p>
    <p>我是混合边框</p>
</body>
</html>

效果图：

在这里插入图片描述

6.5.2 边框宽度

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick 。

border-width: 10px;

代码：

p.px5 {
border-style: solid;
border-width: 5px;
}
p.medium {
border-style: solid;
border-width: medium;
}

6.5.3 边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

  • name - 指定颜色名，比如 “red”
  • HEX - 指定十六进制值，比如 “#ff0000”
  • RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
  • HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
  • transparent

代码：

p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}

混合写法：border: 1px solid red;

6.6 外边距

margin属性用于在任何定义的边框之外，为元素周围创建空间。

CSS 拥有用于为元素的每一侧指定外边距的属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

所有外边距属性都可以设置以下值：

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距

允许负值

  1. 一个值：使用相同的值来定义四个方向的外边距。

    margin: 10px;
    • 上下左右的外边距都是10像素。

  2. 两个值：分别定义水平方向和垂直方向的外边距。

    margin: 10px 20px;
    • 上下的外边距都是10像素，左右的外边距都是20像素。

  3. 三个值：分别定义上外边距、水平方向的外边距和下外边距。

    margin: 10px 20px 30px;
    • 上外边距是10像素，左右的外边距都是20像素，下外边距是30像素。

  4. 四个值：分别定义上、右、下、左四个方向的外边距。

    margin: 10px 20px 30px 40px;
    • 上外边距是10像素，右外边距是20像素，下外边距是30像素，左外边距是40像素。

**口诀：**找对面，如果哪一个值没有设置的话，可以找他对面的值，拿三个值的情况距离，先是上然后是右，然后是下，左边没有左边就找对面的右边，跟右相等。

你可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

代码：

div.content {
width: 300px;
margin: auto;
border: 1px solid red;
text-align: center;
}

6.7 外边距塌陷

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的 外边距的高度中的较大者。

6.7.1 兄弟关系的外边距塌陷

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

在这里插入图片描述

两个兄弟元素，第一个兄弟元素有底部外边距，第二个兄弟元素有顶部外边距，然后二者的外边距会发生一个合并

解决办法：

  1. 给其中一个元素的display设置为inline-block;
  2. 给其中一个元素包一个盒子，然后给他的盒子设置一个overflow: hidden;

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	.box{
    		overflow: hidden;
    	}
        .box1{
            width: 300px;
            height: 200px;
            background-color: pink;
            margin-bottom: 50px;
          /*display: inline-block;*/
        }
        .box2{
            width: 300px;
            height: 200px;
            background-color:chartreuse;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">
        
    </div>
    
    
    <div class="box">
    	<div class="box1">
    	</div>
    </div>
    <div class="box2">
        
    </div>
</body>
</html>

6.7.2 父子关系的外边距合并

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

在这里插入图片描述

解决办法：

  1. 给父元素的display设置为inline-block;
  2. 给父元素设置一个overflow: hidden;

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 200px;
            background-color: pink;
            margin-top: 40px;
          /*display: inline-block;*/
            overflow: hidden;
        }
        .son{
            width: 300px;
            height: 100px;
            background-color:chartreuse;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

6.7.3 外边距塌陷的产生原因及解决办法

满足以下条件就会产生外边距塌陷现象：

  1. 子元素在父元素里面
  2. 子元素中有margin-top或者margin-bottom值

解决方案：

第一种：给父元素增加内边距padding值 ,或者直接不使用外边距，使用内边距，直接避免这个问题的产生。

第二种：父元素增加边框border值

第三种：父元素增加overflow：hidden

第四种：给父元素或者子元素增加浮动，让其脱离标准流都可以

第五种：将父元素转变为行内块元素，display：inline-block

第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

第七种：给父盒子增加flex或者inline-flex

6.8 BFC——块级格式上下文

6.8.1 BFC定义

  • BFC指的是块级格式化上下文，是Web页面中一个独立的渲染区域，具有一系列的渲染规则。
  • BFC决定了元素如何布局及与其他元素之间的关系。

6.8.2 BFC的创建方式

  • 根元素（HTML）
  • float属性不为none
  • overflow属性不为visible
  • display属性为inline-block、table-cell、table-caption、flex、inline-flex之一
  • position属性为absolute或fixed

6.8.3 BFC的特性

  • 内部的元素在垂直方向上一个接一个地放置。
  • BFC区域不会与浮动元素重叠。
  • BFC区域计算高度时会包括浮动元素。
  • BFC的边界会阻止上下边距的重叠。
  • BFC可以包含浮动的子元素，并且不会发生高度塌陷。

6.8.4 BFC的应用

  • 解决浮动元素引起的父元素高度塌陷问题。
  • 阻止外边距重叠。
  • 创建自适应多栏布局。
  • 创建包含浮动元素的容器。

6.8.5 触发BFC的技巧

  • 使用overflow: hidden;或其他非visible值。
  • 使用float属性浮动元素。
  • 使用display: inline-block;或其他特定的display值。
  • 使用position: absolute;或position: fixed;定位元素。

七丶定位

7.1 定位的属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

  • static
  • relative
  • absolute
  • fixed
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position属性，否则这些属性将不起作用。根 据不同的 position 值，它们的工作方式也不同。

当然， top、bottom、left 和 right可以直接通过inset来写。

7.2 静态定位（static positioning）

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static;的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

7.3 相对定位（Relative positioning）

  • 使用position: relative;来设置相对定位。
  • 相对于自身原来的位置进行定位，不会脱离文档流。
  • 可以通过top、right、bottom、left属性来进行偏移定位。
  • 其他元素仍会根据原来的位置进行布局。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: blue;
            position: relative;
            top: 50px;
            left: 110px;
        }
        .box3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

在这里插入图片描述

由图可知，box2原来的位置不会因为box2发生了定位而被box3占据位置。

7.4 绝对定位（Absolute positioning）

  • 使用position: absolute;来设置绝对定位。
  • 相对于最近的具有定位（非static）的父元素进行定位，如果没有则相对于文档进行定位。(子绝父相)；父亲相对定位不会影响整体布局。
  • 会脱离文档流，不占据原来的位置。
  • 可以通过top、right、bottom、left属性来进行精确定位。
  • 绝对定位的元素会覆盖其他元素，可以使用z-index属性来控制层级。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: blue;
            position: absolute;
            top: 150px;
            left: 110px;
        }
        .box3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

在这里插入图片描述

由图可见：box2绝对定位，因为没找到他的父亲有相对定位，所以根据文档进行定位，然后发生定位后box2脱离了文档流，box3占据了它的位置。

7.5 固定定位（Fixed positioning）

  • 使用position: fixed;来设置固定定位。
  • 相对于视口（浏览器窗口）进行定位，不随页面滚动而改变位置。
  • 常用于创建悬浮或固定在页面某一位置的元素。

7.6 粘性定位（Sticky positioning）

  • 使用position: sticky;来设置粘性定位。
  • 元素在滚动到特定位置时变为固定定位，否则按照正常文档流进行定位即相对定位，也就是说在相对定位和粘性定位切换。
  • 可以通过top、right、bottom、left属性来设置元素在粘性定位生效时的位置。

7.7 层级管理

  • 使用z-index属性来控制元素的层级顺序。
  • 较大的z-index值的元素将覆盖较小的值。
  • 元素需要使用定位（相对、绝对、固定或粘性定位）才能生效。

以上是CSS定位的一些基本概念和属性。通过灵活运用这些属性，可以实现复杂的网页布局和交互效果。记得在使用定位时考虑兼容性和响应式设计的需求。

八丶背景图片

8.1 背景图像的路径

  • 使用url()函数指定图像的路径，可以是相对路径或绝对路径。

  • 例如：

    background-image: url("images/image.jpg");

8.2 背景图像的重复方式

  • 默认情况下，背景图像会在水平和垂直方向上平铺以填充整个背景区域。

  • 可以使用

    background-repeat

    属性来指定重复方式，常见的值包括：

    • repeat：默认值，图像在水平和垂直方向上平铺。
    • no-repeat：图像不重复，只出现一次。
    • repeat-x：图像在水平方向上平铺。
    • repeat-y：图像在垂直方向上平铺。

  • 例如：

    background-repeat: no-repeat;

8.3 背景图像的位置

  • 使用background-position属性来指定图像在背景中的位置。

  • 可以使用关键字（如center, top, right, bottom, left）或百分比来定位图像。

  • 也可以使用具体的长度值（如像素或em单位）来精确指定位置。

  • 例如：

    background-position: center;

8.4 背景图像的尺寸

  • 使用background-size属性可以控制背景图像的尺寸。

  • 常见的值包括：

    • auto：保持图像的原始尺寸。
    • cover：自动调整图像大小，保持宽高比并覆盖整个背景区域。
    • contain：自动调整图像大小，保持宽高比并适应背景区域。
    • 具体的长度值（如像素或百分比）：指定图像的具体宽度和高度。

  • 例如：

    background-size: cover;

8.5 多个背景图像

  • 可以通过将多个url()函数用逗号分隔来使用多个背景图像。

  • 每个图像的样式属性（如重复方式、位置、尺寸）可以在background-image、background-repeat、background-position和background-size属性中分别设置。

  • 例如：

    background-image: url("image1.jpg"), url("image2.jpg");
background-repeat: no-repeat, repeat-x;

8.6 渐变背景图像

  • 可以使用linear-gradient()函数创建线性渐变背景图像。

  • 可以使用radial-gradient()函数创建径向渐变背景图像。

  • 渐变背景图像的语法复杂一些，可以指定渐变的起始颜色、结束颜色和渐变方向等参数。

  • 例如：

    background-image: linear-gradient(red, blue);

8.7 简写背景属性

  • 如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

  • 例如：

  • 
/*background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size];*/
div {
	background: #ececec url("objective_bg.png") no-repeat right top;
}
/* 等同于下面的写法 */
div {
	background-color: #ececec;
	background-image: url("objective_bg.png");
	background-repeat: no-repeat;
	background-position: right top;
}

8.8 精灵图像（雪碧图）

精灵图（Sprite）是一种将多个小图标或图像合并到一个大图像中的技术。通过使用精灵图，可以减少图像的加载次数，提高网页的加载性能。

在CSS中，可以使用精灵图技术来实现图标的显示和切换。具体步骤如下：

  1. 创建精灵图：将多个小图标或图像合并到一个大图像中，可以使用图像编辑工具（如 Photoshop）来完成。
  2. 设置背景图像：使用 background-image 属性将精灵图指定为元素的背景图像。
  3. 定义图标样式：通过设置 background-position 属性来定位精灵图中的图标。通过调整 background-position 的值，可以选择显示不同的图标。
  4. 显示图标：将元素的宽度和高度设置为单个图标的尺寸，通过设置 background-position 来显示所需的图标。

以下是一个示例，展示如何使用精灵图显示不同的图标：

HTML:

<ul class="icon-list">
  <li class="icon icon1"></li>
  <li class="icon icon2"></li>
  <li class="icon icon3"></li>
</ul>

CSS:

.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon {
  width: 32px;
  height: 32px;
  background-image: url("sprites.png");
}

.icon1 {
  background-position: 0 0;
}

.icon2 {
  background-position: -32px 0;
}

.icon3 {
  background-position: -64px 0;
}

在上面的示例中，.icon 类设置了精灵图作为背景图像，并通过不同的 background-position 值来显示不同的图标。

通过使用精灵图，可以减少图像的加载时间，提高网页性能，并且实现图标的切换和显示效果。

未完待续…

搬砖搬到互联网
关注
padding 后尺寸变化 设置_使用rem设置padding大小的问题
weixin_39751453的博客
12-21 2007
HTML代码：rem再体验主要样式为：html{font-size: 6.25%;}//也就是1rem等同于1px.container-fluid{font-size:16rem; padding:15rem; margin:15rem;}看到这样的代码，我认为container-fluid的字体大小为16px，padding值为15px，可实际上呢？Chrome(版本号：53.0.2756.0 ...
px和em和rem的区别
叶子yes的博客
07-21 468
可以看出padding变成了28px，所以em设置的值不是固定的，会随当前元素的字体大小的变化而变化。可以看出，padding仍然是20px，所以rem相对的是html元素的字体大小而言的。px是像素单位，是相对屏幕宽高度而言，一旦设定就无法随浏览器尺寸的改变而改变。可以看出默认1em=16px（因为默认字体大小为16px）rem也是一个相对长度单位，相对的是html元素的字体大小而言的。示例设置padding为30px，宽高100px。em是相对长度单位，相对当前元素的字体大小而言。...
REM vs EM
A13330069275的博客
11-21 248
REM vs EM 作者：静子 日期：2016-02-24 点击：6275 rem em 长度单位 编辑推荐： 掘金是一个高质量的技术社区，从 CSS 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容，或到各大应用市场搜索「 掘金
移动端开发之rem布局
qq_35788269的博客
05-31 704
移动端开发之rem布局今天，博主带来的分享是移动端开发之rem布局！先来贴下效果把！移动端设备为iphone6代码如下：主要有四部分，HTML部分，CSS部分，浏览器以及设备兼容部分，常用设置部分！第一部分：HTML部分：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
【HTML+CSS】移动WEB开发之rem布局
m0_55644132的博客
10-29 1133
媒体查询（Media Query）是 CSS3 的新语法使用@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不同屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、安卓手机、平板等设备都用到媒体查询Less（Leaner Style Sheets的缩写）是一门 CSS 扩展语言，也称为 CSS 预处理器。
CSS基础知识超全整理
07-04
整理好的一份关于css的知识大纲，希望能够帮助到大家，可以用来复习回顾
CSS基础知识
07-22
资源名称：CSS基础知识内容简介：0、基础知识1、CSS概述2、CSS基础语法3、CSS选择器4、CSS主要属性5、CSS核心机制-盒子模型6、CSS重点和难点-定位7、综合示例浏览器模式 当浏览器厂商开始创建于标准兼容的浏览器时...
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识，...
html&css入门基础知识点.pdf
10-04
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
CSS基础知识.pdf
10-04
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
前端学习——CSS学习
最新发布
m0_46638350的博客
02-23 1064
1. 未脱离、半脱离、全脱离1. 位置未脱离：元素按照文档流的顺序，依次排列。半脱离：碰到（父元素、未脱离元素、浮动元素），就会停止。全脱离：按照position各自的特性，移动到指定位置2. 层级未脱离 < 半脱离 < 全脱离相同位置、相同z-index的元素，后面的元素会覆盖前面的元素全脱离元素，z-index数值大的元素，覆盖z-index数值小的元素。
网站开发进阶（五十五）CSS padding、margin 属性
IT全栈 华强工作室
01-01 2132
设置 p 元素的 4 个内边距： p { padding:2cm 4cm 3cm 4cm; } 所有浏览器都支持 padding 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。 定义和用法 padding 简写属性在一个声明中设置所有内边距属性。 说明 这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替...
[css] 使用rem时应该注意什么？
歌谣的博客
02-06 326
[css] 使用rem时应该注意什么？ 看了下 绝对单位 和 相对单位。 em 是相对元素本身的 font-size 的相对单位，比如元素本身的 font-size 是 14px，那么 1.2em = 1.2 * 14px = 16.8px。注意，是相对元素本身的 font-size，会随着元素的 font-size 的改变而改变。 rem 是 root em 的缩写，相对根元素的 font-size 相对单位，比如根元素的 font-size 是 14px，那么 1.2rem = 1.2 * 14p
怎么在css里面使用rem,我应该在CSS中使用px或rem值单位吗？
weixin_30746795的博客
08-03 480
我想赞扬josh3736提供一些优秀历史背景的答案。虽然它很清晰，但自从提出这个问题以来，近五年来CSS的格局发生了变化。当问到这个问题时，答案px是正确的，但今天不再适用。tl;博士：使用rem单位概述历史上，px单位通常表示一个设备像素。对于具有越来越高像素密度的设备，这种设备不再适用于许多设备，例如Apple的Retina Display。rem单位代表rootem大小。这font-s...
rem布局---个人首页设计
寻常的博客
08-05 221
运行结果 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta http-e...
何时使用 em 与 Rem
fanlulu2015的博客
01-06 2177
何时使用 Em 与 Rem 长度单位 你可能已经很熟练使用这两个灵活的单位，但你可能不完全了解何时使用 rem ，何时使用 em。 本教程将帮你弄清楚! em 和 rem都是相对单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem，它可以被浏览器解析成 从16px到 160px 或其他任意值。 padding设置了1em 解
响应式布局中rem、em、vw设置字体大小自适应
热门推荐
MiuWing的博客
08-17 1万+
rem是指根元素（root element，html）的字体大小，从遥远的 IE6 到 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。 这样一个新的单位兼容性如何呢？         IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。        em 的计算是基于父级元素的，在实际使用中给我
px、em和rem的区别和使用案例
蔡畅-HTML5工程师
11-30 4781
由于最近在做公司移动项目的开发，所以在开始项目之前，我第一步要做的就是统一单位。在之前写PC端网站时，都是使用px作为长度单位，在接下来的手机项目中为了实现响应式开发，开始使用em，然后出现了一个可怕的问题，那就是当<input type="text">获得焦点时，整个页面会放大，至于为什么会出现这种情况，然后又该怎么解决呢？当初真的是弄得头都大了，后来没有办法，我的解决办法就是把会放大的页面
开发注意事项（自适应、内外边距，rem）
qq_43121828的博客
05-29 759
1.开发自适应布局： 宽度和高度尽量用百分比，内外边距和字体用rem，rem是相对于html设置的字体大小为基准，比如：html设置字体大小为16px 那么1rem=16px，如果不设置，默认为16px 高度自适应布局：上下设置固定单位的高度 中间内容用margin-top和buttom 高度设置为 height：auto 宽度自适应布局：左右分别设置固定宽度，并且进行左右浮动，中间部分设置m...
HTML5+CSS3基础知识大全
**CSS3基础知识点** 1. **CSS简介**：CSS（Cascading Style Sheets）是一种样式表语言，用于控制网页的布局和样式。 2. **CSS结构**：CSS结构主要包括选择器、属性和值，选择器用于选择要样式化的元素，属性用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值