CSS详解（二）

接上篇CSS详解（一）-CSDN博客

1、网页布局本质

网页布局的本质是通过 CSS 将各种 HTML 元素（即“盒子”）摆放到页面中合适的位置。这包括设置元素的尺寸、位置、边距、填充、对齐方式、浮动等。这些盒子通过 CSS 的各种布局机制进行排列，如浮动布局、定位布局、弹性布局（Flexbox）以及网格布局（CSS Grid）等

2、盒子模型组成

2.1 组成

2.1.1 内容（Content）：盒子内部的实际内容，例如文本、图片等。

2.1.2 内边距（Padding）：内容与边框之间的空间。

2.1.3 边框（Border）：围绕内容和内边距的线。

2.1.4 外边距（Margin）：盒子与其他盒子之间的空间。

2.2 影响盒子本身大小的主要因素

2.2.1 内容（Content）：盒子内部的实际内容决定了盒子的大小。

2.2.2 内边距（Padding）：内边距增加会使盒子变大，因为它是内容与边框之间的空间。

2.2.3 边框（Border）：边框的大小也会增加盒子的总大小。

这三个部分加在一起，构成了盒子的总大小。而外边距（Margin）虽然不影响盒子的大小，但它影响了盒子与其他元素之间的距离

3、border边框

在 CSS 中，border 属性可以用来设置元素的边框样式，它有三个子属性分别是 border-color、border-width 和 border-style，它们分别用于设置边框的颜色、粗细和样式。

3.1 border-color：用于设置边框的颜色。可以使用具体的颜色值，如红色、蓝色等，也可以使用 RGB、HEX 或 HSL 值。

3.2 border-width：用于设置边框的粗细或宽度。可以使用像素（px）、百分比（%）或其他长度单位来指定边框的宽度。

3.3 border-style：用于设置边框的样式，常见的样式包括：

• solid：实线边框。
• dashed：虚线边框。
• dotted：点线边框。

  border: 2px solid red;

  这会将边框宽度设置为 2 像素，样式设置为实线，颜色设置为红色。

4、合并表格的相邻边框 

使用 border-collapse: collapse

• 用于合并表格的相邻边框，使其看起来像是单个边框。
• 这个属性只适用于表格元素，例如 <table>，<tbody>，<thead>，<tfoot>，<tr>，<td>，<th>。

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black; /* 指定边框样式 */
  padding: 8px; /* 添加内边距 */
}

 5、边框影响盒子实际大小

5.1 边框宽度的影响：

• 在盒子模型中，边框会增加元素的实际大小，这意味着边框的宽度会增加元素的宽度和高度。

5.2 box-sizing 属性：

• box-sizing 属性用于指定元素的盒子模型，可以是 content-box（默认值）或者 border-box。
• 当设置为 border-box 时，元素的宽度和高度包括内容、内边距和边框，而不是仅包括内容部分。

div {
  width: 200px;
  height: 100px;
  border: 2px solid black; /* 设置边框 */
  box-sizing: border-box; /* 使用 border-box 盒子模型 */
}

 在这个示例中，即使设置了固定的宽度和高度，边框的存在也会影响盒子的实际大小。使用 box-sizing: border-box; 可以确保边框被包含在指定的宽度和高度内。

6、内边距padding

padding 是 CSS 盒模型中的一个属性，用于指定元素的内边距，即元素内容与边框之间的空间。padding 属性可以分为四个独立的值：

1. padding-top：指定元素的顶部内边距大小。
2. padding-right：指定元素的右侧内边距大小。
3. padding-bottom：指定元素的底部内边距大小。
4. padding-left：指定元素的左侧内边距大小。

这些属性可以单独指定，也可以同时指定一个、两个或三个值来设置不同方向上的内边距大小。

/* 分别指定四个方向的内边距 */
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

/* 同时指定水平和垂直方向的内边距 */
div {
  padding: 10px 20px; /* 上下 10px，左右 20px */
}

/* 同时指定四个方向的内边距 */
div {
  padding: 10px 20px 30px 40px; /* 顺时针方向分别为 上、右、下、左 */
}

 复合写法

• padding: 10px;：表示上下左右的内边距都为 10 像素。
• padding: 10px 20px;：表示上下的内边距为 10 像素，左右的内边距为 20 像素。
• padding: 10px 20px 30px;：表示上部内边距为 10 像素，左右内边距为 20 像素，下部内边距为 30 像素。
• padding: 10px 20px 30px 40px;：表示顺时针方向，上部内边距为 10 像素，右部内边距为 20 像素，下部内边距为 30 像素，左部内边距为 40 像素。

