CSS3新特性应用之结构与布局

一、自适应内部元素

利用width的新特性min-content实现
- width新特性值介绍：
  - fill-available，自动填充盒子模型中剩余的宽度，包含margin、padding、border尺寸，他让非block元素也可实现宽度100%;
  - max-content：假设容器有足够的宽度，足够的空间，此时，所占据的宽度就是max-content，与display为inline不一样，max-content就像white-space：nowrap一样，不会换行的。
  - min-content：采用内部元素最小宽度值最大元素的宽度作为最终容器的宽度，最小宽度：替换元素，如：图片的最小宽度就是图片呈现的宽度，文本元素，如果全是中文就是一个中文的宽度，如果包含英文，默认为英文单词不换行的宽度。
  - fit-content：实现浮动元素的水平居中，因默认情况下浮动的元素元素是不能通过margin:auto实现水平居中的，这时就需要fit-content辅助实现。
min-content与max-content示例代码：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .figure01{

            width: min-content;

            margin: auto;

        }

        .figure01 img{

            width: 210px;

        }

        .figure02{

            width: max-content;

            margin: auto;

        }

        .figure02 img{

            width: 210px;

        }

    </style>

</head>

<body>

    <figure class="figure01" >

        <img src="../img/cat.png" alt="">

        <p>标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。</p>

    </figure>

    <figure class="figure02" >

        <img src="../img/cat.png" alt="">

        <p>标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。</p>

    </figure>

</body>

fit-content示例代码：

