今天学的是浮动、定位、表格、表单等内容，这些是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>

运行效果：

第3天：CSS浮动、定位、表格、表单总结的更多相关文章

  1. [19/06/08-星期六] CSS基础_表格&表单

    一.表格 如生活中的Excel表格,用途就是同来表示一些格式化的数据,如课程表.工资条.成绩单. 在网页中也可以创建出不同的表格,在HTML中使用table标签来创建一个表格.table是个块元素. ...

  2. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  3. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  4. 范仁义html+css课程---7、表单

    范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...

  5. HTML--绝对路径, 表格,表单, 框架

    URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...

  6. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  7. css之表格,表单

    一.表格 1.定义 表格由<table>标签来定义.每个表格均有若干行(由tr标签定义),每行被分割为若个单元格(由td标签定义).字母td指表格数据(table data),即数据单元格 ...

  8. [Swift通天遁地]二、表格表单-(11)创建星期选项表单和拥有浮动标签的文本框

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

  10. bootstrap快速入门笔记（七）-表格,表单

    一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...

随机推荐

  1. 使用three.js加载3dmax资源，以及实现场景中的阴影效果

    使用three.js可以方便的让我们在网页中做出各种不同的3D效果.如果希望2D绘图内容,建议使用canvas来进行.但很多小伙伴不清楚到底如何为我们绘制和导入的图形添加阴影效果,更是不清楚到底如何导 ...

  2. "HK"日常之制作一只QQ刷屏

    刷屏器是什么?可以吃吗?如果可以吃它好吃吗? um. 刷屏器就是可以定时发生信息的东西 刷屏器可以应用于很多方面,例如别人不理你了或者在QQ斗图的时候.警告:本教程仅作为学习研究,禁止其他用途!--- ...

  3. WNMP(Windows + Nginx + PHP + MySQL) 安装

    最近在开发一个新的项目,环境用的是: Nginx1.10.3  下载地址: http://nginx.org/en/download.html  下载windows版本包 PHP 7.1.1  下载地 ...

  4. zabbix实现邮件报警

    说明: Zabbix监控服务端.客户端都已经部署完成,被监控主机已经添加,Zabiix监控运行正常. 实现目的: 在Zabbix服务端设置邮件报警,当被监控主机宕机或者达到触发器预设值时,会自动发送报 ...

  5. 个人作业2--英语学习APP案例分析

    1.下载APP并使用,上手体验 个人很喜欢这种风格,画面简洁,排版精细,尤其是联想词的界面,很惊喜.但是很多链接比如精选文章点进去之后的UI设计并不理想,感觉只是一个网页而已.并且我不能够保存或者收藏 ...

  6. npm介绍与cnpm介绍

    npm介绍 说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 使用npm安装插件:命令提示符执行npm instal ...

  7. 【php】php 连接数据库

    $mysql_server_name=""; //数据库服务器名称 $mysql_username=""; // 连接数据库用户名 $mysql_passwor ...

  8. Android学习笔记-Button(按钮)

    Button是TextView的子类,所以TextView上很多属性也可以应用到Button 上!我们实际开发中对于Button的,无非是对按钮的几个状态做相应的操作,比如:按钮按下的时候 用一种颜色 ...

  9. ECMAScript6新特性之let、const

    第一次在博客园写博客,想把自己每一天学习到的知识点记录下来,心里有点紧张(PS:不知道自己能不能写好......嘿嘿).言归正传,咱们先来说说"ECMAScript"这到底是啥玩意 ...

  10. WordPress中函数钩子hook的作用及基本用法

    WordPress 的插件机制实际上只的就是这个 Hook 了,它中文被翻译成钩子,允许你参与 WordPress 核心的运行,是一个非常棒的东西,下面我们来详细了解一下它.钩子分类 钩子分为两种,一 ...