CSS笔记

野性酷女 2022-04-25 01:04 232阅读 0赞

## 一、position ##

> ### fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 ###

*  如果想将某控件固定在窗口某个位置，比如顶部，就可以采用该fixed属性。但需要注意其兄弟组件，如果想显示完整，需要进行移动，以免被该组件遮蔽。而且通常需要给他们的父组件position设置为relative,overflow为hidden，避免子组件显示异常。  
    ![组件布局][20190430112851955.png]  
    ![组件样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70]

> ### absolute 生成绝对定位的元素，`相对于 static 定位以外的第一个父元素进行定位`。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。`同时该对象从文档流中拖出。` ###

*  子元素采用absolute定位时，若父元素没有设定高度，而且父元素设置了overflow:hidden,会导致子元素不显示，原因是在使用absolute定位时，会导致该元素脱离文档流，无法撑开父元素。解决方法可以指定父元素足够高的高度，可以通过js进行；子元素去掉absolute属性。
 *  子元素定位的依据是设定position属性的父元素，上一层没有设定继续往上一层查找，若一直没有则默认依据是body。

## 二、变化 ##

*  translateY()
    
    > translateY()函数表示在页面垂直移动元素. 这个transformation具有特征的就是通过 定义了元素垂直移动了多少。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 1]  
该变化效果可以用在从下往上弹出控件，初始时可以设为一个超过100%的值，比如transform: translateY(150%);，然后想要显示时，可以设为transform: translateY(0)。搭配[transitions][]属性，可以增加一点动效，提升用户体验。

*  padding
    
    > padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。
    
    这个属性有个奇怪的现象，就是当width为100%时，padding-right 会失效。这种现象可以解释为‘流动性丢失’。

[20190430112851955.png]: /images/20220210/78a1df4ac82846f7bc7396eeb4ba9039.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70]: /images/20220210/62df106193294225b140a90b7989282c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 1]: /images/20220210/937619c42fdf472f8488b06d6f9c1315.png
[transitions]: https://www.w3cschool.cn/doc_css/css-css_transitions.html?lang=en