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

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

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流浪猫的golang

go Http Post 发送文件流

水滴石穿。这里把Go Http Post 参数的函数也贴了处理主要对比两者不同之处。

14130
来自专栏编程直播室

Canvas的HelloWorld文本的样式文本的测量总结

27260
来自专栏九彩拼盘的叨叨叨

学习前端 第4周 第1天

8330
来自专栏十月梦想

css选择器

            选择器{... !important} 则该选择器的优先级最高

9050
来自专栏pangguoming

CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技...

503100
来自专栏Flutter入门

Android OpenGL ES(八) - 简单实现绿幕抠图

这里的关键是,判断颜色的范围。这里简单的认定 g>140.0 && r<128.0 && b<128.0 时为绿色。当是绿色的时候,就将其颜色换成白色。同时al...

37220
来自专栏黑泽君的专栏

day01_html学习笔记

24410
来自专栏Android开发与分享

【React Native】react-native-scrollable-tab-view

593120
来自专栏前端杂货铺

响应式web布局中iframe的自适应

困境           在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度...

391120
来自专栏十月梦想

浮动

    将红色背景的div想左边漂浮,则原来的绿色div不显示是红色被遮挡在面。 

9120

扫码关注云+社区

领取腾讯云代金券