<head>

    <meta charset="UTF-8">

    <title>float的fit-conent的实用</title>

    <style>

        .wrap{

        }

        .wrap ul{

            margin: auto;

            list-style: none;

            width: fit-content;

        }

        .wrap ul li{

            float: left;

            margin: 0px 10px;

            background: greenyellow;

            padding: 4px;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <ul>

            <li>one</li>

            <li>two</li>

            <li>thr</li>

            <li>fou</li>

        </ul>

    </div>

</body>

二、精确控制表格的列宽

利用table的table-layout属性设置为fixed值来实现，但需要width设置为100%
代码如下

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .divWrap{

            width: 400px;

            border: 1px solid red;

        }

        .wrap{

            table-layout: fixed;

            width: 100%;

        }

        .wrap td.one{

            width: 20%;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

        }

        .wrap td.two{

            width: 80%;

        }

    </style>

</head>

<body>

    <div class='divWrap' >

        <table class="wrap" >

            <tr>

                <td class='one' >one</td>

                <td class='two' >這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句其實是假文的基礎。為了讓假句在視覺質地上接近真句，我準備了一個由 128 個真句組成的語料庫。每次要產生假句時就從中隨機挑選一個，然後逐字替換為隨機選出的筆畫數相同、但一般人不可能認得的低頻字。因為一般人不可能認得，實際上也算是假字了這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句</td>

            </tr>

            <tr>

                <td class='one' >這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句</td>

                <td class='two' >

                    <img src="../img/cat.png" alt="">

                </td>

            </tr>

        </table>

    </div>

</body>

三、根据兄弟元素的数量来设置样式

nth-last-child和only-child、nth-child的应用
- only-child：选择只有一个子元素的元素
- nth-child：选择第几个元素
- nth-last-child：选择第几个元素，从最后一个开始计数
- odd和even：表示奇数和偶数元素
- (an+b)：n表示下标从0开始，b是偏移量，(3n+0)：表示3的倍数元素
nth-of-type和nth-last-of-type的应用
- odd和even：表示奇数和偶数元素
- (an+b)：n表示下标从0开始，(3n+0)：表示3的倍数元素
  - (-n+b)：表示选择小于等于b的元素
nth-child与nth-of-type的区别
- nth-child是以同级第一个元素开始计数
- nth-of-type是以同级指定类型的第一个元素开始计数
- 代码：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap{

            width: 200px;

        }

        .wrap p:nth-child(2), .wrap p:nth-child(4){ /*从第一个元素开始计数*/

            background: red;

        }

        .wrap p:nth-of-type(1), .wrap p:nth-of-type(2){ /*从第一个p元素开始计数*/

            color: lightyellow;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <h1>标题数据</h1>

        <p>第一行内容(第一个P标签)</p>

        <span>这是一个span</span>

        <p>第二行内容(第二个P标签)</p>

    </div>

</body>

nth-last-child选择指定兄弟元素 li:first-child:nth-last-child(n+6):nth-last-child(-n+8)分析：

first-child：选择第一个元素
nth-last-child(n+6)：选择从最后一个开始计数的，下标大于6的元素
nth-last-child(-n+8)：选择从最后一个开始计数的，下标小于8的元素
选择有6 - 8个兄弟元素的li。
示例代码：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        ul{

            list-style: none;

            overflow: hidden;

        }

        ul li{

            float: left;

            padding: 4px 10px;

            border-radius: 4px;

            background: greenyellow;

            margin: 0px 2px;

        }

        li:first-child:nth-last-child(4),

        li:first-child:nth-last-child(4)~li{

            background: indianred;

        }

        li:first-child:nth-last-child(n+6):nth-last-child(-n+8),

        li:first-child:nth-last-child(n+6):nth-last-child(-n+8)~li{ /*匹配li有6,7,8个的ul*/

            background: red;

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

    </ul>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

    </ul>

</body>

四、一幅背景，定宽内容居中

可以利用margin:auto实现，但需要多一层html结构
利用calc可以少一层html结构，且Css更简洁
calc(50% - 300px): -之间必须要有空格，否则会解析出错

用容器一半的宽度 - 内容块一半的宽度

容器的宽度可以不设置为100%，因为容器的最小宽度都为内容的宽度
示例代码：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        footer{

            background: url("../img/cat.png") repeat-x;

            height: 200px;

            color: gainsboro;

            padding: 1em calc(50% - 300px);

        }

        .wrap{

            width: 600px;

        }

    </style>

</head>

<body>

    <footer>

        <div class="wrap">

         這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句其實是假文的基礎。為了讓假句在視覺質地上接近真句，我準備了一個由 128 個真句組成的語料庫。每次要產生假句時就從中隨機挑選一個，然後逐字替換為隨機選出的筆畫數相同、但一般人不可能認得的低頻字。因為一般人不可能認得，實際上也算是假字了這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句

         </div>

    </footer>

</body>

五、垂直居中

5.1、绝对定位

以下两种技巧都需要使用绝对定位
calc实现
- 内容部分必须固定宽和高
translate实现
- 内容部分可以自适应宽和高
- 某些浏览器会导致元素模糊，可用transform-style:preserve-3d来修复，因为元素可能被放置在半个像素上
示例代码：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap{

            position: relative;

            width: 400px;

            height: 150px;

            border: 1px solid red;

        }

        .wrap .cont{

            position: absolute;

            top: calc(50% - 30px);

            left: calc(50% - 50px);

            width: 100px;

            height: 60px;

            background: gray;

        }

        .wrap02{

            position: relative;

            width: 400px;

            height: 150px;

            border: 1px solid red;

        }

        .wrap02 .cont{

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

            background: gray;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="cont">这个内容部分需要定宽和定高</div>

    </div>

    <div class="wrap02">

        <div class="cont">这个内容部分可以实现自适应</div>

    </div>

</body>

5.2、视口垂直居中 + translate

1vh表示视口高度的1%, 1vw表示视口的宽度的1%
当宽度小于 < 高度时，1vmin = 1vm, 否则 1vmin = 1vh
当宽度大于 > 高度时, 1vmax = 1vm，否则 1vmax = 1vh;
内容部分必须要固定宽和高
示例代码：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap{

            width: 18em;

            background: lightgreen;

            padding: 1em 1.5em;

            margin: 50vh auto 0;

            transform: translateY(-50%);

        }

    </style>

</head>

<body>

    <div class="wrap">

        这个只能做到视口居中

    </div>

</body>

5.3、flexbox + margin:auto

在flexbox时，用margin:auto可以实现水平和垂直居中，可以用 margin:0 auto设置水平居中；margin: auto 0设置垂直居中
被居中元素的宽度和高度可以自适应
也可以通过flex的align-items和justify-content来实现水平垂直居中
示例代码：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap01{

            display: flex;

            min-height: 10vh;

            border: 1px solid gray;

            width: 30vw;

        }

        .wrap01 .main{

            margin: auto;

            padding: 5px;

            background: lightblue;

        }

        .wrap02{

            margin-top: 10px;

            width: 28em;

            height: 10em;

            display: flex;

            align-items: center;

            justify-content: center;

            background: lightblue;

        }

    </style>

</head>

<body>

    <div class="wrap01">

        <div class="main">

            flex + margin:auto实现垂直居中

        </div>

    </div>

    <div class="wrap02">

        flex的align-items(垂直对齐)和justify-content(水平对齐)<br/>实现垂直水平居中

    </div>

</body>

六、紧贴底部的页脚

用flexbox实现，对Main区域设置为flex:1，让其成为可伸缩的盒子
min-height:100vh：至少占满屏幕
还有一种利用calc实现，但需要底部固定高度，应用场景太少
flex实现示例代码：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            margin: 0px;

            display: flex;

            flex-flow: column;

            min-height: 100vh;

        }

        main{

            flex: 1;

        }

        header{

            background: limegreen;

        }

        footer{

            background: lightpink;

        }

    </style>

</head>

<body>

    <header>header</header>

    <main>main</main>

    <footer>footer</footer>

</body>

CSS3新特性应用之结构与布局的更多相关文章

01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录一.阴影 1.1.文字阴影 1.2.盒子阴影二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
[转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核兼容性前缀浏览器 Gecko -moz- Firefox ...
深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

随机推荐

webapi - 使用依赖注入
本篇将要和大家分享的是webapi中如何使用依赖注入,依赖注入这个东西在接口中常用,实际工作中也用的比较频繁,因此这里分享两种在api中依赖注入的方式Ninject和Unity:由于快过年这段时间打算 ...
Connect() 2016 大会的主题 ---微软大法好
文章首发于微信公众号"dotnet跨平台",欢迎关注,可以扫页面左面的二维码. 今年 Connect 大会的主题是 Big possibilities. Bold technolo ...
深入理解C#
简单认识.NET框架 (1)首先我们得知道 .NET框架具有两个主要组件:公共语言进行时CLR(Common Language Runtime)和框架类库FCL(Framework Class ...
Hive on Spark安装配置详解（都是坑啊）
个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/p/a7f75b868568 简介本文主要记录如何安装配置Hive on Sp ...
android键盘
在应用的开发过程中有不少的情况下会用到自定义键盘,例如支付宝的支付密码的输入,以及类似的场景.android系统给开发者们提供了系统键盘,KeyboardView,其实并不复杂,只是有些开发者不知道罢 ...
Hbase的伪分布式安装
Hbase安装模式介绍单机模式 1> Hbase不使用HDFS,仅使用本地文件系统 2> ZooKeeper与Hbase运行在同一个JVM中分布式模式– 伪分布式模式1> 所有进 ...
C#数组,List,Dictionary的相互转换
本篇文章会向大家实例讲述以下内容: 将数组转换为List 将List转换为数组将数组转换为Dictionary 将Dictionary 转换为数组将List转换为Dictionary 将Dicti ...
满堂红CIO邓劲翔：房屋中介突围
人脸识别.客户关系管理进度监控.业务流程实时监控.网站访问人数及流量实时监控等实际企业应用场景淋漓尽致.羽羽如生的以大屏幕上图表形式展现在人们面前,如果你不去继续询问,你不会知道这是一家才刚刚在房地产 ...
借助 SIMD 数据布局模板和数据预处理提高 SIMD 在动画中的使用效率
原文链接简介为发挥 SIMD1 的最大作用,除了对其进行矢量化处理2外,我们还需作出其他努力.可以尝试为循环添加 #pragma omp simd3,查看编译器是否成功进行矢量化,如果性能有所提升 ...
Spring MVC重定向和转发以及异常处理
SpringMVC核心技术---转发和重定向当处理器对请求处理完毕后,向其他资源进行跳转时,有两种跳转方式:请求转发与重定向.而根据要跳转的资源类型,又可分为两类:跳转到页面与跳转到其他处理器.对于 ...

CSS3新特性应用之结构与布局

目录

一、自适应内部元素

二、精确控制表格的列宽

三、根据兄弟元素的数量来设置样式

四、一幅背景，定宽内容居中

五、垂直居中

5.1、绝对定位

5.2、视口垂直居中 + translate

5.3、flexbox + margin:auto

六、紧贴底部的页脚

CSS3新特性应用之结构与布局的更多相关文章

随机推荐

热门专题