05-06 浮动定位表单控件

最新推荐文章于 2024-05-01 12:01:29 发布

pijrix

最新推荐文章于 2024-05-01 12:01:29 发布

阅读量86

点赞数

分类专栏：前端学习文章标签： css css3 html

本文链接：https://blog.csdn.net/pijrix/article/details/126901760

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

05-CSS布局

1. 浮动

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。主要用于设置块元素的水平排列。属性：float

值	描述
left	元素向左浮动
right	元素向右浮动

元素设置浮动会从原始位置脱流，在文档中不再占位
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示。内容围绕在浮动元素周围显示

清除浮动：

当父级元素没有设置高度时，高度会由文档流内容撑开。而当子元素浮动之后，脱离了文档流，所以父级高度不会被撑开，这对我们后续的布局结构会造成很多困扰。

对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
在父元素的末尾添加空的块元素。设置clear:both;清除浮动
为父元素设置overflow:hidden;解决高度为0

2. 定位

CSS中的position 属性用来设置元素在页面中的位置，您可以把任何属性放置在任何您认为合适的位置。position 属性分别对应不同的定位方式

relative相对定位：元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
absolute绝对定位：绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移。绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高

“父相子绝” : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移
fixed固定定位：参照窗口进行定位,不跟随网页滚动而滚动。脱离文档流

设置定位的元素可以使用偏移属性调整距离参照物的位置

top   	距参照物的顶部
right	距参照物的右侧
bottom	距参照物的底部
left	距参照物的左侧

堆叠次序

元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：

属性 : z-index
取值 : 无单位的数值,数值越大,越靠上
堆叠：
1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
2. 同为已定位元素发生堆叠，按照HTML代码的书写顺序，后来者居上

3. 选择器补充

伪类选择器：当你希望元素在特定的状态下发生样式的变化时，可以使用伪类选择器。

状态类：

写法	介绍	举例
:hover	鼠标悬停	a:hover{color:pink;}
:link	未被访问的链接（特指a标签）	a:link{color:red};
:visited	被访问过的链接（特指a标签）	a:visited{color:blue;}
:active	被点击按下状态	a:active{color:green;}

:hover :active 不仅仅能用在a标签上。

:hover最为常用最为重要。

结构类

写法	介绍	举例
E:nth-child(n)	E元素父级的第n个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:nth-child(2){color:red;}
E:nth-of-type(n)	E元素父级的第n个E元素，无视其他元素	p:nth-of-type(2){color:red;}
E:first-child	E元素父级的第一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:first-child{color:red;}
E:last-child	E元素父级的最后一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:last-child{color:red;}

伪元素选择器

伪类选择器相当于在某种情况下添加了一个类名，伪元素选择器创建一个假元素

写法	介绍	举例
E::before	相当于在E元素的最前面添加一个额外的子元素	#wrap::before{content:“Hello World!”}
E::after	相当于在E元素的最后面添加一个额外的子元素	#wrap::after{content:“Hello World!”}

必须拥有 content 样式，上述两个伪元素才会生效。

创建的子元素是一个行内元素。

4. flex布局

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

以下6个属性设置在容器上。

flex-direction 决定主轴的方向
flex-wrap 控制换行
justify-content 主轴上的对齐方式
align-items 项目在交叉轴上如何对齐

项目的属性

order 项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
align-self 允许单个项目有与其他项目不一样的对齐方式

5. 阿里图标

免费将图标以字体的形式加载页面

使用步骤：

打开阿里图标官网：https://www.iconfont.cn/
登录
选择需要的图标加入购物车
下载代码

06-表单表格

1. 表单标签

表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。

属性名	取值
action	设置数据的提交地址
method	设置数据的提交方式，默认为get方式，可以设置为post

<form action="" method="">
    <!--此处为表单控件--> 
</form>

控件/标签	描述
`<input>`	定义输入框，用于输入单行文字。通过type属性值的不同，展示不同效果
`<textarea>`	定义文本域（一个可以输入多行文本的控件）
`<label>`	为表单中的各个控件定义标题
`<select>`	定义下拉列表
`<option>`	定义下拉列表中的选项
`<button>`	定义一个可以点击的按钮

属性名	取值	说明
type	设置控件类型	控件类型见下表
name	用户自定义	设置控件名称，最终与值一并发送给服务器
value	用户自定义	设置控件的值
placeholder	用户自定义	设置输入框中的提示文本
checked	无	设置单选按钮或多选框按钮的默认选中

属性值	描述
text	文本框，用于输入用户名
password	密码框，用于输入密码
radio	单选框，用于多选一
checkbox	多选框，用于多选多
submit	提交按钮
reset	重置按钮
button	普通按钮
file	文件上传