CSS层叠样式表——DIV+CSS布局

DIV+CSS布局

我们提供的服务有：做网站、成都做网站、微信公众号开发、网站优化、网站认证、鼎城ssl等。为数千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的鼎城网站制作公司

1 div和span

DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式

DIV和SPAN的区别在于，SPAN是内联元素，DIV是块级元素

2 盒模型

margin 盒子外边距

padding 盒子内边距

border 盒子边框宽度

width 盒子宽度

height 盒子高度

3 布局相关的属性

3.1 position 定位方式

正常定位 relative

根据父元素进行定位 absolute

根据浏览器窗口进行定位 fixed

没有定位 static

继承 inherit

3.2 定位

离页面顶点的距离 left（左），right（右），top（上），bottom（下）

3.3 z-index 层覆盖先后顺序（优先级）

3.4 display 显示属性

display:none 层不显示

display:block 块状显示，在元素后面换行，显示下一个元素

display:inline 内联显示，多个块可以显示在一行内

3.5 float 浮动属性

left 左浮动

right 右浮动

3.6 clear 清除浮动

clear:both

3.7 overflow 溢出处理

hidden 隐藏超出层大小的内容

scroll 无论内容是否超出层大小都添加滚动条

auto 超出时自动添加滚动条

4 兼容问题及高效开发工具

4.1 兼容性测试工具

IE Tester

Multibrowser

4.2 常用的浏览器

Firefox

Google chrome

opera

4.3 高效的开发工具

4.3.1 轻级的

Notepad++

sbulime Text

记事本根据自己的需要来选择

4.3.2 重量级的

WebStorm

Dreamweaver

4.4 网页设计工具

fireworks

photoshop

5 判断IE的方法条件注释只在IE浏览器

5.1 条件判断格式

5.2 不等于

[if !IE 8] 除了IE8都可以显示

5.3 小于

[if it IE 5.5] 如果IE浏览器版本小于6的显示

5.4 大于

[if gt IE 5] 如果IE浏览器版本大于5的显示

5.5 小于或等于

[if lte IE 6] 如果IE浏览器版本小于6的显示

5.6 大于或等于

[if gte IE 7] 如果IE浏览器版本小于7的显示

5.7 大于和小于之间

[if (gt IE 5)&(it IE 7) 如果IE浏览器版本大于IE5小于7的显示

5.8 或

[if (IE 6)|(IE 7)] 如果是IE6或者IE7显示

5.9 仅

<!--[if IE 8]> 如果是IE8，就只显示IE8

6 《DIV+CSS网页布局实战》

先分析，再切图，然后搭建框架，慢慢的循序渐进，下一步解决兼容，最后完成

当前文章：CSS层叠样式表——DIV+CSS布局
转载来源：https://www.cdcxhl.com/article26/possjg.html

成都网站建设公司_创新互联，为您提供微信公众号、App设计、网站导航、网站内链、静态网站、品牌网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容