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

最新推荐文章于 2023-08-03 17:31:51 发布

lelara

最新推荐文章于 2023-08-03 17:31:51 发布

阅读量148

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/lelara/article/details/84577481

版权

html+css 专栏收录该内容

60 篇文章 1 订阅

订阅专栏

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

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

7，溢出：隐藏;清除浮动（给浮动元素父级加）
需要配合宽度，缩放兼容IE6，IE7
卷轴（滚动条）
溢出：隐藏/滚动/自动
三，浏览器

BFC（标准浏览器）
1，float的值不为none
2，overflow的值不为visible
3，display的值为table-cell，table-caption，inline-block中的任何一个
4，position的值不为关系和静态
宽度/高度/最小宽度/最小高度:(！auto）

haslayout（IE浏览器）
1，写入模式：tb-rl
2，-ms-writing-mode：tb-rl
3，zoom :(！normal）

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

固定定位（固定）
1，固定右下角
位置：固定;
右：0;
bottom：0;
与绝对定位特性基本一致。始终相对整个文档进行定位; IE6不支持固定定位。定位
其他值
static（默认值）
inherit（从父元素继承定位属性的值）（不兼容）
position：relative |绝对|固定|静态|继承

五，遮罩
透明度opacity：（0~1） ;透明度参数从0到1（标准浏览器）
父级加了透明度，子级
也会继承透明度 ;IE滤镜：alpha：alpha（opacity = 0~100 ） ;（IE6，IE7浏览器透明度设置）

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

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

七，表单格式

<form action =“”>
<input type =“...”name =“”value =“”/>
text文本
密码密码
radio单选（单选按钮名必须相同）
复选框复选
提交提交
reset重置
按钮按钮
图像图片<input type =“image”/>
file上传<input type =“file”/>
隐藏隐藏<input type =“hidden”/>不让用户看到，需要存储
按钮按钮

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

<！DOCTYPE html>
<html lang =“en”>
<head>
<meta charset =“UTF-8”>
<title>定位</ title>
<style>
* {
margin：0;
填充：0;
}
.div1 {
width：200px;
高度：200像素;
背景：红色;
位置：绝对;
左：200px;
}
.div2 {
width：200px;
高度：200像素;
背景：黄色;
位置：绝对;
上：200px;

}
.div3 {
width：200px;
高度：200像素;
背景：蓝色;
位置：绝对;
上：400px;
左：200px;

}
.div4 {
width：200px;
高度：200像素;
/ * background：red; * /
position：relative;
上：206px;
左：406px;

}
.content {
width：200px;
高度：200像素;
背景：绿色;
位置：绝对;
上：-6px;
左：-6px;
z-index：2;
}
.mask {
width：200px;
高度：200像素;
背景：#ccc;
不透明度：0.6;
位置：绝对;
上：6px;
左：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>