前端学习——第五天&第六天

最新推荐文章于 2024-08-01 17:36:19 发布

原创最新推荐文章于 2024-08-01 17:36:19 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解CSS盒模型的基础概念及高级应用，包括盒模型的基本属性、浮动原理与清除方法、盒模型的完全改变技巧等内容。文章还介绍了如何利用不同的显示类型实现页面布局，帮助读者掌握盒模型在实际网页设计中的灵活运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、盒模型

1、通常情况（默认）

padding——内边距

border——边框

margin——外边距：注意，存在外边距塌陷，即当两个盒子挨在一起时，二者之间的举例为两个挨着的外边距中最大的那个值，而不是两者的和。

2、高级的框操作

（1）溢流

属性：overflow

对应的值有：

auto：当内容过多，溢流的内容被隐藏，接着出此案滚动条来让我们滚动查看所有的内容。
hidden：当内容过多，溢流的内容被隐藏。
visible：当内容过多，溢流的内容被显示在盒子的外边（默认）

（2）背景剪裁

属性：background-clip

对应的值：

border-box
padding-box
content-box

（3）CSS框类型

属性：display

对应的值：

block：定义在其它框上的框，其内容会独占一行，可设置其宽高。
inline：会和周围的文字和其它行内元素出现在同一行，对行内盒设置宽高无效。
inline-block：不会另起一行，但能设置宽高，且保持了快的完整性，不会再段落行中断。

3、盒的高级属性

（1）设置宽和高的约束

min-width
max-width
min-height
max-height

二、完全改变盒模型

1、

2、属性、值： box-sizing:border-box;

三、盒子显示类型

1、属性：display

对应的属性值：

常见的: block 、 inline 、 inline-block
table
flex
grid

四、浮动

1、属性:float

img{
   float: left;
   margin-right: 30px;
}

2、三列浮动

div:nth-of-type(1){
  width: 36%;
  float: left;
}

div:nth-of-type(2){
   width: 30%;
   float: left;
   margin-left: 4%;
}

div:nth-of-type(3){
   width:26%;
   float: right;
}

3、清除浮动

作用场景：所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果没有处理这些元素，就会变得很糟糕。

属性: clear

对应的属性值：

left
right
both 停止任何活动的左右浮动

4、浮动问题

（1）整个宽度可能难以计算

——当在框里加上诸如：padding的内边距时，原来的布局将被破环，因为普通盒模型的总体宽度增大了。原来的一行。可能容不下原来的三列元素。

解决方法：

加上：

*{
  box-sizing: border-box;
}

（2）页脚压在最长列上。

解决方法：

首先：在footer前新加div

<div class="clearfix"></div>

<footer>
  <p>.....</p>
</footer>

其次，在CSS中，加上：

footer{
  margin-top: 4%;
}

.clearfix{
  clear: both;
}

.column, footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

*{
  box-sizing: border-box;
}

（3）让列等长

解决方法：