静态页面常见问题 margin-top塌陷、padding把盒子撑大

一、静态页面 margin-top塌陷解决方法

１.当我们页面布局时，经常会遇见margin-top塌陷问题
　　margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父div包裹着一个div的时候，当给子div设置margin-top属性时，此时只是想让子div的边框距离父div边框有一段距离，而却出现了父div的顶端距离出现了位移，这就是margin-top塌陷的现象。

常用的方法
　　1.给父盒子设置溢出隐藏 overflow:hidden;
　　2.这个时候不要纠结，既然外边距用不了，就直接用内边距就行(这个时候要注意，　　　使用内边距时，会把父盒子撑开，解决方法第二点)

##二、padding把盒子撑大解决方法

当我们给一个盒子加入内边距时盒子会变大，这时会影响我们静态页面布局
解决方法　
　　在该盒子中设置一个属性
　　 box-sizing: border-box;
　　它会使盒子不再变大。

静态页面常见问题 margin-top塌陷、padding把盒子撑大相关推荐

html写静态页面容易写错总结
html写静态页面容易写错总结写静态页面的注意点,避免页面崩溃 1.整个页面在写之前首先应该先把大的框架搭出来,在去写里面小的细节.保证大的框架没有问题,里面有问题,大不了删了重写.(给大的框架加上 ...
(day20)web前端实现静态页面
检验自己一个月的学习成果,实现的是静态页面(小白学习一个月的成果) 欢迎各位大神参考和指点 PC端目标效果: 代码实现: HTML部分: <!DOCTYPE html> <htm ...
挂号平台首页开发（静态页面部分）
1.首先是设计稿 2.然后使用PxCook进行尺寸标注 3.字体信息去PS里看 4.首页框架代码编写 index.html <!DOCTYPE html> <html lang=&q ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
关于静态页面布局中的一些BUG
作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】
来源:黑马前端难度:⭐(简单)--适合刚学习html和css的新手小白源码和素材:链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: ...
HTML简单静态页面的编写
文章目录前言一.头部标签的编写 1.顶部的前半部分 2.顶部的后半部分二.中间标签的编写 1.中间部分二.底部标签的编写 1.底部前半部分 2.底部后半部分总结前言接下来的内容是,利用H ...
使用html5静态页面的总结,幸福西饼：静态页面制作项目总结
在coursera上学完了密歇根大学开的前端入门课,仍然不得要领,听朋友建议从网上找了个实站项目跟着撸了一遍代码,感悟比单纯上课多得多. 这个项目主要是复刻[幸福西饼]的主站和产品列表页,纯静态页面, ...

静态页面常见问题 margin-top塌陷、padding把盒子撑大

一、静态页面 margin-top塌陷解决方法

静态页面常见问题 margin-top塌陷、padding把盒子撑大相关推荐

最新文章

热门文章

静态页面 常见问题 margin-top塌陷、padding把盒子撑大

一、静态页面 margin-top塌陷解决方法

静态页面 常见问题 margin-top塌陷、padding把盒子撑大相关推荐

最新文章

热门文章

静态页面常见问题 margin-top塌陷、padding把盒子撑大

静态页面常见问题 margin-top塌陷、padding把盒子撑大相关推荐