css3总结

短命女 2022-10-05 00:49 148阅读 0赞

## 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中，不需要加前缀

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenlfY29t_size_16_color_FFFFFF_t_70_pic_center]

## 盒布局 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenlfY29t_size_16_color_FFFFFF_t_70_pic_center 1]

## 盒布局和多栏布局的区别 ##

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

**弹性盒子布局：**[弹性盒子布局][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenlfY29t_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/9709738d85bd40a79b55273963c048ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenlfY29t_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/4aa086412282438e8a1236eadb6360ed.png
[Link 1]: https://editor.csdn.net/md/?articleId=103896645