CSS-浮动与定位

最新推荐文章于 2024-10-10 01:16:57 发布

李白白.

最新推荐文章于 2024-10-10 01:16:57 发布

阅读量54

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_3047318787/article/details/134761088

版权

设置 transform:scale(1,1); 样式 ,

一些不理解待学

浮动

简介：文字环绕图片

元素浮动后的特点：

* 元素浮动后，脱离文档流
* 不管浮动前是什么元素，浮动后宽与高都是被内容撑开
* 不会独占一行，可以与其他元素共用一行。
* 不会margin合并，也不会margin塌陷，能设置四个方向的margin和padding。
* 不会像行内块一样被当做文本处理（没有行内块的空白问题）

浮动后的影响：

* 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面：对前面的兄弟无影响。
* 对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷：但父元素的宽度依然束缚浮动的元素。

解决浮动产生的影响：

clear:Ieft;消除掉所有左浮动兄弟产生的影响
clear:both;所有
display:inline;放到行内

解决方案：
1：给父元素指定高度。
2：给父元素也设置浮动，带来其他影响。
3：给父元素设置overf1ow:hidden。
4：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置c1ear:both。
5：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动
* 布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

定位

相对定位

* 设置相对定位：position:relative
* 参考点：相对自己原来的位置

相对定位的特点：

1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2,定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
*默认规则：定位的元素会盖在普通元素之上。
3.left不能和right一起设置，top和bottom不能一起设置。

*注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

绝对定位：

设置绝对定位：position:absolute
参考点：参考它的包含块
*包含块：
1,对于没有脱离文档流的元素：包含块就是父元素
2.对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素

绝对定位元素的特点：

1.脱离文档流，会对后面的兄弟元素、父元素有影响。
2.left不能和r1ght一起设置，top和bottom不能一起设置.
3.绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
5,无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
*定位元素：默认宽、高都被内容所撑开，目能自由设置宽高。固定定位：

固定定位

设置固定定位：position:fixed
参考点：参考它的视口

固定定位元素的特点

1,脱离文档流，会对后面的兄弟元素、父元素有影响。
2.1eft不能和right一起设置，top和bottom不能一起设置。
3.固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
5.无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

一些知识点

displayblock作用：

1、可以改变元素的显示类型；

2、可以用于控制元素的尺寸；

3、具有盒模型的特性。
CSS 的 content 属性

用于在元素的内容之前或之后插入生成内容。可以用来在元素中插入文本、图像或其他元素。它主要用于为伪元素（::before 和 ::after）添加内容。

其中，常用的值有:
- content: "" (空字符串) 用于清除元素的内容
- content: "string" 用于在元素中插入文本
- content: url(image.png) 用于在元素中插入图像
- content: counter(counterName) 用于在元素中插入计数器
- content: attr(attributeName) 用于在元素中插入属性值
- content: none 用于不显示任何内容
设置 transform:scale(1,1); 样式 ,

表示盒子模型宽高都放大了一倍 , 也就是不变 ; 设置 transform:scale(2,2); 样式 , 表示盒子模型宽高都放大了 2 倍 ; 设置 transform:scale(0.5,0.5); 样式 , 表示盒子模型宽高都缩小到 0.5 倍 ;

如果 scale 只设置一个参数 , 那么就是同时对宽高缩放相同的倍数 , 如 : 设置 transform:scale(2); 样式 ,表示盒子模型宽高都放大了 2 倍 , 相当于 transform:scale(2,2); 样式 ;

方法：1、给元素添加“background-color:rgba(R,G,B,A)”样式来设置颜色透明度； 2、给元素添加“opacity:透明值;”样式来设置透明度； 3、给图像设置“filter:opacity(%);”样式来透明度。

transform: translateY(50px，100px); 【水平右移50，垂下移100】
overflow:hidden;【隐藏超出盒子大小的内容】
倾斜30度 font-style: oblique 30deg; 倾斜 font-style: italic;
居中 style="margin: 0 auto" text-align: center

一些不理解待学

text # 正常展示的普通文本 placeholder：提示文本 value：默认值 name：名称 readonly：只读，布尔属性 required：必须输入，布尔属性 disabled：不可用，布尔属性，input,select,textarea的通用属性 minlength：最小长度，提交时判定 maxlength：最大可输入的长度 pattern：正则匹配 antocomplete ：自动记录输入，以后输入时可以自动选择完成。可选值为on/off，默认on

用户名： <input type="text" name="name">
password # 密文展示属性和text一样，主要区别是，会自动隐藏输入的内容密码： <input type="password" name="pwd">
date # 日历展示生日： <input type="date" name="birthday">
radio # 单选（1）可以通过添加checked="checked"设置默认值 ps:如果属性名和属性值相同可以简写checked （2）name：名称，必须有，相同name的单选会作为一组，会相互排斥（3）value：选项对应的值

性别：男<input type="radio" name="gender" value="male"> 女<input type="radio" name="gender" checked value="female"> 其他<input type="radio" name="gender" value="others">
checkbox # 多选可以产生多选框，也可以通过添加checked="checked"设置默认值爱好：篮球<input type="checkbox" name="hobby" value="basketball" checked> 足球<input type="checkbox" name="hobby" value="football"> 排球<input type="checkbox" name="hobby" value="volleyball" checked>
email # 邮箱格式数据邮箱：<input type="email" name="email">

7.file # 文件数据用于添加文件数据，可以通过添加multiple属性控制获取单个还是多个文件 <p>单个文件: <input type="file" name="single_file"> </p> <p>多个文件: <input type="file" multiple name="files_list"> </p>