CSS基础属性 - 技术栈

【三】基础属性

【1】高度和宽度

（1）参数

width（宽度）：用于设置元素的宽度。可以使用具体的数值（如像素值）或百分比来指定宽度。
height（高度）：用于设置元素的高度，使用方式与 width 属性类似。
max-width（最大宽度）：用于设置元素的最大宽度，防止元素的宽度超过指定的值。
max-height（最大高度）：用于设置元素的最大高度，防止元素的高度超过指定的值。
min-width（最小宽度）：用于设置元素的最小宽度，确保元素的宽度不会小于指定的值。
min-height（最小高度）：用于设置元素的最小高度，确保元素的高度不会小于指定的值。
单位：像素（px）、百分比（%）

（2）注意事项

行内标签无法设置高度和宽度，写了也无法生效
行内标签的高度是由其内容决定的，并且会根据内容的大小自动调整

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
     div, span{
         background-color: green;
         height: 50px;
         width: 50px;
     }
    </style>
</head>
<div>块级标签</div>
<br>
<span>行内标签</span>
</html>

【2】字体属性

字体属性用于控制文本的字体样式和外观

（1）参数

font-family（字体系列）：用于指定文本的字体系列。您可以通过指定多个字体名称来创建字体回退机制，以确保在用户计算机上找不到第一个字体时能够使用备用字体。
font-size（字体大小）：用于设置文本的字体大小。可以使用像素（px）、百分比（%）或其他单位来指定字体大小。
font-weight（字体粗细）：用于设置文本的字体粗细。常用的取值包括 normal（普通）、bold（粗体）、bolder（更粗）和 lighter（更细）。
font-style（字体样式）：用于设置文本的字体样式，常用的取值包括 normal（普通）、italic（斜体）和 oblique（倾斜）
color （颜色）：可以使用预定义的颜色名称（如 red、blue、green 等），也可以使用十六进制值（如 #ff0000 表示红色）或 RGB 值（如 rgb(255, 0, 0) 也表示红色）来指定颜色。

（2）示例

如果用户计算机上安装了 Arial 字体，则使用 Arial 字体显示文本；如果没有 Arial 字体，则使用 Helvetica 字体；如果连 Helvetica 字体也没有，则使用 sans-serif 字体作为备选

css 复制代码

p {
  font-family: Arial, Helvetica, sans-serif;
}

字体：大小24像素、加粗、斜体

css 复制代码

p {
	font-size: 24px;
    font-weight: bold;
    font-style: italic;
}

【3】文字属性

文字属性用于控制文本的布局、间距和装饰等

（1）参数

text-align（文本对齐）：用于设置文本在容器中的对齐方式。常用的取值包括 left（左对齐）、right（右对齐）、center（居中对齐）和 justify（两端对齐）。
text-decoration（文本装饰）：用于设置文本的装饰效果，如下划线、删除线等。常用的取值包括 none（无装饰）、underline（下划线）、overline（上划线）和 line-through（删除线）。
text-transform（文本转换）：用于控制文本的大小写转换。常用的取值包括 none（不转换）、uppercase（转换为大写字母）和 lowercase（转换为小写字母）。
letter-spacing（字间距）：用于设置字母之间的间距。可以使用像素（px）或其他单位来指定间距值
text-indent （首行缩进）：该属性用于指定文本块中首行相对于其余行的缩进量。可以使用像素（px）、百分比（%）或其他单位来指定缩进值。

（2）示例

文本上划线、转换为大写、字间距5个像素
首行缩进两个字符、居中（比缩进优先级高）

css 复制代码

p {
    text-align: center;
    text-decoration: overline;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-indent: 2em;
}

【4】背景属性

背景属性用于设置元素的背景样式，包括背景颜色、背景图片、背景重复等

（1）参数

background-color（背景颜色）：用于设置元素的背景颜色。可以使用颜色名称、十六进制值或 RGB 值来指定颜色。
background-image（背景图片）：用于设置元素的背景图片。可以使用图片的 URL 来指定背景图片。
background-repeat（背景重复）：用于设置背景图片的重复方式。常用的取值包括 repeat（默认，水平和垂直重复）、repeat-x（水平重复）、repeat-y（垂直重复）和 no-repeat（不重复）
background-position（背景位置）：用于设置背景图片的位置。可以使用关键词（如 top、bottom、left、right）或像素（px）来指定位置。第一个参数控制左边的距离，第二个参数是上距离。
background-attachment （背景附着）：该属性用于指定背景图片是否随元素的滚动而滚动，或者固定在视口中的位置不动。
- scroll（默认值）：背景图片会随元素的滚动而滚动。
- fixed：背景图片会固定在视口中的位置，不随元素的滚动而滚动。
- local：背景图片会随元素内部内容的滚动而滚动，即背景图片不会超出元素的边界。
- inherit：从父元素继承 background-attachment 的值。
- 注意：在移动设备上，fixed 值可能会导致背景图片无法正常显示
background-size 控制背景图片的缩放比例和大小，属性接受两个参数，分别用于指定背景图片的宽度和高度。常用的取值包括：
- auto（默认值）：保持背景图片的原始大小。
- cover：将背景图片等比例缩放，使其完全覆盖背景区域。可能会裁剪图片。
- contain：将背景图片等比例缩放，使其完全适应背景区域。可能会在背景区域内留有空白。
- <length>：使用具体的长度值（如像素或百分比）来指定背景图片的宽度和高度。
- <percentage>：使用百分比值来指定背景图片的宽度和高度，相对于背景区域的大小。

（2）示例

背景图片image、背景图片重复（默认）
背景附着固定、图片大小等比例缩放完全适应

css 复制代码

div {
  width: 400px;
  height: 400px;
  background-image: url("image.jpg");
  background-attachment: fixed;
  background-size: contain;
}

