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


目录
相关文章
|
20天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
43 7
|
20天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
29 6
|
20天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
31 5
|
20天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
25 5
|
23天前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
19 1
|
26天前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
26天前
|
前端开发 容器
Html布局 BFC的概念和作用讲解
BFC(Block Formatting Context)是Web页面的CSS渲染机制之一,它如同一个独立的容器,确保内部元素的变化不会影响外部布局。本文介绍了BFC的基本概念、作用及实现方法,包括通过设置`float`、`position`、`overflow`属性或使用伪元素等方式使元素成为BFC,有效解决布局中的边距塌陷等问题,优化网页布局效果。
25 2
|
6月前
|
前端开发 容器
HTML <div> 和<span>
【6月更文挑战第2天】HTML <div> 和<span>。
38 5
|
7月前
|
前端开发 容器
HTML <div> 和<span>
HTML <div> 和<span>
|
前端开发 容器
HTML的层(div)和块(span)
大多数 HTML元素被定义为块级元素或内联元素。“块级元素”译为 block level element,“内联元素”译为 inline element。那什么是块级元素,什么又是内联元素呢?它们分别是用来做什么的呢?
115 0
HTML的层(div)和块(span)