0x00 min-content 宽度自适应
CSS3 新增宽度属性值 width:min-content 可以将容器的宽度值设置为容器内最大的不可断行的宽度(最宽的单词，图片，或者具有固定宽度的盒元素)
figure{
width:min-content;
margin: auto;
}
0x01 根据兄弟元素的数量来设置样式
我们知道伪元素选择器 :only-child,其实，它可以等效于:first-child:last-child，即是第一项的同时也是最后一项，所以从逻辑上来讲它是唯一的。而:last-child 也是:nth-last-child(1)的快捷写法。
那么接下来思考一个问题，li:first-chidl:nth-last-child(4) 代表什么?结果是 _一个正好有四个列表项的列表中的第一项_,ok,再结合兄弟选择符~来命中它之后的每一项，就可以达到这样一个目标在正好包含四个列表项的时候，命中它的每一项
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
background: red;
}
结合 SASS，将其简化复用
/*定义混合器*/
@mixin n-items($n){
&:first-child:nth-last-child(#{$n}),
&:first-child:nth-last-child(#{$n}) ~ &{
@content;
}
}
/*调用*/
li {
@include n-items(4){
/*属性与值写在这里*/
background: red;
}
}
:nth-child()
nth-child()的强大之处在于以接受an+b形式的表达式，那么自然便可以使用其变种 nth-child(n+4) 这种形式，它将会选择除了第1,2,3个子元素之外的所有子元素。
ul li:first-child:nth-last-child(n+4),
ul li:first-child:nth-last-child(n+4) ~ li{
/*当列表中至少包含四项时，命中包括该项之后的所有列表项*/
}
当然，不止于此，:nth-child()的玩法完全取决于你的脑洞。
0x02 calc
有时，若需要去实现一个 背景宽度满屏，内容宽度固定 的布局，也许我们会去这样设计 DOM 结构
<footer> <p class="wrapper"> </p> </footer>
CSS 样式:
footer{
background: #333;
}
.wrapper{
max-width: 900px;
margin: 1em auto;
height: 200px;
}
使用 calc() 方法以后，就不必如此麻烦了，我们只需三行代码即可实现:
footer{
background:#333;
padding:1em calc(50% - 50px);
}
使用了 clac() 便可以在 CSS 中进行简单的算术运行，这使得 DOM 结构变得非常简洁，没有任何的冗余，当然，缺点也是显而易见的，这里的代码只会在 footer 元素的父级超过 900 px 才会看出效果。
calc() 中的百分比是基于其父级进行解析的
但，我们初次了解到了CSS3 中cacl() 这个魔法技巧。
0x03 垂直居中
基于绝对定位的解决方案
CSS 中有一个很常见的现象，真正的解决方法往往来自于我们最意想不到的地方。比如，可以结合 positon:absolute 和 transform:translate() 属性来实现垂直居中
因为 translate() 变形函数中的百分比是根据这个元素自身的宽度和高度为基准进行换算的，如此一来，便可以彻底解除对固定尺寸的依赖。
示例:DOM 结构
<body> <p class="main"> <h1>Am i center?</h1> <p>Center me ,please!</p> </p> </body>
CSS代码:
.main{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
不过，该方法也是存在不足的:
1.在某些浏览器中，可能会导致模糊显示，因为元素有可能被放置在半个像素上。
2.在并不适合使用绝对定位的情况下。而且绝对定位对整个布局的影响也太过强烈。
基于 FlexBox 的解决方案
毫无疑问，这算是目前最佳的解决方案了。并且，现代浏览器对 FlexBox 的支持已经相当高了。
对基于 FlexBox 容器的 items 使用 margin:auto 不仅可以在水平方向方居中，垂直方向上亦是如此，即使不指定任何宽度，因为这个元素分配到的宽度等于 max-content.
FlexBox 的另一个好处是可以文本也进行垂直居中， 只需对使用display:flex 的元素添加 align-items:center 和 justify-content:center。
.main{
background: deeppink;
width: 50%;
height: 50%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
0x04 紧贴底部的页脚
有时，我们期望页头和页脚的高度由其内部因素来决定，而内容区块的高度可以自动收缩并占满所有可用的空间。同样，利用 FlexBox 这很容易。
body {
min-height: 100vh;
display:flex;
flex-flow: column;
header{
/*heaer style*/
}
.main{
flex:1;
}
footer{
/*footer style*/
}
}
我们给了 body 一个 min-height:100vh 的高度这样它至少会占据整个视口的高度，然后赋予 main 一个大于 0 的 flex 值就可以了。
问题:如果页脚是固定在屏幕的底部的呢?如何解决当页面滚动到最后的时候保证页脚不会覆盖内容区？
对于这个问题，纯属个人想法，可以在 footer 之后添加一个 p#_footer。
此时的 DOM 结构如下：
<body> <header><header> <p class="main"></p> <footer></footer> <p id="_footer"></p> </body>
而对于 p#_footer 而言，不需要为其中添加任何的内容和样式，只需要它的高度等于 footer 的高度就可以了，而对于这点，使用 jQuery 就可以轻松搞定。
$('#_footer').height($('footer').height())
如此，对于响应布局也可以不用担心了，虽然有点点hack，但也算完美的解决了，Bingo!
更多CSS结构与布局 相关文章请关注PHP中文网！
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
Dreamweaver Mac版
视觉化网页开发工具
