CSS(浮动，高度塌陷，clear，渐变，表格表单，过渡，动画，变形，弹性盒)

最新推荐文章于 2023-07-03 15:45:19 发布

五月dē雪

最新推荐文章于 2023-07-03 15:45:19 发布

阅读量317

点赞数

分类专栏： html+css+js的简单笔记

本文链接：https://blog.csdn.net/ss15363380815/article/details/116914118

版权

html+css+js的简单笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS布局中的浮动概念，包括浮动元素如何影响文档流及如何实现文字环绕。同时，文章深入探讨了高度塌陷问题及其解决办法，如BFC（Block Formatting Context）和clearfix方案。此外，还涵盖了定位、图标字体、渐变、表格、表单、过渡、动画、变形和弹性盒等CSS关键知识点。

摘要由CSDN通过智能技术生成

-float

- 通过浮动可以使一个元素向其父元素的左侧或右侧移动

元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置

所有元素下边的还在文档流中的元素会自动向上移动

- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

- 行内元素

本不支持设置宽高，

但设置float以后，脱离文档流会变成块元素，特点和块元素一样

-高度塌陷

-在浮动布局中，父元素的高度默认是被子元素撑开的，

当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱落

将会无法撑起父元素的高度，导致父元素的高度丢失。

-父元素的高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，

所以高度塌陷是浮动布局中较常见的一个问题，必须得解决。

-BFC

--BFC（Block Formatting Context）块级格式化环境，是CSS中隐含的属性，可以为一个元素开启BFC

--开启BFC的元素不会被浮动元素所覆盖

--元素开启BFC后的特点：开启BFC的元素可以包含浮动的子元素（可以解决高度塌陷的问题）

--可以通过一些特殊方式来开启元素的BFC：

--1.设置元素的浮动；（不推荐）

--2.将元素设置为行内块元素；（不推荐）

--3.将元素的overflow设置为一个非visible（默认值）的值；

--例：将元素设置为overflow：hidden 即能开启其BFC，以使其可以包含浮动子元素

--解决高度塌陷的方案

--设置父元素的::after

.b1::after{
            /* 添加空内容 */
            content: '';
            /* 由于::after是行内元素，需要设置为块元素，才能独占一块 */
            display: block;
            /* 清除上面浮动元素的影响 */
            clear: both;   
        }

--解决高度塌陷的最终方案

--clearfix 这个样式可以同时解决高度塌陷和父子外边距重叠的问题

.clearfix::before,
.clearfix::after{
        content:'';
        display:table;
        clear:both;
}

-定位

-设置position后，只要不是默认的static，

即可任意移动该元素，不影响其他元素的布局

-设置偏移量：top，bottom，left，right，

可选值：

- relative 相对位置

-该元素的相对位置不会脱离文档流

-absolute 绝对定位

-元素会从文档流中脱离

-会改变元素的性质，行内变成块，块的宽高被内容撑开

-开启绝对定位的元素是相对于其包含块进行定位的

-包含块（containing block）离当前元素最近的祖先块元素

--绝对定位的包含块：离他最近的开启了定位的祖先块元素

- fixed 固定定位

-固定定位和绝对定位类型，但是固定定位永远参照与浏览器的视口进行定位

-固定定位不会随着网页的滚动条滚动

- sticky 粘性定位

-与相对定位类似，但是粘性定位可以在元素到达某个位置时将其固定

-图标字体

-直接通过类名来使用图标字体

前缀要么是fas，要么就是fab

<i class = "fas fa-bell"> </i>
<i class = "fab fa-accessible-icon"> </i>

-通过实体使用

<span class="fas"> &#x图标的编码 </span>

-通过伪元素

-clear

-作用：清除浮动元素对当前元素所产生的影响

-可选值： left 清楚左侧浮动元素对当前元素的影响

right 清楚右侧浮动元素对当前元素的影响

both 清除两侧中最大影响的那侧

-渐变

linear-gradient 线性渐变

开头可以指定渐变的方向：

to left;

to right;

to top;

to bottom;

45deg ; 表示45度斜渐变

1turn ; 表示一圈

渐变颜色平均分配，也可以手动指定渐变的分布情况

            background-image: linear-gradient(45deg, red,purple,orange);

可得==>

radial-gradient 径向渐变（放射性的效果）

可以手动设置渐变的大小

circle

ellipse

也可以指定特殊位置

background-image: radial-gradient(red,yellow);

可得==>

-表格

border-spacing 指定边框之间的距离

border-collapse 指定边框的合并

默认情况下td是垂直居中的，可以通过vertical-align来设置

默认情况下，tr是在tbody下的子元素，而不是table 的子元素

-表单

-创建文本框

数据要提交给服务器，必须要设置name属性

value 框里面的默认文字

autocomplete="off" 关闭自动补全

readonly 将表单设置为只读，数据会提交

disable 将表单设置为禁用，数据不会提交

autofocus 自动获取焦点

required 设置必填

        文本框<input type="text" name="elment" value="输入文字" autocomplete="off">
        <br>
        文本框<input type="text" name="elment" value="666" readonly>
        <br>
        文本框(必填)<input type="text" name="elment" required autofocus>

==》