CSS3 学习笔记

比眉伴天荒 2023-06-13 09:30 14阅读 0赞

### 1. display的使用和内容 ###

display有三个属性：

**block: 块元素**

*  总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
 *  宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
 *  主要标签： address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

**inline: 内联元素**

*  和相邻的内联元素在同一行;
 *  宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
 *  主要标签： a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

**inline-block: 内联块元素**

*  显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

### 2. Float浮动的原理和使用 ###

**2.1 浮动是什么**

浮动即将一个元素浮动，并可以上下移动，再通过margin调整位置

**2.2 浮动的原理**

浮动即是将一个元素脱离普通流，使其浮在普通流只上，且可以水平上下移动，知道碰到容器框或是其他浮动框，且可以通过margin调整位置。浮动框的拼接可以看成是俄罗斯方块。

**2.3 浮动的作用**

在两联或多联页面中使用浮动布局

**2.4 浮动的影响**

*  高度坍塌：浮动会导致父容器的高度坍塌。例如：块A的高度是50px，即此时父容器的高度为50px，当块A变为浮动元素时，它将不再撑开父容器，父容器的高度变为0。这会导致其他元素填补这部分的高度。
 *  布局变化：当元素浮动导致高度坍塌时，但这个元素的宽度仍旧占用着。这回导致文档元素位置的变化。

当块A不是浮动元素时：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70][]

当块A变成左浮动元素：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1][]

**2.5 清除/闭合浮动**

增加清除样式

clear: both;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115163620448.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191115163731561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70