css3总结

2021/6/9 18:28:04

编程Tag： css3 选择总结 column 大于风口努力上天

本文主要是介绍css3总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

em和rem

em单位根据元素的父元素的大小而计算出实际的大小。
rem单位根据页面上的根元素(html)的大小而计算出实际的大小
例：我们指定HTML元素的字体大小为10px，small元素的字体大小为11px,strong元素的字体大小为18px。

//大多数浏览器中，默认字体大小为16px,也可将根元素的大小设为62.5%
   从而使浏览器自动算出10个像素。
html{font-size:10px;}
small{font-size:1.1rem;}
strong{font-size:1.8rem;}

文本溢出在盒的末尾省略号显示

div{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	width:300px;
}

多栏布局

使用float或position进行页面布局时有一个显著的缺点： 就是第一个div与第二个div元素各自独立，因此如果在第一个div元素中加入内容，将会使得两个元素的底部不能对齐，导致页面多出一块空白区域。

使用多栏布局可以将一个元素中的内容，并且确保各栏中内容底部对齐。
多栏布局的相关属性：
1.column-count：将一个元素中的内容分为多栏进行显示。
2.column-width：单独设置每一栏的宽度而不设定元素的宽度；（需要在元素外面单独设立一个容器元素，指定容器元素的宽度）
3. width：元素的宽度，即多个栏目的总宽度
4. column-gap：设定多栏之间的间隔距离；
5. column-rule：在栏与栏之间增加一条间隔，并设置该间隔线的宽度，颜色

以上属性，在Firefox浏览器中要添加前缀“-moz-”;
在safair、chrome、Opera浏览器中要添加前缀“-webkit-”;
在IE中，不需要加前缀

<style>
  #div1{
      /* 栏数 */
      column-count: 2;
      -moz-column-count: 2;
      -webkit-column-count: 2;
     /* 没栏宽度，需要有容器元素并设置宽度 */
      column-width: 15em;
      -moz-column-width: 15em;
      -webkit-column-width: 15em;
    /* 栏间距 */
      column-gap: 5em;
      /* 栏的间隔线 */
      column-rule: 1px dashed pink;
  }
  #div3{
      width: 100%;
      height: 200px;
      background-color: coral;
  }
</style>
<body>
    <div id="div1">
        <img src="./2021-06-08_092508.png">
        <p>风口上猪都能上天风口上猪都能上天风口上猪都能上天风口上猪都能上天风口上猪都能上天风口上猪都能上天风口上猪都能上天
            风口上猪都能上天风口上猪都能上天风口上猪都能上天
            风口上猪都能上天风口上猪都能上天风口上猪都能上天
            风口上猪都能上天风口上猪都能上天风口上猪都能上天</p>
        <p>选择大于努力选择大于努力选择大于努力选择大于努力
            选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力
            选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力
            选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力
            选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力</p>
    </div>
    <div id="div3"></div>
</body>

在这里插入图片描述

盒布局

通过box属性来使用盒布局，在Firefox浏览器中，需要书写成“-moz-box”的形式；在Safari、chrome或Opera浏览器中，需要书写成“-webkit-box”的形式。

<style>
    #container{
        display: -moz-box;
        display: -webkit-box;
    }
    #left{
        width: 200px;
        background-color: coral;
    }
    #content{
        width: 300px;
        background-color: cornflowerblue;
    }
    #right{
        width: 200px;
        background-color: crimson;
    }
    #left,#content,#right{
        box-sizing: border-box;
    }
</style>
<body>
    <div id="container">
        <div id="left">风口上猪都能上天风口上猪都能上天风口上猪都能上天风口上猪都能上天风口上猪都能上天风口上猪都能上天风口上猪都能上天
            风口上猪都能上天风口上猪都能上天风口上猪都能上天
            风口上猪都能上天风口上猪都能上天风口上猪都能上天
            风口上猪都能上天风口上猪都能上天风口上猪都能上天</div>
        <div id="content">选择大于努力选择大于努力选择大于努力选择大于努力
            选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力
            选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力
            选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力
            选择大于努力选择大于努力选择大于努力选择大于努力选择大于努力</div>
            <div id="right"></div>
    </div>

在这里插入图片描述

盒布局和多栏布局的区别

使用多栏布局时，各栏宽度必须是相等，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合显示文章内容的时候，不适合用于安排整个网页中各元素组成的网页结构。

弹性盒子布局：弹性盒子布局

这篇关于css3总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

css3总结

em和rem

文本溢出在盒的末尾省略号显示

多栏布局

盒布局

盒布局和多栏布局的区别

相关编程文章