css几个概念-外链论坛 - Powered by Discuz! Archiver

5ep9lzv 发表于 2024-6-30 11:10:32

css几个概念

本文将讲述 CSS 中最核心的几个概念，包含：盒模型、position、float等。这些是 CSS 的基本，亦是最常用的几个属性，它们之间看似独立却又相辅相成。为了把握它们，有必要写出来探讨一下，如有错误欢迎指正。
元素类型
HTML 的元素能够分为两种：块级元素（block level element）内联元素（inline element 有的人亦叫它行内元素）两者的区别在于以下三点：块级元素会独霸一行（即没法与其他元素表示在同一行内，除非你显式修改元素的 display 属性），而内联元素则都会在一行内表示。块级元素能够设置 width、height 属性，而内联元素设置没效。块级元素的 width 默认为 100%，而内联元素则是按照其自己的内容或子元素来决定其宽度。最平常块级元素应该是 <div> 吧，内联元素有 <a> <img> 等等，完整的元素列表能够谷歌一下。
详细来讲一下吧,
.example {
 width: 100px;
 height: 100px;}咱们为 <div> 设置上面的样式，是有效果的，由于其是块级元素，而对 设置上面的样式是没用的。想要让 亦能够改变宽高，能够经过设置 display: block; 来达到效果。当 display 的值设为 block 时，元素将以块级形式呈现；当 display 值设为 inline 时，元素将以内联形式呈现。
若既想让元素在行内表示，又能设置宽高，能够设置：display: inline-block;inline-block 在我看来便是让元素对外呈内联元素，能够和其他元素共处与一行内；对内则让元素呈块级元素，可改变其宽高。
HTML 代码是次序执行的，一份没任何 CSS 样式的 HTML 代码最后呈现出的页面是按照元素显现的次序和类型摆列的。块级元素就从上到下摆列，遇到内联元素则从左到右摆列。这种没样式的状况下，元素的分布叫普通流，元素显现的位置应该叫正常位置（这是我瞎起的），同期所有元素会在页面上占据一个空间，空间体积由其盒模型决定。
盒模型
页面上表示的每一个元素（包括内联元素）都能够看作一个盒子，即盒模型( box model )。请看 Chrome DevTools 里的截图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-8eae2ad0e4d493733ee007df88c3fc3f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
能够显而易见的看出盒模型由 4 部分构成。从内到外分别是：content -> padding -> border -> margin按理来讲一个元素的宽度（高度以此类推）应该这般计算：总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right然则区别浏览器（你无猜错，便是那个与众区别的浏览器）对宽度的诠释不同样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度，其余都要额外算。于是你规定一个元素：
.example {
 width: 200px;
 padding: 10px;
 border: 5px solid #000;
 margin: 20px;}则他最后的宽度应为：宽度 = width(200px) + padding(10p

1fy07h 发表于 2024-10-11 08:21:45

哈哈、笑死我了、太搞笑了吧等。

4lqedz 发表于 2024-10-31 00:40:52

这夸赞甜到心里，让我感觉温暖无比。

j8typz 发表于 2024-11-14 12:05:11

楼主的文章深得我心，表示由衷的感谢！

wrjc1hod 发表于 5 天前

“板凳”（第三个回帖的人）‌

页: [1]

外链论坛's Archiver

css几个概念