一,无意义的标签div ,span
div:大的区域的意思,默认换行
span:小的行内的意思,默认不换行
二,经典的盒子模型
div就比喻成1个盒子
盒子应该有的内容:
边框,border
高度, height
宽度, width
内容与边框的距离(内边距),padding
盒子与盒子之间的距离(外边距) margin
三,ie和其他浏览器中宽度高度问题
ie浏览器的宽度包括了 border padding的宽度,其他浏览器宽度不包括这些宽度,为了解决这个兼容性问题,所以引入!important 其他浏览器会参照这个关键字,ie浏览器不参照这个关键字
width:400px !important(其他浏览器)
width:350px
四,和页面布局有关的css属性
从上往下写是文档流,如果设置了position就脱离了文档流
1,position 默认是static
a,绝对定位absolute 相对于浏览器的左上角的点而言,配合top,left两个属性使用
top:相对于顶部的距离 left:相对于左边的距离
z-index只能结合absolute使用,决定层的覆盖关系
应用场景是结合js做漂浮的广告
b,相对定位relative 相对于原来文档流的位置变化,配合top,left两个属性使用
top:相对于顶部的距离 left:相对于左边的距离
c,固定定位 fixed 不会随着滚动条变化而变化固定位置,配合top,left两个属性使用
2,text-align 设置文本位置(水平方向设置居中等),默认的盒子中的文本内容是靠左的left,可以设置为center,right
3,line-height:由于内容都是在行的中间,所有设置这个属性可以达到内容垂直居中的效果
4,display
inline将换行的标签改为不换行的标签,
block将不换行的标签变为换行的标签
none:隐藏此区域,内容也隐藏,位置变化
visibity:hidden 内容隐藏,位置不变,还是会占用原来的位置,这是它跟display:none的区别
5,overflow内容超出部分处理
hidden:超出部分隐藏
scroll:超出部分隐藏,无论是否超出都会出现滚动条
auto:超出部分出现滚动条,没有超出部分不出现滚动条
6,float漂浮 脱离文档流,出现新的一层,和position开启新的一层一样,不在一层
如果上层有足够的空间才会上浮,如果没有足够的空间,则会换行
clear:left设置它自己左边不能有浮动块,只有自己换行
clear:both设置它自己左右边都不能有浮动块
clear:right设置它自己右边不能有浮动块
分享到:
相关推荐
下面,我们将深入探讨div+css布局的相关知识点。 1. **Div元素**:HTML中的`<div>`(division)元素是一个通用容器,用于组合HTML元素,为页面提供结构。通过设置`<div>`的类或ID属性,我们可以对多个元素进行分组...
描述中的关键词如"div+css"、"web标准"、"div+css布局"、"div+css实例"、"div+css模板"揭示了这些模板遵循Web开发的最佳实践,旨在实现结构与表现的分离,提高网页的可维护性和可访问性。Web标准通常指的是W3C制定的...
在描述中提到的“table布局网页转换为div+CSS布局的转换软件”能够快速高效地完成这一转变,无论是对于简化网页代码,还是提升网页性能,都有显著效果。 软件支持绝对定位和流定位,这意味着它可以处理复杂的布局...
《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...
【标题】"DIV+CSS.rar" 是一个关于网页布局技术的压缩包,主要围绕着 `div` 和 `CSS` 进行讲解。`div` 是HTML中的一个块级元素,常用于网页布局,而 `CSS`(层叠样式表)则是用于控制网页元素样式和布局的重要工具。...
3. **提高性能**:Div+CSS布局通常比Table布局加载更快,因为浏览器解析CSS比解析Table更高效。 4. **支持响应式设计**:通过CSS的媒体查询功能,转换后的代码更容易实现跨设备兼容,适应不同屏幕尺寸的设备。 5. **...
在网页设计领域,Div+CSS布局是现代网页开发的基础,它极大地提升了网页的可维护性和易用性。这个“Div+CSS布局入门+实例教程”是为初学者设计的,旨在帮助他们掌握这一核心技术。 Div(Division)是HTML中的一个...
DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全
在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...
新手通过这门教材可以在两天内掌握基本的div+css布局技巧。以下是对标题和描述中涉及知识点的详细说明: 1. **规划网站**:在开始布局前,首先要规划网站的结构,明确各个部分的功能和尺寸。例如,导航条(Main ...
3. **定位方式**:CSS提供了绝对定位(absolute)、相对定位(relative)、固定定位(fixed)和静态定位(static)四种方式,使得`div`元素可以灵活地在页面上布局。 4. **盒模型**:理解CSS盒模型是关键,它包括...
DIV+CSS网站布局从入门到精通 源代码 朱印宏 邓艳超 编著 北京希望电子出版社 2011年1月 本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析,分别从不同...
这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点: 1. **DIV元素**:`<div>`(division)是HTML中的一个通用容器元素,用于组织页面内容。...
在网页设计过程中,如何应用DIV+CSS布局是一个非常重要的问题。首先需要构思网页的布局,使用PhotoShop或FireWorks等图片处理软件将需要制作的界面布局简单的构画出来。然后,需要根据构思图来规划一下页面的布局,...
### div+css布局实例——淘宝网首页分析 #### 一、引言 随着互联网技术的不断发展,网站设计已经从简单的图文混排发展到了更加注重用户体验和交互性的阶段。在这个过程中,div+css布局作为一种灵活且高效的网页...
DIV+CSS 标准布局DIV+CSS 标准布局DIV+CSS 标准布局DIV+CSS 标准布局
1. **CSS布局**: 这些源码实例展示了如何利用CSS来实现响应式设计,使网页在不同设备上都有良好的显示效果。CSS布局技术包括流体布局、网格系统、Flexbox和Grid布局,其中Flexbox适用于一维布局,Grid则更适合二维...
在Div+CSS布局中,图像不仅可以作为内容的一部分,还可以作为背景图,通过CSS的background-image属性进行设置,实现背景平铺、裁剪、定位等效果。 学习Div+CSS,首先要熟悉HTML的基本结构和Div元素的用法,然后掌握...
`div+css`是一种常见的网页布局技术,广泛应用于现代网页开发中。本教程旨在深入解析`div`与`css`如何协同工作,构建出美观且响应式的网页布局。 `div`(division)在HTML中是一个通用的容器元素,用于组织和分隔...
本篇文章将重点围绕Div和CSS布局展开,探讨相关知识点。 首先,Div是HTML中的一个块级元素,全称为“division”,意为“分隔”或“分区”。在网页设计中,Div常被用作容器,用于组织和管理页面内容。通过设置Div的...