【5】边框属性

设置元素的边框样式、宽度和颜色

（1）参数

border-width（边框宽度）：可以使用具体的长度值（如像素）或预定义的关键字来指定边框的宽度。常用的关键字包括 thin、medium 和 thick，分别代表细、中等和粗的边框宽度。
border-style（边框样式）：可以使用预定义的样式关键字或具体的样式值来指定边框的样式。常用的样式关键字包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。
border-color（边框颜色）：可以使用颜色名称、十六进制值、RGB 值或 HSL 值来指定边框的颜色。
border-radius （边框圆角）：
- 单个长度值：指定所有四个角的圆角半径，例如 border-radius: 10px;。
- 两个长度值：第一个值指定左上角和右下角的圆角半径，第二个值指定右上角和左下角的圆角半径，例如 border-radius: 10px 20px;。
- 四个长度值：分别指定左上角、右上角、右下角和左下角的圆角半径，顺序为顺时针方向，例如 border-radius: 10px 20px 30px 40px;。

（2）示例

四周边框
宽2个像素、虚线、红色、圆角10像素

css 复制代码

/*两种方式等价，参数顺序无所谓*/
div{
    border-width: 2px;
    border-style: dashed;
    border-color: red;
    border-radius: 10px;
}
div {
    border: 2px dashed red;
    border-radius: 10px;
}

仅左边有边框
宽4个像素、实线、蓝色

css 复制代码

div{
  border-left: 4px solid blue;
}

【6】显示属性display

控制元素在页面中的显示方式

（1）参数

block：将元素显示为块级元素，会独占一行，并且默认情况下会在上下方向上产生一定的间距。块级元素可以设置宽度、高度、内边距和外边距。
inline：将元素显示为内联元素，不会独占一行，会在同一行内尽可能占据所需的空间。内联元素不能设置宽度、高度、上下内边距和上下外边距。
inline-block：将元素显示为内联块级元素，不会独占一行，但可以设置宽度、高度、内边距和外边距。内联块级元素会在同一行内尽可能占据所需的空间。
none：将元素隐藏，不会在页面中显示。隐藏的元素不会占据空间，并且对页面布局没有影响。
table：用于设置元素的显示类型为表格。该元素将按照表格的方式进行布局和显示，类似于HTML中的<table>元素

（2）示例

行内标签也可以设置宽度和高度

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
div, span {
    background-color: aqua;
    height: 50px;
    width: 50px;
}
span{
    display: block;
}
    </style>
</head>
<div>块级标签</div>
<br>
<span>行内标签</span>
</html>

隐藏

css 复制代码

display:none    隐藏标签(重点)  页面上不会保留位置也不显示
visibility:hidde  也是隐藏标签 但是位置会保留

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
    p, div, span{
        background-color: aqua;
    }
    p {
        display: none;
    }
    div {
        visibility: hidden;
    }
    </style>
</head>
<p>段落标签</p>
<div>块级标签</div>
<br>
<span>行内标签</span>
</html>

【7】溢出属性overflow

溢出属性（overflow property）用于控制当内容超出容器尺寸时的处理方式。
应用于具有限定尺寸的容器

（1）参数

visible：默认值。当内容超出容器尺寸时，会显示在容器外部，可能会覆盖其他元素。这意味着溢出的内容会在容器外部可见。
hidden：当内容超出容器尺寸时，会被裁剪隐藏，不会显示在容器外部。溢出的内容将被隐藏，无法通过滚动或其他方式查看。
scroll：当内容超出容器尺寸时，会显示滚动条，以便用户可以通过滚动来查看溢出的内容。即使内容没有超出容器尺寸，也会显示滚动条，但是处于禁用状态。
auto：当内容超出容器尺寸时，会根据需要显示滚动条。如果内容没有超出容器尺寸，不会显示滚动条。

（2）示例

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
        div {
            height: 100px;
            width: 100px;
            border: 5px solid red;
            float: left;
            margin: 20px;
        }

        .d1 {
            overflow: visible;
        }
        .d2 {
            overflow: hidden;
        }
        .d3 {
            overflow: scroll;
        }
        .d4 {
            overflow: auto;
        }
    </style>
</head>
<body>
<span>
    <div class="d1">
    人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。
    </div>
    <div class="d2">
    人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。
    </div>
    <div class="d3">
    人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。
    </div>
    <div class="d4">
    人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。
    </div>
</span>

</body>
</html>

头像

<!DOCTYPE html> <html> <head> <title>页面标题</title> <meta charset="UTF8"> <style> body { margin: 0; background-color: #4e4e4e; }

      #d1 {
          height: 200px;
          width: 200px;
          border-radius: 50%;
          border: 3px solid white;
          margin: 0 auto;
          overflow: hidden;

      }

      #d1 > img {
          width: 100%; /* 占标签100%比例 */
      }

  </style>

</head> <body>

</body> </html>

【8】透明度opacity

指元素或颜色的可见程度

（1）参数

opacity 属性：
- opacity 属性用于设置元素的整体透明度。
- 它的取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
- 透明度的值会影响元素及其内容的可见程度。
- 例如，设置 opacity: 0.5; 将使元素半透明，即可见度为 50%。
rgba() 函数：
- rgba() 函数用于设置颜色的透明度。
- 它接受四个参数：红色值、绿色值、蓝色值和透明度值。
- 透明度值的范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
- 例如，background-color: rgba(255, 0, 0, 0.5); 将设置背景色为红色，并将透明度设置为 50%。

（2）示例

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
    #p1 {
        opacity: 0.5;
    }
    #p2 {
        background-color: rgba(255, 0, 0, 0.5);
    }
    </style>
</head>
<body>
<p id="p1">段落二</p>
<p id="p2">段落一</p>
</body>
</html>