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

css div_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:27:38
原创
1346人浏览过

前言：width和heigth不会相互作用 ，各自为政！

 

1、当div设置了固定的长度和宽度后

高度和宽度都行！：不管里面有没有内容（可以无视内容），div就是一个框子在那（默认无边框）！即使内容超出，尺寸也不变！

#select_box {
WIDTH: 330px; HEIGHT: 40px;border:2px solid red;
}

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



 

显示效果：

2、若是div设置为百分比的形式

宽度无论如何都行！：width:50%;能行！ 无视内容！ 即使内容超出宽度框的宽度还是50%，内容超出框而存在；

高度无论如何都不行！：heigth：50%则不行 高度为内容的高度，如要设置高度 需要用height:50px 则可以，此时即使没有内容也会有框出现！

注意width总是以外层的对象为比较标准的！

纯CSS计时器
纯CSS计时器

一款纯 CSS 实现的计时器，实现的原理为使用 CSS 选择器结合 checkbox 是否选中，配合 CSS 动画进行「位移」变更数字，以达到计时的效果。

纯CSS计时器 74
查看详情 纯CSS计时器

 

3、嵌套div形式

绝大部分情况是：

父子互不干涉 两个框同时出现！

追加的内容会显示

 

4、若在div中设置了BACKGROUND: url(../images/ubox-select.gif) no-repeat 0px 0px

4.1、div很小时  只显示图片的固定区域！

4.2、div很大时，图片具体情况根据：no-repeat 0px 0px参数而定！

 

 

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：DIV+CSS的30条进阶技能_html/css_WEB-ITnose 下一篇：DIV+CSS基础_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Joplin嵌入式预览，HTML+CSS代码随笔记跳舞！ Joplin可通过代码块、WebClipper、Base64附件和外部编辑器实现HTML+CSS嵌入与预览。1、用html或css插入可高亮的代码块便于查看；2、通过JoplinWebClipper保存已渲染的网页快照，保留视觉效果；3、将含样式的HTML文件转为Base64编码作为附件嵌入，供解码后浏览动态效果；4、启用外部编辑器功能，在VSCode等工具中实时编写并预览，修改后自动同步至笔记，形成开发闭环。
2025-11-16 07:55:17
312
如何收藏html资料_HTML网页/资源收藏（书签/工具）方法 答案：可通过浏览器书签、在线工具、本地保存、笔记应用和自建导航页五种方式收藏管理HTML资源。使用浏览器书签可快速保存并分类网页；借助Pocket、Raindrop.io等在线书签工具实现跨设备同步与标签管理；通过“另存为”功能将网页保存为本地文件确保长期可用；利用Notion、印象笔记等笔记软件剪藏网页并添加批注形成知识库；最后可创建静态HTML导航页集中管理所有链接，支持分类展示与在线访问。
2025-11-16 07:41:35
141
HTML跨域资源共享漏洞怎么查找_CORS配置不当导致跨域漏洞查找方法 答案是检查服务器响应头中CORS配置是否过于宽松或反射Origin头。首先通过浏览器开发者工具观察请求的Origin头及响应头中的Access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段；若Allow-Origin为*且Allow-Credentials为true，则存在高危漏洞；其次使用cURL或Postman手动测试，发送自定义Origin头请求，验证服务器是否反射该值；再利用BurpSuite等工具自动化检测，修改Ori
2025-11-16 03:49:09
773
如何在Nano中快速编辑HTML片段的详细教程 Nano是终端中编辑HTML的理想工具。启动命令为nanoindex.html，可直接输入或粘贴HTML代码；使用Ctrl+W搜索、Ctrl+\替换内容；通过安装语法高亮包并在~/.nanorc中添加include/usr/share/nano/html.nanorc启用HTML高亮；保存用Ctrl+O，退出用Ctrl+X，未保存将提示确认。
2025-11-16 03:09:36
594
如何提取html代码_HTML代码提取（工具/正则）与内容获取方法 优先使用HTML解析库提取内容，如Python的BeautifulSoup、lxml或JavaScript的Cheerio，能准确处理结构和编码；正则表达式仅适用于简单、固定格式的片段，易因嵌套或异常出错；提取文本时需去除标签并处理实体字符，推荐结合Selenium处理动态网页。
2025-11-16 02:21:12
937
如何在CodePen中实时预览HTML编辑的详细教程 答案：在CodePen中实时预览HTML只需开启自动更新并编辑代码。登录后创建或打开Pen，进入含HTML、CSS、JS三编辑区及右侧预览的界面；在HTML面板修改内容，如添加div元素，停止输入1–2秒后预览自动刷新；确保右上角“Auto-updatingpreview”已启用，并可切换设备视图测试响应式布局；分离预览窗口便于全屏调试；同时注意CSS样式与JS交互对HTML展示的影响，实现高效前端开发。
2025-11-16 02:09:33
452
html如何访问接口_HTML接口（API）调用（fetch/AJAX）与数据交互方法 HTML本身不能直接访问接口，但通过JavaScript的fetch或AJAX方法可实现与后端API交互。fetch基于Promise，语法简洁，适用于现代浏览器；AJAX兼容旧版本浏览器，适合老旧环境。两者均可发送GET、POST请求，获取并动态更新数据。在HTML中通过标签集成JavaScript代码，可监听事件或页面加载时调用API。需注意CORS、错误处理、敏感信息保护及用户体验。推荐新项目使用fetch，旧项目兼容考虑AJAX。核心为HTML提供结构，JavaScript实现通信。
2025-11-16 01:35:08
407
如何解决团队在线HTML编辑权限管理的解决办法 选择支持细粒度权限的协作平台如GitHub、Notion等，实现只读、评论、编辑等角色控制；2.建立RBAC机制，按角色分配操作权限，结合分支保护与CI/CD流程防止非法修改；3.使用Git进行版本控制，通过PullRequest审核和提交记录追踪确保修改可审计；4.隔离生产环境，搭建测试环境供编辑预览，经审批后通过部署流程上线，关键页面锁定以防误改。
2025-11-15 23:59:02
321
html转pdf转换器_html转pdf网页版工具 答案：推荐使用html2pdf.com在线工具，支持网页链接或HTML代码转PDF，保留排版、图片和字体，操作简单无需安装软件，提供自定义页面设置与多语言支持，转换速度快且保障隐私安全。
2025-11-15 23:59:02
936
如何在Atom中集成HTML预处理器Sass的详细教程 首先安装Node.js和DartSass，再在Atom中安装atom-sass等插件，配置文件结构与编译规则，通过插件或命令行监听实现.scss文件自动编译为CSS，并在HTML中引入生成的CSS文件，从而提升开发效率。
2025-11-15 23:58:02
257
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部