css3总结

2021-06-09 17:59:01 作者：互联网

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,总结,努力,column,风口,选择,上天,大于
来源： https://blog.csdn.net/csdn_zy_com/article/details/117637953