H5C3练习心得(小米商城)12.11

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则是单独的转换,不具备此功能。
 


 

  • 27
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值