[CSS]《CSS揭秘》第七章——结构与布局

Andrman 发布于2019-08-30 15:54 / 713人阅读

摘要：精确控制表格列宽请注意，为了确保这个技巧奏效，需要为这些表格元素指定一个宽度哪怕是。同样，为了让发挥作用，我们还需要为那一列指定宽度。

自适应内部元素

figure{
    max-width: 300px;
    max-width: min-content;//这个关键字将解析为这个容器内部最大的不可断行元素的宽度（ 即最宽的单词、 图片或具有固定宽度的盒元素。
    margin: auto;
}
figure > img{
    max-width: inherit;
}

Some text [...]

    
    
        The great Sir Adam Catlace was named after Countess Ada Lovelace,the first programmer.
    

More Text[...]

精确控制表格列宽

table{
    table-layout:fixed;
    width:100%;

请注意， 为了确保这个技巧奏效， 需要为这 些表格元素指定一个宽度（ 哪怕是 100%）。 同样， 为了让 text-overflow: ellipsis 发挥作用，我们还需要为那一列指定宽度。

**:

如果不指定任何宽度，则各列的宽度将是平均分配的；后续的表格行并不会影响列宽；给单元格指定很大的宽度也会直接生效，并不会自动缩小；overflow 和 text-overflow属性都是可以正常生效的；如果overflow 的值是 visible，则单元格的内容有可能会溢出.

根据兄弟元素数量来设置样式 只有一个元素时

li:only-child{
    /* ...*/
}

或者

li:first-child:nth-last-child(1){ //括号中的1为参数
    /* */
 }

多于一个元素时

li:first-child:nth-last-child(4) //选中的是恰好有四个元素的第一个

li:first-child:nth-last-child(4) ~ li //可以用兄弟选择符选中恰好有四个元素时的全部四个

根据兄弟元素的数量范围时来匹配元素

li:nth-child(n+4) //选中从第4个开始的所有元素

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4)~li {
    /* ...*/
}//选中元素总数是4或更多时的所有元素

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4)~li{
    /* ..*/
}//仅元素少于等于4时选中所有元素

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li{
    /* ...*/
}//元素数量处于2-6时选中所有元素

满幅的背景，定宽的内容

.hello {
    max-width: 900px;
    padding: 1em calc(50% - 450px);//取代内层元素的margin: auto;
    background: #333;
}


    
        66

垂直居中


    Am I centered yet?
    Center me, please!

基于绝对定位的解决方案（要求元素具有固定的宽度和高度）

main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3em; /* 6/2 = 3 */
    margin-left: -9em; /* 18/2 = 9 */
    width: 18em;
    height: 6em;
}

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);//transform是根据自身尺寸为基准进行换算和移动的
}

基于视口单位的解决方案

main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

基于Flexbox的解决方案

详情看：关于Flexbox

紧贴底部的页脚

可参考：关于Flexbox

云服务器 GPU云服务器 css布局 css布局教程学习css布局 css与html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116940.html

css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
css揭秘笔记——结构与布局

摘要：回退方案根据兄弟元素的数量来设置样式知识点伪类选择器只有一个列表项等效于一个正好有四个列表项的列表中的第一个列表项它之后的所有兄弟元素因此，有且只有四个列表项的情况就可以表示为如果列表项不是四个，则没有被选中。自适应内部元素我们希望 width 可以像 height 一样，可以自动适应内容的宽度。假如有如下结构： Lorem ipsum dolor ... L...

张宪坤 2019-08-29 13:50 评论0 收藏0
css揭秘系列

摘要：基于的解决方案借助规范所引入的和属性，我们可以让它内部的文本也实现居中根据盒对齐模型第三版的计划，在未来，对于简单的垂直居中需求，我们完全不需要动用特殊的布局模式了。因为只需要下面这行代码就可以搞定 7.结构和布局自适应内部元素: min-content（容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素） The great Sir Adam ...

BicycleWarrior 2019-08-29 13:55 评论0 收藏0
css编码技巧【css揭秘读书笔记】

摘要：最近在看揭秘，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。举例说明以上的代码有什么问题呢如果需要改变字号，那么同时需要调整行高。那么经过修改后的代码如下关于使用还是还是百分比，需要根据具体情况来决定。最近在看《css揭秘》，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。 css编码技巧尽量减少代码重复在实践中，代码可维护性的最大要...

Miyang 2019-08-30 12:59 评论0 收藏0
CSS揭秘之《小技巧》

摘要：因为在所有的情况下，响应式都不是唯一需要考虑的问题合理使用简写工作组可能会在未来引入更多的展开式属性合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。试试用预处理器能否做到 1、在增强网页设计效果时，应该使用生成性内容，而不是依赖冗余的标签和图片。2、要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用 inherit 的特性即可3、利用 CSS...

lordharrd 2019-08-20 19:08 评论0 收藏0