这篇博客详细讲解了HTML5和CSS3中的布局概念，包括内边距、边框、轮廓和外边距的各个方面。内容涵盖了宽度和高度、内边距的复值、单边内边距、边框样式、边框颜色、轮廓宽度、轮廓颜色、以及外边距的长度值、百分数值和单边外边距等。博客还探讨了浮动元素、定位、颜色、背景和渐变，以及弹性盒布局的基础知识，如flex-direction、flex-wrap和justify-content等。
《css权威指南》
目录
10.2.4.background-position背景定位
10.2.6.background-repeat背景重复方式(或不重复)
10.2.7.background-attachment背景粘附
10.2.8.background-size控制背景图的尺寸
11.3.2.shape-image-threshold使用透明图像定义形状
12.3.2.min-width和min-height限制宽度和高度
2021.11.24
由于笔记的内容太多了不好查找，于是就换一篇。
9.内边距、边框、轮廓、外边距
9.1基本元素框
文档的每个元素都会生成一个矩形框，我们称之为元素框。这个框体描述元素在文档布局中所占的空间。
默认情况下，渲染出来的文档中，各矩形框的排布方式在视觉上不会出现重叠，尽量留有足够的间隔，能清楚地分清一部分内容属于哪个元素。
9.1.1.width height宽度和高度
默认情况下，元素的宽度指从左内边界到右内边界的距离，元素的高度指从上内边界到下内边界的距离。两个距离的属性分别名为width和height
这两个属性无法应用到行内非置换元素上。比如超链接声明的width和height是会被忽略的。
width
取值 <length> | <percentage> | auto
初始值 auto
适用于 除了行内非置换元素、表格中的行和行组之外的所有元素
height
取值 <length> | <percentage> | auto
初始值 auto
适用于 除了行内非置换元素、表格中的行和行组之外的所有元素
元素的高度都由内容决定，而不受创作人员的控制，正常流动模式下的元素很少直接设定高度。
9.2.padding内边距
紧邻元素内容区的是内边框(padding)，位于内容和边框之间。
padding
取值 [ <length> | <percentage> ]{1,4}
初始值 无
适用于 所有元素
备注 padding不能取负值
padding属性的值可以是任何长度值，从em到英寸都可以。 元素默认没有内边距，拿常见的段落之间的间隔来说，常常只用外边距实现。
9.2.1.复值
有时候提供的值有一些重复，可能只需要两个值就可以表示四个值了。
如果只为padding提供三个值，第四个值（左边）复制第二个值(右边)；
如果提供两个值，第四个值复制第二个，第三个复制第一个；
如果提供一个值，其他三个都复制第一个。
9.2.2.单边内边距
padding-top，padding-right，padding-bottom，padding-left
取值 <length> | <percentage>
初始值 0
适用于 所有元素
同时设定多个单边内边距，如果想要为多个边设定内边距，使用简写的padding更加简单。
9.2.3.内边距的百分数值
元素的内边距可以用百分数值设定。百分数值相对父元素内容区的宽度计算。此外，百分数值也可以与长度值混用。
h2{padding: 0.5em 10%;}9.2.4.行内元素的内边距
如果把内边距应用到行内非置换元素上，情况就有些不同了。
strong{ padding-top:25px;padding-bottom:50px;}应用到行内非置换元素的内边距对行高没有任何影响。因为对于没有背景的内边距是透明的，所以上述声明就没有视觉效果。
但是如果行内非置换元素有背景色和内边距，背景就会向元素上下延伸。
9.2.5.置换元素的内边距
内边距可以应用到置换元素上，可以为图像设定内边距
img {background:silver;padding:1em;}不管置换元素是块级还是行内的，内边距都出现在内容四周，而且背景色会填充到内边距区域，行内置换元素的内边距对行高有很大影响。
9.3.border边框
元素的内边距之外是边框。边框是元素的内容和内边距周围的一到多条线段。
元素的背景眼神到边框的外边界，有些边框是间断的，例如dotted和dashed，所以元素的背景会出现在边框的间隙中。
9.3.1.border-style边框的样式
border-style
取值 [ none | hidden | solid | dotted | dashed | double | groove | ridge | inset | outset] {1,4}
初始值 无
适用于 所有元素
可以有多个样式，单边样式
border-top-style,border-right-style,border-bottom-style,border-left-style
取值 none | hidden | solid | dotted | dashed | double | groove | ridge | inset | outset
初始值 none
适用于 全部元素
9.3.2.border-width边框宽度
设置好边框样式后，可以指定宽度。
border-width
取值 [ thin | medium | thick | <length> ] { 1，4}
初始值 无
适用于 所有元素
border-top-width，border-right-width， border-bottom-width，border-left-width
取值 thin | medium | thick | <length>
初始值 medium
9.3.3.border-color边框颜色
border-color属性可以一次设定四个颜色值
border-color
取值 <color>{1,4}
初始值 简写形式没有
适用于 所有元素
border-top-color，border-right-color，border-bottom-color，border-left-color
取值 <color>
初始值 目标元素的color属性值
适用于 所有元素
透明边框
如果想创建一个有宽度但是不可见的边框，把边框颜色设置为 transparent
9.3.4.简写的边框属性
border-top，border-right，border-bottom，border-left
取值 [ <border-width> || <border-style> || <border-color> ]
初始值 简写属性没有
适用于 所有元素
h1{
border-left:3px solid gray;
}9.3.5.border整个边框
border
取值 [ border-width || <border-style> || <border-color> ]
适用于 所有元素
border属性的缺点，就是定义的样式、宽度和颜色同时应用于四个边
9.3.6.圆角边框
元素边框的角是直的，可以使用border-radius属性定义一个或两个圆角半径。
border-radius
取值 [ <length> | <percentage>] {1,4} [ / [ <length> | <percentage>]{1,4} ]?
初始值 0
适用于 除表格内的元素之外的所有元素
<body>
<div class="none">my body is rounded</div><br/>
</body>
<style>
.none {
border: 1px;
border-color: blueviolet;
border-style: solid;
border-radius: 2em;
text-align: center;
line-height: 50px;
}
</style>
完整的半圆
border-radius: 2ch / 50%;9.3.8.图像边框
加载和裁剪边框图像
为了告诉浏览器图像在何处，要使用border-image-source属性
border-image-source
取值 none | <image>
border:25px solid;
border-image-source:url(circle.png);我们把边框设为25px，指定一个图像，但是为什么图像只出现在四个角，没有沿着各边绘制呢？
border-image-slice放置4条裁剪线
border-image-width调整图像的宽度
9.4.outline轮廓
css定义了一个特殊的装饰方式，名为轮廓（outline），轮廓绘制在边框的外侧，轮廓和边框的区别体现在三个方面
1.轮廓不占空间
2.轮廓可以不是矩形
3.用户代理通常在元素处于:focus状态的时候渲染轮廓
4.轮廓更极端，无法单独为一边设置独特的轮廓
2021.11.25
outline-style
取值 auto | none | solid | dotted | dashed | groove | ridge | inset | outset
初始值 none
适用于 所有元素
与边框最大的两点不同就是，轮廓没有hidden样式，但是多了一个auto
9.4.2.outline-width轮廓宽度
确定轮廓的宽度后，就可以定义轮廓的宽度了
outline-width
取值 <length> | thin | medium | thick
初始值 medium
适用于 所有元素
outline-width不是简写属性，整个轮廓的宽度必须相等，不能为某一边设定不同的宽度
9.4.3.outline-color轮廓颜色
outline-color
取值 <color> | invert
初始值 invert
适用于 所有元素
这个值和border-color一样，只不过没有针对单边的属性
9.4.4.唯一的轮廓简写属性
outline
取值 [ <outline-color> || <outline-style> || <outline-width> ]
初始值 none
适用于 所有元素
9.4.5.轮廓与边框的区别
轮廓对于布局完全没有影响，任何影响都没有。两个轮廓没有影响行的高度，也没有把span元素向哪一边推开。
轮廓不一定是矩形的，也不一定是连续的，所有就没有单边轮廓属性了，因为无法确定哪边是右边。
9.5.margin外边距
margin
取值 [ <length> | <percentage> | auto ]{1，4}
初始值 未定义
适用于 所有元素
margin属性的值可以是任何长度值，如果未声明值，默认没有外边距
9.5.1.外边距的长度值
h2{margin:14px 5em 0.1in 3ex;}9.5.2.外边距的百分数值
元素的外边距可以使用百分数值设定，
margin:10%9.5.3.单边外边距属性
margin-top,margin-right,margin-bottom,margin-left
取值 <length> | <percentage> | auto
初始值 0
适用于 所有元素
9.5.4.外边距折叠
相邻的两个段落，上下外边距会折叠，根据规范，其实是第二个段落的上外边距被重置为零了。
虽然上下外边距设置的是30px，正常下外边距和上外边距加起来60px，但是中间的部分只有30px，所有的空白都由第一个段落的下外边距提供。
9.5.5.负外边距
p.one{ margin:0 -1em; }正负外边距结合起来特别有用，合理设定正负外边距可以让一个段落从父元素中 冲出来。
9.5.6.行内元素的外边距
行内元素设置左右外边距的话，就会在左右两边添加空白。
最低0.47元/天 解锁文章
3203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
