第3章流、元素、基本尺寸

最新推荐文章于 2024-10-19 16:56:22 发布

a94940b

最新推荐文章于 2024-10-19 16:56:22 发布

阅读量173

点赞数 1

分类专栏： CSS世界阅读笔记

1 篇文章 0 订阅

订阅专栏

.clearfix {
    display: block; //也可以是table
    content: "";
    clear: both;
}

问题：为什么list-item元素会出现项目符号
解释：因为生成了一个附加的盒子，学名叫“标记盒子（marker box）”，专门用来放置原点、数字这些项目符号。
问题：display: inline-block为何能够既能和图文在一行显示，又能设置width/height？
解释：因为有两个盒子，外在盒子和内在盒子（内在盒子又叫容器盒子）。外在盒子负责元素是可以一行显示，还是要换行显示。而容器盒子负责宽高，内容呈现之类的事情。display: inline-block外面一层是内联盒子，里面一层是块级盒子，所以它既能行内，又能设宽高。

width和height作用在内在盒子（学名“容器盒子”）上，内在盒子又分成4个盒子，分别是content-box, padding-box, border-box, margin-box。<div>默认的是content-box
width：auto 的4种宽度表现(width：auto是宽度的默认设置)
- 充分利用可用空间( fill-avalible )： <div> <li> <p>等标签宽度默认为父容器的100%
- 收缩与包裹(shrink-to-fit)：浮动、绝对定位、inline-block元素、table元素
- 收缩到最小 (min-content)
- 超出容器限制 (max-content)：如果不是有明确的width相关设置，上面3中情况尺寸都不会主动超出父容器的宽度，但是有特殊情况： 1. 内容很长的连续英文和数字; 2. 内联元素被设置white-space: nowrap。
关键概念：
- 外部尺寸（Extrinsic sizing）: 元素的尺寸由外部容器决定；
- 内部尺寸（intrinsic sizing）：元素的尺寸由内部元素决定；

上面说的4种width: auto的尺寸表现中，只有第一种是外部尺寸，其余都是内部尺寸，而这唯一的外部尺寸，就是“流”的精髓

嵌套一层标签，父元素定宽，子元素因为width使用默认值auto，所以会自动填满容器。这样做实现了width、padding、border混用的时候，我们不需要任何计算，content-box会自动填满父元素宽度减去padding和border后的宽度。

.father {
    width: 102px;
}
.son {
    border: 1px solid red;
    padding: 20px;
}

box-sizing: border-box 实现了padding、border和content-box共同分配width值。
猜想这个属性的设计初衷是用来解决 “替换元素” 宽度自适应问题。
在做reset.css文件进行样式重置的时候，可以这样：

input, textarea, img, video, object {
    box-sizing: border-box;
}

两种方法：

设定显式高度值，注意这里一定要有html元素，仅仅设置<body>是没有用的，因为此时<body>也没有具体高度值。

html, body {height: 100%};
使用绝对定位。注意：绝对定位元素的宽高百分比计算是相对于 padding box 的，也就是会把padding的大小值计算在内，但是，非绝对定位元素的宽高百分比计算是相对于 content box 的。

<img src="1.jpg" style="width: 480px!important;">
img {
    max-width: 256px;
}

.container {
    min-width: 200px;
    max-width: 180px;
}