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>

时间: 2024-10-12 20:28:44

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

CSS3新特性简介

1.CSS3 边框:通过 CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框,如border-radius:box-shadow:border-image 2.CSS3 背景:CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制.background-size:background-origin 3.CSS3 文本效果:CSS3 包含多个新的文本特性.text-shadow:word-wrap 4.CSS3 @font-face规则:可将设计师希望使用的字体文件存放到web服

Atitti css3 新特性attilax总结

图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap & Text-overflow 样式9 Word-wrap9 Text-overflow10 文字渲染(Text-decoration) 描边12 CSS3 的多列布局(multi-column layout)13 边框和颜色(color, border)14 CSS3 的渐变效果(Gradient)15 线性渐变15 径向渐变16 CSS3 的阴影(

[转]深入了解 CSS3 新特性

简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外观和格式.CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等等,目前有很多浏览器已经相继支持这项升级的规范,如:Firefox.Chrome.Safari.Opera 等等.在 Web 开发中采用 C

深入了解 CSS3 新特性

简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外观和格式.CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等等,目前有很多浏 览器已经相继支持这项升级的规范,如:Firefox.Chrome.Safari.Opera 等等.在 Web 开发中采用

个人总结(css3新特性)

1.前言css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画.个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3.写这篇文章主要是让大家能了解css3的一些新特性,以及基础的用法,感觉css3的魅力!如果想要用好css3,这个得靠大家继续努力学习,寻

CSS3新特性+less实验——animation

自从CSS3推出animation以来,一大批H5应用纷纷利用animation来制作以往需要JS或FLASH才能制作出的特效.今天就来看看animation的庐山真面目吧. 实验对象:animation animation可以被用来定义一组动画效果,此效果可以被应用在任何元素之上,并且可以通过它提供的各项参数精确控制动画的细节. 语法 animation:[[ animation-name ] || [ animation-duration ] || [ animation-timing-fu

HTML5和CSS3新特性一览

HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内容. <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置. <command> 定义命令按钮,比如单选按钮.复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary>

常用的HTML5、CSS3新特性能力检测写法

伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,windows8.1的用户已经用上了IE10/11,而考虑我国的国情,IE6.7依然存留不少.在我们放手用HTML5开发的时候,新特性支持度检测就是必不可少的了.一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本,不过这种方式不是很可靠,浏览器

Css3新特性总结之边框与背景(一)

本系列主要总结Css3一些新特性的认识,来源于<css揭秘>书. 一.半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360):s:饱合度(0%~100%):l:亮度(0%~100%):a:透明度(0~1) background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border):padding-box(背景颜色扩散到padding):content-box(背景颜色扩展到content) 示例代码: width:200px; he