CSS布局汇总 | 青训营

尚年少_yu
233 阅读9分钟

CSS布局

定位（position）

默认定位

position: static;

元素按照正常的文档流进行布局，不受偏移属性的影响，层叠顺序由元素在HTML中的顺序决定。

绝对定位

position: absolute;

脱离文档流，相对于最近的已定位的祖先元素进行定位，如果没有则相对于浏览器窗口定位。可以使用偏移属性来指定位置，层叠顺序由z-index属性控制。

相对定位

position: relative;

相对于自身在文档流中的初始位置进行定位，不脱离文档流，仍占据原来的空间。可以使用偏移属性来指定位置，层叠顺序由元素在HTML中的顺序决定。

固定定位

position: fixed;

相对于浏览器窗口进行定位，不随滚动而移动，不脱离文档流，仍占据原来的空间。可以使用偏移属性来指定位置，层叠顺序由z-index属性控制。

粘性定位

position: sticky;

在滚动到特定位置时会固定在屏幕上，表现类似于相对定位和固定定位的结合。可以使用偏移属性来指定位置，兼容性可能有限。

总结

层叠顺序（z-index）用于控制元素在垂直方向上的显示顺序，数值越大的元素会覆盖数值较小的元素。z-index属性是不带单位的，可以设置负值。如果没有设置z-index属性，后面写的元素会优先显示在上层。设置z-index后，数值越大，层级越高，会显示在更上层。

盒子模型

盒模型规定了网页元素如何显示以及元素间相互关系。

image.png
  1. padding位于内容区域和边框之间的空白区域，用于增加元素内容与边框之间的距离。
  • 用来调整内容在容器中的位置关系
  • padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值
  1. padding属性值的4种方式：
  • 四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
  • 三个值：上 左右 下 {padding:10px 20px 30px ;}
  • 二个值：上下 左右 {padding:10px 20px ;}
  • 一个值：四个方向 padding:2px;
image.png image.png

补充：可单独设置一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;

  1. borderborder:边框宽度 边框样式 边框颜色;
  • 边框宽度：border-width
  • 边框颜色：border-color
  • 边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)

简写：border：30px solid blue; 顺序任意
单边框：

  • 上边框：border-top
  • 下边框：border-bottom
  • 左边框：border-left
  • 右边框：border-right

例：border-top：30px blue solid;

  1. margin(边界)在元素外边的空白区域。可以设置负值
  • margin-left:左边界
  • margin-right:右边界
  • margin-top:上边界
  • margin-bottom:下边界
  • margin:0 auto;横向居中

扩展：盒模型的总宽度（width）和总高度（height）等于内容区域的宽度和高度加上内边距、边框和外边距的大小。在进行布局时，需要考虑盒模型的各个部分对元素的尺寸和位置的影响。可以用CSS的盒模型属性（box-sizing）来控制盒模型的计算方式。

浮动属性

float: left;
元素靠左边浮动。在浮动布局中，元素会脱离正常的文档流，向左浮动到其父元素或前面的兄弟元素的边界上，其他内容会围绕着它。
float：right;
元素靠右边浮动。和float: left类似，元素会脱离正常的文档流，向右浮动到其父元素或前面的兄弟元素的边界上。
float：none;
元素不浮动。元素将按照正常的文档流布局，并不会影响其他元素的位置。

总结
  1. 浮动属性则主要用于页面的布局和元素位置的调整。通过浮动，可以使元素在页面中自由移动，并使其周围的内容进行布局。
  2. 浮动属性常用于创建多栏布局、图文混排、导航栏等场景，使页面结构更加灵活和自适应。

display（元素类型转换）

块级元素：独占一行或一块空间，相邻的块级元素会自动换行。

  • 常见的块级元素包括<div>、<p>、<h1>-<h6>、<ul>、<li>等，可以容纳其他块级元素和行内元素。

行内元素：不会独占一行，而是在同一行内按照从左到右的顺序排列。

  • 常见的行内元素包括<span>、<a>、<strong>、<em>、<img>、<input>等。
  • 行内元素的宽度和高度由其内容决定，无法直接设置，但可以通过设置padding、margin等属性来影响周围的空间。

行内块元素：同一行内显示，可以设置宽度、高度、内外边距等样式属性，且可以容纳其他行内块元素或行内元素。

  • 行内块元素是介于块级元素和行内元素之间的一种元素类型。
  • 常见的行内块元素包括<img>、<button>、<input type="checkbox">等。
display元素类型转换

  1. display: block;

    • 将元素转换为块级元素。
    • 块级元素会独占一行，宽度默认为父元素的100%。
    • 可以设置宽度、高度、内外边距等属性。

  2. display: inline;

    • 将元素转换为行内元素。
    • 行内元素不会独占一行，宽度由内容决定。
    • 不可以设置宽度、高度、上下内外边距等属性。

  3. display: inline-block;

    • 将元素转换为行内块元素。
    • 行内块元素不会独占一行，宽度由内容决定。
    • 可以设置宽度、高度、内外边距等属性。

  4. display: none;

    • 隐藏元素，使其不可见且不占据空间。
    • 元素在页面中完全被移除，不会影响其他元素的布局。

  5. display: list-item;

    • 用于设置<li>标签的显示类型。
    • <li>标签默认的display属性值，使其显示为列表项。

