1.为什么要清除浮动?
浮动的定义:非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开。此时,内容会溢出到容器外面影响布局。这种现象被称为浮动(溢出)。
为了防止溢出,所以要清除浮动。
固定格式如下:
.clearfix::after {
/* 清除浮动 */
content: "";
display: block;
clear: both;
}
2.为什么要设置内边距和外边距为0?(其实还不太清楚)
默认情况下,相应的HTML块级元素存在外边距,所以最开始的时候要将块元素的margin属性设置为0,覆盖掉默认样式。
h3,
h4,
p,
ul {
margin: 0;
padding: 0;
}
3.在做多个盒子的页面布局时可以不使用很多个div,而是使用一个div里面放ul-li,避免太复杂。
4.消除img标签所产生的间隙(就是两个图片之间会有空白区)
首先为什么会产生间隙呢?
因为img属于行内元素,而行内元素的对齐方式是通过其父元素的基线对齐的,而撑开的行高确是元素整体的高度,以底线对齐的,而底线与基线之间是有距离的,所以产生了间隙。
.product-hot img {
/* 变成块级元素,消除img标签所产生的空隙 */
display: block;
而常用的消除间隙的方法有:
1)img { display:block};
将其改变为block元素,但是该方法太过粗暴,相当于从根本上改变了img。
2)img {vertical-align:top;}
改变其垂直对齐方式
3)div {font-size:0};
把父元素的文字大小设置为0
4)div {line-height: 0};
把父元素的行高设置为0
5)img {float: left};
使用float进行浮动
5.块元素,行内元素到底是什么啊?有什么区别?
块元素:是指在页面上以块的形式显示的元素,他们会独占一行,并且在默认情况下会占满其父元素的宽度。
常见的块元素有<div>,<p>,<h1>~<h6>,<ul>,<li>等
块元素的性质:
1.独占一行,垂直排列
2.默认占满父元素的宽度
3.可以设置宽度高度内外边距等式样
4.可以包含其他块级元素和行内元素
行内元素:是指在页面上以行的方式显示的元素,它们不会独占一行,可以与其他行内元素在一行
常见的行内元素:<span>,<a>,<img>,<em>,<strong>等
行内元素的性质:
1.不会独占一行,水平排列
2.宽度默认由内容决定,不可设置宽度和高度
3.对边距和内边距的处理有一些限制
4.不能包含块级元素,但能包含其它行内元素
自己的分析:块元素是可以设置宽高的,无论里面内容有多少,宽高是一定的,可能内容没有充满;但行内元素的是默认由内容撑开的,内容有多少,就有多少宽高,没有内容的地方就没有宽高。
6.特别的<img>元素被称为可替换元素
<img>是一个特殊的元素类型,被归类为可替换元素,可替换元素是指其显示的内容不是由其内容决定的,而是来自外部资源或通过其他方式动态生成的内容。
特点:
显示的内容来自外部资源(例如图片文件)。
可以设置替代文本 (alt),在图片无法加载时提供替代内容。
可以设置宽度 (width) 和高度 (height) 属性,控制图片的显示大小。
可以使用 CSS 样式属性来调整图片的样式。
7.关于行内元素对边距与内边距的限制及处理
定义:
行内元素对边距与内边距的限制,是指在水平方向上,给行内元素设置内外边距都会生效,但在垂直方向上,给行内元素只能设置外边距,设置内边距无效,虽然在显示上会扩大元素的范围,但对周围元素没有影响。
特殊的是<img>元素,虽然<img>是一个内联元素,但是它是可以在垂直方向上设置内边距的,因为它被视为一个替换元素,它的内边距会影响到替换元素的内容。
如何处理:
1.对于设置了绝对定位的行内元素,可以通过设置top,bottom,left,right属性来控制元素的位置,从而避免元素内边距和外边距的影响
2.对于未设置绝对定位的行内元素,可以将通过将元素转换成块级元素,再来设置margin和padding属性来控制元素的内边距和外边距
<1>转换方式
块级元素=> 行内元素 设置style属性:display:inline
行内元素=>块级元素 设置style属性:display:block
行内元素=>(行内)块级元素 设置style属性: display:inline-block
<2>display:block与display:inline-block
两个都是将行内元素转成块级元素,但是我们上面在区别中说到了,块级元素一般单独占一行,如果我们想把行内元素转成块级元素,但又不让它单独占一行,就可以使用display:inline-block。display:block则是单独的转换,不具备此功能。