css内外边距用%表示时该怎么计算

Posted 2023-05-04

css内外边距用%表示时该怎么计算

参考技术A 规范中注明
外边距margin
的百分比值参照其包含块的宽度进行计算。
举个栗子——父盒子width：1000px；height：800px；，，子元素margin：10%；
那么其margin换算成px就是
1000px
×
10%=100px。

7.3日小结

html是超文本标记                   CSS是层叠样式表

块级元素与行内元素的区别

1.换行（块级元素不换行，行内元素要换行）

2.宽高（行内元素不可以设置宽高）

3.内外边距（块级元素上下左右都有内外边距，而行内元素有一边是没有内外边距的）

盒模型分为两种

1.标准盒模型（例：一个盒子的实际宽度为100px，padding为20px，border为10px，那么此盒子的实际宽度为100+（左右撑开的padding）40+（左右边框）20=160px)

2.IE盒模型（同例，但是此盒子的实际宽度为100px;注：IE盒子的宽度就等于此盒子的实际宽度）

伪元素选择器（...：after，...：first）

兄弟选择器

div+p（div后面的第一个p元素）

div~p（div后面的所有p元素）

CSS的两大核心概念：（层叠，继承）

清除浮动

1.在父元素里加一个空的div（<div class=:"clear"></div>）然后在style样式里面添加样式.clear{clear:both}；

2.overflow：hidden（写在父元素的类名下面）

3.在style样式里的父元素类名下添加.父元素类名：after{content：“要添加的内容”；display：block；clear：both：}

解决子元素动父元素跟着动的方法

1.在父元素的类名下加：overflow：hidden；

2.在父元素的类名下加：border：1px ... ...;

3.在父元素的类名下加：padding-top:1px;

IFC

1.只要有行内元素就会有IFC产生

2.行盒的高度酒取决于现主行的最高元素的高度

写移动端开发网页的单位区别

rem(css3新出单位）默认根元素的大小，跟着根元素大小一起变化。（html标签就叫根元素，它的默认大小是16px）

em就等于自身font-size的大小

px不随网页大小而变化