overflow（溢出属性）

用于控制容器元素中内容溢出时的处理方式，可以应用于包含块级元素的容器。

  1. overflow: visible;：默认值，溢出内容会显示在容器元素之外，不会裁剪或隐藏。
  2. overflow: hidden;：溢出内容会被隐藏，不会显示在容器元素之外。超出容器范围的内容将被裁剪掉，不可见。
  3. overflow: scroll;：如果内容溢出容器范围，会显示滚动条，用户可以通过滚动条来查看溢出的内容。即使内容没有溢出，滚动条也会一直显示。
  4. overflow: auto;：如果内容溢出容器范围，会显示滚动条，用户可以通过滚动条来查看溢出的内容。如果内容没有溢出，不会显示滚动条。
  5. overflow: inherit;：继承父元素的overflow属性的值，即容器元素会具有与其父元素相同的溢出处理方式。
  6. overflow-x: value;：用于控制容器元素在X轴方向上的溢出处理方式，可取的值与overflow属性相同。
  7. overflow-y: value;：用于控制容器元素在Y轴方向上的溢出处理方式，可取的值与overflow属性相同。
空余空间

用于控制元素内空白的处理方式。

  1. white-space: normal;：默认值，空白会被浏览器忽略，连续的空白字符会被合并成一个空格，文本会根据容器的宽度自动换行。
  2. white-space: nowrap;：文本不会换行，文本会在同一行上继续，直到遇到<br/>标签或者强制换行的情况为止。
  3. white-space: pre;：保留空白字符的原始格式，连续的空白字符会被保留，文本不会自动换行，只有遇到<br/>标签或者显式设置换行的情况才会换行。
  4. white-space: pre-wrap;：保留空白字符的原始格式，连续的空白字符会被保留，文本会根据容器的宽度自动换行，同时也会遵循显式设置的换行。
  5. white-space: pre-line;：合并连续的空白字符为一个空格，文本会根据容器的宽度自动换行，同时也会遵循显式设置的换行。
  6. white-space: inherit;：继承父元素的white-space属性的值，即元素会具有与其父元素相同的空白处理方式。
省略号显示

text-overflow属性用于控制当文本溢出容器时如何显示省略号（...）。

  1. text-overflow: clip;：默认值，当文本溢出容器时，直接裁剪文本，不显示省略号。
  2. text-overflow: ellipsis;：当文本溢出容器时，显示省略号（...）来表示被省略的文本内容。

要实现单行文本溢出显示省略号，通常需要结合其他属性一起使用：

  1. 设置容器宽度：通过设置容器的宽度（例如width: 200px;），限制文本在一行内显示。
  2. 强制文本在一行内显示：使用white-space: nowrap;，使文本不换行，强制在一行内显示。
  3. 溢出内容隐藏：使用overflow: hidden;，将溢出的文本内容隐藏起来，不显示在容器外部。
  4. 溢出文本显示省略号：使用text-overflow: ellipsis;，当文本溢出容器时，显示省略号来表示被省略的文本内容。

当文本超出容器宽度时，会自动显示省略号，以指示被省略的文本内容。这在限制文本长度并保持布局整洁的情况下非常有用。

补充（背景属性）

background-color(背景颜色)

background-color: 设置背景颜色，可以使用颜色名称、RGB值或十六进制值。
例如：background-color: red; 或 background-color: #ff0000;

background-image(背景图片)

background-image: 设置背景图片，使用url()函数引用图片的路径。
例如：background-image: url("path/to/image.jpg");

background-repeat(背景图片的平铺)

background-repeat: 设置背景图片的平铺方式，默认为repeat。
可选的值：no-repeat（不平铺）、repeat（平铺）、repeat-x（在水平方向平铺）、repeat-y（在垂直方向平铺）。
例如：background-repeat: no-repeat;

background-position(背景图片的定位)

background-position：水平位置  垂直位置； （可以设置负值）
background-position: 设置背景图片的定位位置。
使用水平位置和垂直位置的值来确定背景图片在元素内的位置。
可以使用关键字（left、right、top、bottom、center）或百分比值、像素值进行定位。
例如：background-position: center center; 或 background-position: 50% 50%;

background-attachment(背景图片的固定)

background-attachment: 设置背景图片的固定方式。
可选的值包括：scroll（背景图片随着页面滚动）和fixed（背景图片固定在浏览器窗口中）。
例如：background-attachment: fixed;

background(背景的复合属性)

backgourd-size属性只能单独用。
可以将上述属性合并为一个background属性，写法如下：
background: background-color background-image background-repeat background-position background-attachment;
例如：
background: red url("path/to/image.jpg") no-repeat center center fixed;

案例：

.box1{
      width:100px;
      height:100px;
 /* 
      background-color: blue;
      background-image: url(img/1.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed; 
  */
      background: url(img/1.jpg) no-repeat center fixed blue;
 }
avatar
文章
阅读
粉丝