CSS高级操作

最新推荐文章于 2025-04-11 20:22:49 发布

原创最新推荐文章于 2025-04-11 20:22:49 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #CSS高级操作

本文围绕CSS展开，介绍了盒子模型的概念，包括内容、内边距、边框和外边距，以及其使用方法，如边框、内边距、外边距和盒子尺寸的设置。还讲解了浮动布局、解决浮动引起的父级边框塌陷问题，以及定位的几种方式，如相对定位、绝对定位和固定定位。

1. 理解盒子模型-布局

盒子模型，抽象与现实生活中的盒子，将网页中的所有元素看做是一个个的盒子，那么在调整网页中的元素布局时，就可通过调整盒子信息来进行。
盒子模型的组成：盒子内容 + 盒子的内边距（盒子内容到边框的填充）+ 盒子边框 + 盒子外边距
在这里插入图片描述

2. 掌握盒子模型的使用

2.1 边框

border-style 边框样式

/*border-style: solid; 实线*/
/*border-style: dotted;	点虚线*/
/*border-style: dashed; 线段虚线*/
/*border-style: double; 双层实线*/

border-color 边框颜色

border-color

border-width 边框粗细

border-width: ;

上方的样式可以设置多个值表示不同方向

/* 所有的 */
/*border-color: red;*/
/* 上下  左右 */
/*border-color: red green;*/
/* 上 左右 下 */
border-color: red green yellow;
/* 顺时针：上右下左 */
/*border-color: red  green  black  pink;*/

2.2 内边距

padding(填充)：它可以调整边框到元素内容的距离。

padding-top
padding-right
padding-bottom
padding-left
padding：它可以统一设置不同方向的距离

2.3 外边距

margin：设置元素的外边距，也就是和其他元素之间的距离

margin-top
margin-ritght
margin-bottom
margin-left
margin

2.4 盒子尺寸

box-sizing：设置盒子模型尺寸计算规则的。

content-box(默认值)：计算盒子尺寸时，只计算盒子元素内容，不包括内边距和边框。
border-box：计算盒子尺寸时，不止计算盒子元素内容，还包括内边距和边框。(大小一共就那么大，所以到时候会调整元素内容的空间)

2.5 标准文档流调整display

默认情况下，在标准文档流中，元素是分为两大类的。

块元素：独占一行，拥有完整的盒子模型设置
行内/内联元素：如果有多个内联，会排在一行，且盒子模型不完整。它的大小主要由内容撑开。

实际上之所以出现这种效果，就是因为dispaly属性，块元素默认为block，而内联元素默认为inline。

如果想将块元素和内联元素进行转换，可以通过此属性。
display：

none 隐藏
block 块元素的默认值
inline 内联元素的默认值
inline-block 行内块元素 (但是有不可控的间隙)

3. 浮动

float：能够实现块元素在一行并列布局展示。

none 默认值
left 左浮动
right 右浮动

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            border-style: double;
            width: 300px;
            height: 300px;
            float: right;
        }
    </style>
</head>
    <div class="test"></div>
</body>

在这里插入图片描述

4. 解决浮动引起的父级边框塌陷的问题

当浮动出现后，会导致：

兄弟元素受到浮动影响，导致显示错乱
- 可以通过clear清除浮动，解除浮动影响。
如果都浮动了，父级元素会产生边框塌陷
- 利用添加空子元素解决
  
  在父级元素最后添加一个子元素，然后将其清除两侧浮动。
- 和上方一致的思路(推荐)：因为上方还需要添加一个空子元素麻烦

/* 表示在元素最后面设置信息 */
.father:after{
    /* 给标签添加内容 */
    content: "";
    display: block;
    clear: both;
}

设置父级高度(变通玩法下三滥玩法)(不推荐)
利用overflow(溢出)特性

当overflow设置的标签没有设置高度时，会自动跟随溢出元素进行高度适应。

5. 定位

position：定位

static 默认的
relative 相对的

设置它，会保留原有的位置，然后通过方向调整可以定位位置，但是它的定位偏移是相对于原来的位置
absolute 绝对的

设置它之后，原有位置会消除，但是它默认会保留在原有位置上方，它后面的元素会向上偏移。

使用方向调整，默认情况下会相对于浏览器边框进行偏移，

当然如果它的某一级父元素设置过定位，则会相对于父级元素偏移。

往往它会结合着relative使用
fixed 固定的

跟着屏幕的滚动一起滚动