这些写法能够方便地控制元素的内边距，使得样式表更加简洁和易于理解。

padding会影响盒子实际大小

当给一个块级盒子添加 padding 时，通常会影响盒子的实际大小，因为 padding 会增加盒子内容区域的尺寸。但是，如果一个块级盒子没有明确设置 width 或 height 属性，那么添加 padding 不会改变盒子的大小。

这是因为在 CSS 中，盒子的宽度和高度是指内容区域的尺寸，而不包括 padding、border 和 margin。所以，当没有明确指定宽度或高度时，盒子的大小会根据内容自动调整，而 padding 不会影响这个自动调整的过程。

 7、 外边距margin

外边距（Margin）是盒子模型的一个组成部分，用于控制元素与其他元素之间的空间。它可以在上、下、左、右四个方向上设置不同的值，从而调整元素在页面布局中的位置和间距。

外边距属性可以分别设置，也可以合并在一起设置，其常用属性包括：

• margin-top：上外边距。
• margin-right：右外边距。
• margin-bottom：下外边距。
• margin-left：左外边距。

外边距的值可以使用像素（px）、百分比（%）、em 等单位来指定。

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

或者合并设置

margin: 10px 20px; /* 上下外边距为 10px，左右外边距为 20px */

8、块级盒子水平居中对齐

要将块级盒子水平居中对齐，通常需要满足两个条件：

1. 盒子必须有指定的宽度。
2. 盒子的水平外边距设置为 auto。

<template>
 <div class="container">
    <div class="box">
     居中对齐
    </div>
</div>
</template>

<script setup>

const getlist = () => {

}
getlist();
</script>

<style>
.container {
    width: 100%; /* 设置容器宽度 */
    text-align: center; /* 水平居中对齐容器内的内容 */
}

.box {
    width: 200px; /* 设置盒子的宽度 */
    margin: 0 auto; /* 设置左右外边距为 auto，使其水平居中对齐 */
    background-color: lightblue; /* 设置背景颜色 */
    padding: 20px; /* 设置内边距 */
}
</style>

 .container 类用于包裹 .box，并且设置了 text-align: center; 以实现容器内内容的水平居中对齐。然后，.box 类定义了盒子的样式，其中 width 属性指定了盒子的宽度，而 margin: 0 auto; 则使其水平居中对齐。

9、行内元素和行内块元素水平居中 

text-align: center; 属性通常用于将行内元素和行内块元素水平居中对齐。当你将这个属性应用于父级元素时，所有内联元素（包括行内元素和行内块元素）都会相对于父级元素进行水平居中对齐。

<template>
<div class="parent-container">
    <span class="child-element">我当时肌肤补水的基本</span>
    <span class="child-element">啊是非成败哈韩的发表v</span>
    <span class="child-element">分任务给彼此下</span>
    <div class="child-element block-element">发热无花果v承认他</div>
</div>
</template>

<script setup>

const getlist = () => {

}
getlist();
</script>

<style>
.parent-container {
    text-align: center; /* 将文本水平居中对齐，影响内部的行内元素和行内块元素 */
}

.child-element {
    display: inline; /* 将元素设置为行内元素 */
    margin: 10px; /* 设置间距 */
    padding: 10px; /* 设置内边距 */
    border: 1px solid #ccc; /* 设置边框 */
}

.block-element {
    display: inline-block; /* 将元素设置为行内块元素 */
}
</style>

.parent-container 类是父级容器，内部包含多个行内元素和一个行内块元素。通过将 text-align: center; 应用于 .parent-container，所有内联元素都会相对于该容器水平居中对齐。

10、兄弟关系的块元素垂直外边距合并 

在 CSS 中，兄弟元素之间的垂直外边距有可能会合并，这是一种常见的现象。当相邻的两个块级元素上下都设置了外边距时，它们的外边距会合并成一个外边距，取其中较大的那个值，而不是简单地将它们的外边距相加。

11、父子关系的块元素垂直合并（塌陷）

11.1 给父元素添加一个上边框： 通过给父元素添加一个上边框，可以防止其与子元素的外边距合并。

.parent {
    border-top: 1px solid transparent; /* 透明的上边框 */
}

