内外边距、浮动、布局相关

关于清除元素的内外边距：

1、行内元素只有左右边距、没有内外边距、内边距在ie6等低版本的浏览器中也会有问题。尽量不要给元素指定行内的内外边距；

2、外边距的合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并；

相邻块元素垂直外边距的合并：

当相邻两个块元素相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象称之为相邻元素垂直外边距的合并，又称之为外边距的塌陷。

嵌套块元素垂直外边距的合并：

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案

可以为父元素定义1px的上边框和上内边距

可以为父元素添加overflow：hidden；

关于padding不会撑开盒子的情况

注意tips：

1、宽度属性width和高度属性height仅仅适用于块级元素，对行内元素无效（img标签和input例外）；

一点妙用【如果已经给行内元素添加了浮动，此时不需要转换这个元素也可以有宽高！】

2、计算盒子模型的总高度时还应该考虑上下两个盒子垂直外边距合并的情况；

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子的大小；

设定两个盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>padding盒子不会撑开的情况</title>
</head><style>.father {height: 200px;background-color: pink;width: 200px;/* 因为父盒子有宽度给定值了，所以盒子被撑开； */}.son {padding-left: 30px;/* 儿子没有给宽度，用的是默认，所以不会被撑开； */}}</style>
<body><div class="father"><div class="son">123</div>
</div>
</body>
</html>

关于盒子阴影

前两个属性必须写

例：

注：参照于小米盒子

关于浮动

css的定位机制有三种：普通流（标准流）[普通流就是一个网页内标签元素正常从上到下、从左到右排列顺序的意思，即普通流布局 ] 、浮动、定位

tips：

关于用 display：inline-block用于布局会产生间隙的问题。

关于浮动移动的内幕特性

浮动脱离标准流、不占位置、会影响标准流。浮动只有左右浮动。

浮动首先创建包含块的概念，也就是说浮动元素总是找理他最近的父元素对齐，但是不会超过内边距的范围。

浮动元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素会和上一个元素的顶部对齐；

如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐

一点妙用【如果已经给行内元素添加了浮动，此时不需要转换这个元素也可以有宽高！】

夫盒子里面的子盒子，如果某一个子盒子有浮动，其余子盒子都需要浮动，这样才能行对齐显示！

浮动的目的就是为了让块级元素在同一行显示；

三种布局

更多专业前端知识，请上【猿2048】www.mk2048.com

内外边距、浮动、布局相关相关推荐

html定义盒子距离顶底端像素,css - 盒子内外边距
css - 边距元素内边距内边距是指元素包含的内容离元素边框之间的间距,内边距不能设负值.内边距(padding).(边框)border都会撑大盒子,在浏览器中显示的元素的尺寸可能包含了盒子的pa ...
浮动和清浮动，内外边距和margin的坑
浮动:使元素脱离文档流,按照一定的方式排列,遇到相邻的浮动元素或者父级的边界停下来. 可以往left,也可以往right 一般建议用ul.f>li.s编写,(<ul></ul& ...
前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
css --- [读书笔记] 盒模型(边框、内外边距)
说明源代码学习盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距能说出内边距的作用,设置不同数值分别代表 ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
2021-04-05 web前端CSS之权重，盒子边框内外边距
视频学习:黑马程序员pink老师笔记:层叠性相同选择器给设置相同的样式--如果样式冲突,就近原则样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
内边距和外边距，清除默认的内外边距
内边距(padding)--边框与内容之间的距离 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距 p ...
html网页清楚内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一样,因此我们在布局前,首先要清除下网页元素的内外边距. * {padding: 0px;margin: 0px;} 注意:行内元素为了照顾兼 ...
html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...

内外边距、浮动、布局相关

内外边距、浮动、布局相关相关推荐

最新文章

热门文章