首页 > > 网页制作 > css >

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

2018-06-24 00:51:31来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

目录

  • 背景与边框第一部分
  • 背景与边框第二部分
  • 形状
  • 视觉效果
  • 字体排印
  • 用户体验
  • 结构与布局
  • 过渡与动画
  • 源码下载

一、自适应内部元素

  • 利用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>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Less学习笔记

下一篇：图解CSS3制作圆环形进度条的实例教程

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签