溢出（Overflow）?auto：如果内容过多，超出框大小的内容将被隐藏，并显示滚动条，以便用户滚动查看所有内容。?hidden：如果内容过多，超出框大小的内容将被隐藏。?visible：如果内容太多，超出框大小的内容显示在框外（这通常是默认行为）。背景剪辑边框框默认。背景在边框框内绘制（夹入边框框）。padding-box背景绘制在填充框内（夹入填充框）。content-box背景绘制在内容框内（剪辑到内容框内）。设置宽度和高度约束如果你想以百分比的形式设置一个布局的外层容器的宽度，使布局的宽度变得灵活，但又不希望它变得太宽或太窄，给布局一个最大和最小宽度约束是width:70%;最大宽度：1280px；最小宽度：480px；应用此代码的容器可以在其父容器中居中：margin:0auto;当父容器在最小和最大宽度限制范围内时，它会填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽度并开始在可用空间内居中。当宽度低于480px时，视口将小于容器，您必须滚动才能看到全部内容。控制图像大小图像会导致问题-起初它显示良好，但当容器变得比图像窄时，图像开始溢出容器（因为它是固定宽度）。为了处理此类图像的问题，我们可以在其上设置以下声明：display:block;保证金：0自动；最大宽度：100%；完全改变盒子模型box-sizing:border-box;宽度和高度等于通过CSS设置内容的宽度和高度。填充和边框不会添加到总宽度和高度；相反，它们会占用内容中的一些空间，从而使内容变小。常见的显示类型?块框定义为堆叠在其他框的上方（即框前后的内容出现在不同的行上），您可以为其设置高度和宽度。上面描述的整个盒模型适用于块盒。?行内框与块框相反：它遵循文档的文本流（也就是说，它与周围的文本和其他行内元素出现在同一行，其内容跟随段落中的文本行。换行符与文本流）。宽度和高度设置对行内框没有影响；行内框上的所有填充、边距和边框设置都会更改周围文本的位置，但不会影响周围块框的位置。?inline-blockbox介于两者之间：它跟随周围的文本流，就像一个inlinebox，并且不会在它之前或之后创建换行符；但是，它可以像块框一样使用，使用宽度和高度设置大小，并保持其块完整性——它不会跨段落行换行（不适合一行文本的行内框落在第二行，因为第一行没有足够的空间，并且不会换行）。默认情况下，块级元素设置为显示：块；,并且内联元素设置为display:inline;默认情况下。display:table—允许您将非表格元素视为表格布局，而不是滥用HTML的
标签来实现相同的目的。display:flex—允许您处理一些长期困扰CSS的传统布局问题，例如布置一系列灵活的等宽容器或垂直居中内容。display:grid—提供了一种简单的方法来实现传统上依赖于一些棘手的CSS网格框架背景颜色的CSS网格系统background-color大多数元素的默认背景颜色不是白色（白色，这可能如您所料）但透明（transparent）的背景位置：background-position这个空格指定了图像的水平（x）和垂直（y）坐标。图像的左上角是原点（0,0）。这个属性可以接受很多不同的值类型：绝对值比如px——比如background-position:200px25px相对值比如rems——比如background-position:20rem2.5rem百分比——比如background-position:90%25%。关键字——例如背景位置：右中心。这两个值比较直观，可以分别取left、center、right和top、center、bottom等值。如果只指定一个值，那么该值将被假定为水平值，垂直值将默认为中心背景图像：Gradient线性渐变通过linear-gradient()函数传入，它是一个值背景图像属性。该函数至少需要三个参数，用逗号隔开——背景渐变的方向【可以用关键字指定方向（tobottom、toright、tobottomright等），或者角度值（0deg为相当于顶部，90deg相当于右侧，直到360deg，这又相当于顶部）。]、开始颜色和结束颜色。div{background-image:linear-gradient(tobottom,orange,yellow);}background-attachmentbackground-attachmentscroll:这会将背景修改为页面视图，因此当页面滚动时它会滚动。请注意，我们谈论的是视图，而不是元素——如果您滚动实际的背景设置元素，而不是页面，背景将不会滚动。fixed：将背景固定在页面的位置，所以当页面滚动时，它不会滚动，无论你滚动页面还是设置背景的元素，它都会停留在同一个位置。local：此值是后来添加的（它仅在InternetExplorer9+中受支持，其他在IE4+中受支持）因为滚动值相当混乱，并且在许多情况下并不能真正按照您的意愿行事。本地值将背景设置为其所在元素的背景，因此当元素滚动时，背景也随之滚动。多背景div{background:url(image.png)no-repeat99%center,url(background-tile.png),linear-gradient(tobottom,yellow,#dddd0050%,orange);background-color:yellow;}可以在常用写法的background-*属性中放入多个值，如：background-image:url(image.png),url(background-tile.png);background-repeat：不重复，重复；border当没有明确设置值时，边框将默认为文本的颜色，宽度为3px。Borderradiusborder-radius如果你需要兼容旧浏览器——border-radius只支持InternetExplorer9及以上版本。可以创建椭圆角（x半径与y半径不同）。两个不同的半径由正斜杠(/)分隔border-radius:10px/20px;边框半径：10px30px/20px40px；box-shadowtext-shadow属性，允许将一个或多个阴影应用于元素的文本。对于盒子，有一个等效的属性——盒子阴影，它允许一个或多个阴影应用于实际的元素盒子。box-shadow属性值中有4项仅在IE9+（IE9及更新版本）中可用：1.第一项长度值为水平偏移（horizo??ntaloffset）——即向右的距离，阴影为从框中的原始偏移量移动（如果值为负，则向左移动）。2.第二个长度值是垂直偏移——阴影从原始框向下偏移的距离（如果值为负，则向上偏移）。3.第三个长度的值是模糊半径（blurradius）——应用于阴影的模糊量。4.颜色值是阴影的底色。与text-shadow不同，box-shadow有一个可用的inset关键字-将它放在阴影声明的开头使其成为内部阴影而不是外部阴影。背景图像：线性渐变（到右下角，#777，#ddd）；过滤器可以应用于任何元素、块或内联——你只需使用过滤器属性，并给他一个特定过滤器函数的值。它们作用于盒子内内容的确切形状，而不仅仅是盒子本身作为一个大块。Multi-columnfloatinglayoutTwo-columnlayoutbody{width:90%;最大宽度：900px；边距：0auto;}div:nth-of-type(1){width:48%;}div:nth-of-type(2){width:48%;}div:nth-of-type(1){宽度：48%；float:left;}div:nth-of-type(2){width:48%;float:right;}Clearfloatingfooter{clear:both;}clear可以取三个值：1.left：停止任何活动的左浮动2.right：停止任何活动的右浮动3.both：停止任何activeleftandrightfloatingpositioningstaticpositioningstaticpositioning由每个元素获取默认值-它只是表示“将元素放在文档布局流中的正常位置（忽略top,bottom,left,right或z-index声明）”元素出现在正常流中相对定位相对定位是我们要看的第一个位置类型。它非常类似于静态定位，占用正常的文档流，除了你仍然可以修改它的最终位置，包括让它与其他元素重叠页面上的元素。需要使用top,bottom,left和right属性来修改元素的位置。undefined
