css盒子模型

最新推荐文章于 2024-10-01 23:20:42 发布

前端学习@

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量56

点赞数

文章标签： css 前端 html javascript 开发语言

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_52504437/article/details/128478780

版权

本文介绍了CSS中的盒子模型，包括内容区域的宽高、边框和内边距的设置，以及外边距在布局中的应用。文章强调了CSS的继承性、层叠性和优先级概念，并提到了谷歌调试工具在解决样式问题中的作用。此外，还讨论了Pxcookd的使用，特别是如何处理png和psd图片。文章通过新浪导航和新闻案例分析了外边距问题，推荐使用overflow:hidden解决行内元素的垂直内外边距问题。

摘要由CSDN通过智能技术生成

盒子模型

css三大特性
- 优先级
- 叠加计算方式
谷歌调试工具
Pxcookd的基本使用
盒子模型
问题
- 外边距的问题
- 行内元素的垂直内外边距

css三大特性

继承性
层叠性

优先级

在这里插入图片描述

叠加计算方式

在这里插入图片描述行内 id 类标签的个数来进行比较，继承最低
工作当中慎重使用

谷歌调试工具

遇到样式不出来，要学会通过调试工具找错
在这里插入图片描述光标来离符号近是英文，如果距离远，说明就是中文符号

Pxcookd的基本使用

png的图片用设计去量，psd的图片用开发模式

盒子模型

在这里插入图片描述

内容的高度和宽度

width height

边框boder

在这里插入图片描述
边框单方向设置
border-方位名词
盒子模型的尺寸

新浪导航小案列

在这里插入图片描述

内边距padding

padding可以当做复合属性使用
后面跟四个值：上右下左
三值：上左右下
二值：上下左右
在这里插入图片描述 box-sizing:border-box;内减模式

外边距margin

盒子与盒子之间的距离
在这里插入图片描述清楚默认的内外边距
版心居中
margin:0 auto

新闻案例

在这里插入图片描述

问题

外边距的问题

在这里插入图片描述最专业的解决办法：给父元素设置overflow：hidden

行内元素的垂直内外边距

在这里插入图片描述

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端学习@ CSDN认证博客专家 CSDN认证企业博客

码龄4年

35: 原创

38万+: 周排名

50万+: 总排名

1万+: 访问

: 等级

412: 积分

387: 粉丝

43: 获赞

29: 评论

39: 收藏

私信

关注

热门文章

分类专栏

vue2 6篇
问题分析 1篇
Ajax 1篇
JavaScript 8篇

最新评论

前端路由、vue-router常见用法、路由重定向、动态路由匹配、声明式导航 & 编程式导航、导航守卫
前端学习@: 谢谢
前端路由、vue-router常见用法、路由重定向、动态路由匹配、声明式导航 & 编程式导航、导航守卫
CSDN-Ada助手: 恭喜您的文章入围每日分享小能手「2023-05-15」榜单, 排名「14」, 一定要再接再厉哦, 创作更多高质量好文, 争取拿到更好成绩, 全部的排名请看: https://bbs.csdn.net/topics/615305760 更多创作活动请看: 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 上传ChatGPT/计算机论文等资源，瓜分￥5000元现金: https://blog.csdn.net/VIP_Assistant/article/details/130196121?utm_source=csdn_ai_ada_redpacket 新人首创任务挑战赛: https://marketing.csdn.net/p/90a06697f3eae83aabea1e150f5be8a5?utm_source=csdn_ai_ada_redpacket Microsoft Edge功能测评！: https://activity.csdn.net/creatActivity?id=10403?utm_source=csdn_ai_ada_redpacket 生物识别技术能否成为应对安全挑战的绝佳选择？: https://activity.csdn.net/creatActivity?id=10411?utm_source=csdn_ai_ada_redpacket 应届生如何提高职场竞争力: https://activity.csdn.net/creatActivity?id=10409?utm_source=csdn_ai_ada_redpacket 讯飞星火大模型将超越chatgpt？: https://activity.csdn.net/creatActivity?id=10407?utm_source=csdn_ai_ada_redpacket 职场新人备忘录: https://activity.csdn.net/creatActivity?id=10405?utm_source=csdn_ai_ada_redpacket VR vs AR：哪种技术更有潜力改变未来？: https://activity.csdn.net/creatActivity?id=10399?utm_source=csdn_ai_ada_redpacket “裸奔”时代下该如何保护网络隐私: https://activity.csdn.net/creatActivity?id=10401?utm_source=csdn_ai_ada_redpacket 蓝桥杯备赛指南分享: https://activity.csdn.net/creatActivity?id=10317?utm_source=csdn_ai_ada_redpacket 有哪些工具软件是一旦用了就离不开的？: https://activity.csdn.net/creatActivity?id=10397?utm_source=csdn_ai_ada_redpacket 量子计算：下一个大风口，还是一个热炒概念？: https://activity.csdn.net/creatActivity?id=10395?utm_source=csdn_ai_ada_redpacket
动态组件、插槽、自定义指令、Eslint和prettierrc配置、axios全局挂载
前端学习@: 谢谢
动态组件、插槽、自定义指令、Eslint和prettierrc配置、axios全局挂载
前端学习@: 谢谢
动态组件、插槽、自定义指令、Eslint和prettierrc配置、axios全局挂载
极客飞兔: 持我佬创作，优秀好文必须支持，欢迎大佬也来指点我一番

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。