第3天:CSS浮动、定位、表格、表单总结

简介: 今天学的是浮动、定位、表格、表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意。下面是主要知识点:一、float浮动1、块元素在一行显示2、内联元素支持宽高3、默认内容撑开宽度4、脱离文档流5、提升层级半层二、clear清除浮动1、加高(扩展性不好)给浮动元素的父级设置...

今天学的是浮动、定位、表格、表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意。下面是主要知识点:

一、float浮动
1、块元素在一行显示
2、内联元素支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层
二、clear清除浮动
1、加高(扩展性不好)
给浮动元素的父级设置同样的高度
2、给父级加浮动(页面中所有元素都要加浮动,margin左右失效)
3、inline-block(margin左右auto失效)
4、空标签加浮动(div )(任何用到的地方都要加)
.clearfix{clear:both;}(IE6最小高度19px,解决后还有2px偏差)
5、.br清浮动(不符合工作中结构、样式、行为,三者分离的要求)
<br clear="all"/>
6、after清浮动(现在主流方法)
.clearfix{
*zoom:1;}
.clearfix:after{
content:"";
display:block;
clear:both;
}
只需要给浮动元素的父级加上clearfix,就可以。

7、overflow:hidden;清除浮动(给浮动元素父级加)
需要配合宽度、zoom兼容IE6、IE7
scroll(滚动条)
overflow:hidden/scroll/auto
三、浏览器

BFC(标准浏览器)
1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell,table-caption,inline-block中的任何一个
4、position的值不为relation和static
width/height/min-width/min-height:(!auto)

haslayout(IE浏览器)
1、writing-mode:tb-rl
2、-ms-writing-mode:tb-rl
3、zoom:(!normal)

四、position定位
相对定位(relative)
1、不影响元素本身的特性
2、不使元素脱离文档流(元素移动之后原始位置会保留)
3、如果没有定位偏移量,对元素本身没有任何影响
4、提升层级
绝对定位(absolute)
1、使元素完全脱离文档流
2、使内嵌支持宽高
3、块属性内容撑开宽度
4、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移
5、相对定位一般都是配合绝对定位元素使用
6、提升层级
一般来说,父级相对定位,子级绝对定位。

固定定位(fixed)
1、固定右下角
position:fixed;
right:0;
bottom:0;
与绝对定位特性基本一致。始终相对整个文档进行定位;IE6不支持固定定位。
定位其他值
static(默认值)
inherit(从父元素继承定位属性的值)(不兼容)
position:relative|absolute|fixed|static|inherit

五、遮罩透明度
opacity:(0~1);透明度参数从0到1(标准浏览器)
父级加了透明度,子级也会继承透明度;
IE滤镜:filter:alpha(opacity=0~100);(IE6、IE7浏览器透明度设置)

z-index定位层级
默认后者的值高于前者

六、表格(table)
thead(表头)、tbody(表格主体)、tr(表格行)、th(元素定义表头)、td(元素定义表格单元)
表格样式重置
table{border-collapse:collapse;}单元格间隙合并
th,td{padding:0}重置单元格默认填充
给table加border=“1”;单元格加边框
合并单元格
colspan=“2”(跨列)
rowspan="2"(跨行)

七、表单form

<form action="">
<input type="..." name="" value=""/>
text 文本
password 密码
radio 单选(单选按钮name必须相同)
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片<input type="image"/>
file 上传<input type="file"/>
hidden 隐藏<input type="hidden"/>不让用户看到,需要存储
button 按钮

最后做了个定位的小练习:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width:200px;
height:200px;
background: red;
position: absolute;
left: 200px;
}
.div2{
width:200px;
height:200px;
background: yellow;
position: absolute;
top: 200px;


}
.div3{
width:200px;
height:200px;
background: blue;
position: absolute;
top: 400px;
left: 200px;

}
.div4{
width:200px;
height:200px;
/*background: red;*/
position: relative;
top: 206px;
left: 406px;

}
.content{
width:200px;
height:200px;
background: green;
position: absolute;
top: -6px;
left: -6px;
z-index: 2;
}
.mask{
width:200px;
height:200px;
background: #ccc;
opacity: 0.6;
position: absolute;
top: 6px;
left: 6px;
z-index: 1;

}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">
<div class="content"></div>
<div class="mask"></div>
</div>
</body>
</html>

运行效果:

相关文章
|
16天前
CSS3注册表单文本框占位符特效源码
CSS3注册表单文本框占位符特效源码是一段简单的css3 input文本框占位符,placeholders占位符内容填写注册表单特效,非常有意思,欢迎有兴趣的朋友前来下载使用。
25 5
|
26天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
48 12
|
27天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
41 3
|
2月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
25 0
|
3月前
|
前端开发
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
4月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
4月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
31 5
|
4月前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
4月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位