讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > css教程 >

正文

0

0

div+css网页布局设计新开端（4）

黄舟

黄舟

发布时间：2016-12-29 14:23:11

|

1768人浏览过

|

来源于php中文网

原创

首先我们定义个长度宽度为500px的div，你可以看做是一个大盒子，为了能清楚的看到它的存在我们把它的边框显示实线

里面将放很多div 你可以理解一个大盒子里装其他小盒子
先放一个把

你会看到

589.jpg

图没截完全 ，可以看到这个里面div紧紧贴着大div的左上角

加上

立即学习“前端免费学习笔记（深入）”；

margin-top:5px;
margin-left:5px

会

590.jpg

margin是设置外边距，如果这里设置

margin-right:5px;
margin-bottom:5px

不会有效果
因为它的后边和下面没东西

下面看看内边距

仿虎嗅网在线视频教育门户源码2.0
仿虎嗅网在线视频教育门户源码2.0

仿虎嗅商学院在线视频教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML；首页和全局重新做了全面优化，方便大家无缝使用。

下载 


 




hello

效果一试就看的出来，非常简单

发现一个问题，在ie6和360浏览器 在div设置了长度和高度的前提下，居然能够自适应，也就是内容无论有很多少，都不会胀破div，但原来的长度和高度改变了
其实这是不符合规范的。火狐浏览器是正常的



 



5555555555555555555555555555555555555555555555555555555555555555555555555

大家可以试试看看，这也算是浏览器兼容问题了

在火狐浏览下运行是591.jpg

正确的

在IE6浏览器是592.jpg

错误的

一个div的长度和高度是外边距（两个）+边框（两个）+内边距（两个）+内容长度

反正记住一点，div的长宽度绝对不是指内容的长宽度

 以上就是div+css网页布局设计新开端（4）的内容，更多相关内容请关注PHP中文网（www.php.cn）！

相关文章

css弹性盒子多行换行排列不生效怎么办_结合flex wrap实现换行

css 布局中的间距与对齐_使用 margin 和 padding 调整元素间距

css margin 负值有什么作用_布局微调常见场景说明

css网页配色方案实战_为网站设计配色并实现

css浮动与清除浮动在表单布局中的运用

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：div+css网页布局设计新开端（3） 下一篇：div+css网页布局设计新开端（5）

作者最新文章

HTML5 Placeholder属性的详情介绍

2018-05-30 09:51

html中关于标签的全部属性的使用总结

2018-05-30 14:32

php如何快速实现数组去重的实例

2018-05-30 15:03

php中关于IMAP如何收取邮件的方法介绍

2018-05-31 09:38

PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析

2018-05-31 10:28

从零开始打造自己的PHP框架的视频资料

2018-05-31 10:45

php基础知识总结（新手入门必备）

2018-05-30 14:26

ReactJS中表单的单选多选与反选的实现方法

2018-05-30 09:45

JavaScript中typeof的使用方法介绍

2018-05-30 11:42

JavaScript中confirm()方法的使用介绍

2018-05-30 10:29

热门AI工具

更多
DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台
豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型
通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型
腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格
文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作
讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具
即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成
ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

更多
Java 项目构建与依赖管理（Maven / Gradle）
Java 项目构建与依赖管理（Maven / Gradle）

本专题系统讲解 Java 项目构建与依赖管理的完整体系，重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例，帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程，提升在实际团队开发中的工程能力与协作效率。

11

2026.01.12

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐，阅读专题下面的文章了解更多详细内容。

106

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总，阅读专题下面的文章了解更多详细内容。

64

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总，阅读专题下面的文章了解更多详细内容。

139

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总，阅读专题下面的文章了解更多详细内容。

13

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总，阅读专题下面的文章了解更多详细内容。

19

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口，涵盖国际版与俄语版，适配移动端访问，一键直达搜索、地图、新闻等核心服务。

93

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口，包含漫蛙manwa漫画防走失官网链接，确保用户随时畅读海量正版漫画资源，建议收藏备用，避免因域名变动无法访问。

480

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站，涵盖教程、实战与文档，适合零基础到进阶开发者，助你高效掌握PHP编程。

52

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
仿虎嗅网在线视频教育门户源码2.0
南方数据企业网站管理系统11 bulid 080901 全屏修正版
HMCSS通用企业网站系统1.0
YIXUNCMS中秋专版2.0.4
酒店管理系统项目源码(三层开发)
Angel工作室企业网站管理系统1.2
樱桃企业网站管理系统3.1 bulid20130614

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 18.5万人学习

最新文章

更多
css盒模型如何影响背景显示范围_理解css background绘制区域
css浮动列高度不统一如何解决_使用Flexbox或CSS Grid解决高度问题
css 框架中的 Foundation_使用 Foundation 快速开发响应式布局
css响应式布局图片边距不均怎么办_使用gap或margin百分比控制
css 浮动列表最后一行错位怎么办_为最后元素清除浮动
css弹性盒子多行换行排列不生效怎么办_结合flex wrap实现换行
css 布局中的间距与对齐_使用 margin 和 padding 调整元素间距
css margin 负值有什么作用_布局微调常见场景说明
css网页配色方案实战_为网站设计配色并实现
css浮动与清除浮动在表单布局中的运用
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部