Html之 DIV+CSS布局

简介: Html之 DIV+CSS布局

Html之 DIV+CSS布局

1.div和span


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

DIV和span的区别在与,span是内联元素,div是块级元素


2.盒模型


margin 盒子外边距

padding 盒子内边距

border 盒子边框宽度

width 盒子宽度

height 盒子高度


3.布局相关的属性


1.position 定位方式

1.正常定位 relative

2.根据父元素进行定位 absolute

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

4.没有定位 static

5.继承inherit

2.定位

left(左),right(右),top(上),bottom(下)离页面顶点的距离

3.z-index 层覆盖先后顺序(优先级)

4.display 显示属性

display:none 层不显示

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

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

5.float 浮动属性

left 左浮动

right 右浮动

6.clear 清除浮动

clear:both

7.overflow 溢出处理

hidden 隐藏超出层大小的内容

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

auto 超出时自动添加滚动条


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


Html之 DIV+CSS布局

1.兼容性测试工具

1、IE Tester

2、Multibrowser

2.常用的浏览器

1、Google chrome

2、Firefox

3、opera

3.高效的开发工具

1.Notepad++

2.sbulime Text

3.记事本

1.WebStorm

2.Dreamweaver

4.网页设计工具

1.fireworks

2.photoshop

5.判断IE的方法

image.png

image.png


盒模型

image.png

定位方式

image.png

image.png


目录
相关文章
|
16天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
7天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
8天前
|
前端开发 UED C++
《HTML 简易速速上手小册》第5章:HTML 高级布局技巧(2024 最新版)
《HTML 简易速速上手小册》第5章:HTML 高级布局技巧(2024 最新版)
27 0
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
11天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
14天前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
|
18天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
19天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
13 0
|
前端开发
精通CSS+DIV网页样式与布局--滤镜的使用
        在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来说说滤镜的使用,首先,小编来简单的介绍一下滤镜的概念,CSS滤镜并不是浏览器的插件,也不符合CSS标准,二而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的又累功能的集合。
1037 0
|
前端开发
精通CSS+DIV网页样式与布局--制作实用菜单
        在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括:项目列表、无需表格的菜单、菜...
1288 0