11.2 给父元素添加上内边距： 通过给父元素添加上内边距，同样可以防止外边距合并。

.parent {
    padding-top: 1px;
}

11.3 使用 overflow 属性： 设置父元素的 overflow 属性为 hidden 也可以避免外边距合并。 

.parent {
    overflow: hidden;
}

12、 清除元素内外边距

/* 清除所有元素的内外边距 */
* {
    margin: 0;
    padding: 0;
}

/* 为行内元素设置左右内外边距 */
.inline-element {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

这段代码会清除所有元素的内外边距，并为行内元素设置了左右内外边距，以照顾兼容性。这样可以确保页面的外观在不同浏览器中更一致。

13、默认自带内外边距的元素

13.1 段落 <p>

• 默认外边距：上下外边距
• 默认内边距：浏览器特定，通常是一些小的值

13.2 标题 <h1> - <h6>

• 标题元素可能具有不同级别的默认内外边距，取决于浏览器的默认样式表

13.3 列表 <ul>、<ol> 和 <li> 

• 列表项之间可能有一些默认的外边距
• 列表项内部可能会有一些默认的内边距

13.4  <div> 元素

• 通常没有默认的外边距或内边距，但取决于浏览器的默认样式表

13.5 <body> 元素 

• 可能会有一些默认的外边距
• 内边距通常是零

13.6 <form> 元素

• 可能会有一些默认的外边距和内边距，取决于浏览器的默认样式表

13.7 <table> 元素

• 可能会有一些默认的内外边距和边框样式

13.8 <fieldset> 元素

• 可能会有一些默认的外边距和内边距，用于包装表单控件集合

13.9 <button> 元素

• 可能会有一些默认的外边距和内边距，取决于浏览器的默认样式表

13.10 <img> 元素

• 可能会有一些默认的外边距，通常很小，以及一些默认的内边距

13.11 <input> 元素

• 不同类型的输入元素可能具有不同的默认外边距和内边距

13.12 其他一些表单元素如 <textarea>、<select> 等

• 可能会有一些默认的外边距和内边距，取决于浏览器的默认样式表

14、去掉列表的默认样式 -- list-style:none 

ul, ol {
    list-style: none;
}

应用于 <ul> 和 <ol> 元素的样式将移除它们的默认样式，不再显示任何项目符号或编号。

 用 list-style: none;去除去除默认样式后的列表

<template>
<div >
  <ul style="list-style: none;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol style="list-style: none;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
</div>
</template>

 15、圆角边框border-radius

需要在一个元素上设置圆角边框时，可以使用 CSS 的 border-radius 属性。这个属性允许你定义边框的圆角形状，可以用来创建圆角矩形、椭圆形或者圆形边框。

<template>
<div >
    <div class="rounded-rectangle"></div>
<div class="ellipse"></div>
<div class="circle"></div>
</div>
</template>



<style>
/* 圆角矩形 */
.rounded-rectangle {
    width: 200px;
    height: 100px;
    border: 2px solid black;
    border-radius: 10px; /* 所有角都是 10px 的圆角 */
}

/* 椭圆形 */
.ellipse {
    width: 200px;
    height: 100px;
    border: 2px solid red;
    border-radius: 100px / 50px; /* 水平半径为 100px，垂直半径为 50px */
}

/* 圆形 */
.circle {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    border-radius: 50%; /* 边框半径为宽度的一半，创建一个圆形 */
}
</style>

16、盒子阴影  box-shadow

可以添加一个或多个阴影效果到一个元素上

<template>
<div >
  <div class="box"></div>
</div>
</template>



<style>
   .box {
        width: 200px;
        height: 200px;
        background-color: #fff;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    }
</style>

17、文字阴影text-shadow 

这个属性是在文本周围创建阴影效果

.text-with-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

text-shadow 属性接受四个参数：

1. 水平偏移量（horizontal offset）：表示阴影相对于文本的水平位置。正值向右偏移，负值向左偏移。
2. 垂直偏移量（vertical offset）：表示阴影相对于文本的垂直位置。正值向下偏移，负值向上偏移。
3. 模糊半径（blur radius）：表示阴影的模糊程度。值越大，阴影越模糊。
4. 颜色（color）：表示阴影的颜色。可以使用颜色名称、十六进制值或者 RGBA 值。

在上面案例中，阴影水平和垂直偏移量都是 2px，模糊半径是 4px，阴影颜色是半透明的黑色。