学习html+css第二周

最新推荐文章于 2026-08-20 10:57:22 发布

原创最新推荐文章于 2026-08-20 10:57:22 发布 · 1.6k 阅读

36 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

一.CSS笔记

1.容器元素

#header

表示页头，或者文章头部。

#footer

表示页脚，或者文章尾部。

#article

表示整篇文章。

#section

表示文章章节。

#aside

表示附加信息（侧边栏）。

#div

（懒得用其他元素就"遇事不决 div！"）🤭

2.盒模型（box）【生成矩形区域】

##盒子类型

（1）行盒：display=inline。（页面不换行）

（2）块盒：display=block。（独占一行）

##盒子组成部分

内容（content）

+填充【内边距】（padding）：按上右下左顺时针顺序设置内边框。

+边框（border）：宽度+样式+颜色

+外边框（margin）：盒子与外界距离。

##盒模型应用

1）.改变宽高范围

（1）width+height精确计算

（2）css3中用box-sizing

2）.背景覆盖范围

*可用background-clip修改

3）.溢出处理

使用overflow

4）.断词规则

（1）word-break，影响文字在什么位置被截断换行

（2）break-all，截断所有，文字处截断

（3）keep-all，保持所有，单词间截断

5）.空白处理

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

3.行盒的盒模型

##显著特点

（1）盒子跟着内容延伸和停止。

（2）行盒不能设置宽高。

***调整行盒应该用字体大小，行高，字体类型间接调整。

（3）内边距（填充区）：水平方向有效，垂直方向只会影响背景，不会占据实际空间。

（4）边框和外边距同内边距。

##块盒和行盒对比：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,span{
            background: lightblue;
            border: 5px solid;
            line-height: 3;
            padding:10px 20px;
            margin:50px ;
            
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum reprehenderit iste voluptates, corporis eveniet ad amet dolorum minima quibusdam minus, rem sit, pariatur aperiam. Ullam ab ex fuga numquam rerum!m
    </p>
    <span>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id deleniti quam sunt vitae consequuntur fuga nesciunt qui omnis, laborum nam voluptatibus, eveniet ratione eos a corporis necessitatibus adipisci veniam exercitationem.
    </span>
</body>
</html>