- 博客(12)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 overflow在移动端失效
在给元素一个绝对定位,body一个相对定位。然后给body一个overflow溢出隐藏可以发现pc端的可以隐藏，但是在移动端就溢出隐藏就失效了。解决方案,不要在body上定位，我们可以在加了绝对定位的父元素上加定位就可以解决。...
2020-12-24 18:17:09
1077
1
翻译 绝对定位与浮动与overflow:hidden之间的联系
BFC：上下文块状格式化，是一种表现规则，有独立的渲染区域，他的子元素可以被BFC定义位置。说明：BFC与其他块状元素不同的是他脱离文档流，隔离开不受其他元素的影响，自己定义自己的样式位置，以及其他属性。触发条件：1.当添加了float属性，且float不为none时2.添加定位，positio值为absolute或fixed3.将元素强制转换类型（display：inline-block，table-cell，table-caption）4.有根元素或者存在父元素，或其他包含元素5.块元素添
2020-12-24 18:04:20
291
1
翻译 图片在盒子里面垂直居中的案例
当我们想要获得图片的垂直居中，可采用定位的方式来实现。现在我选择用另一种方式来实现图片的垂直居中。首先，先给盒子定义宽高满足于图片在盒子内能有足够的空间占位。然后给盒子3个属性:display: table-cell;vertical-align: middle;text-align: center;此时我们发现图片并没有完全的垂直居中，而是图片往上移动了一点距离。从而我们有分析得出，图片在垂直方向上默认的对齐方式是vertical-align:baseline（默认），元素放置在父元素的基线
2020-11-23 13:09:56
4874
原创 浮动对多个li颠倒顺序的解决方案
当我们使用li来实现并成一排来布局时，常常使用浮动来使竖排的多个li排成一行显示。当我们对多个li使用左浮动时，第一个li排在一行中的第一个。当我们对多个li使用右浮动时，第一个li排在一行中的最后一个。这就导致了li的顺序颠倒，为了方便代码的美观，不推荐对li进行颠倒书写方式。而是采用这样一种方法:先对ul采取一个右浮动，然后再对li采取一个左浮动就能完美的解决li顺序颠倒的情况。...
2020-11-22 23:17:14
1724
原创 浮动的盒子对img的影响
浮动只对下面的标准流盒子起作用，让其浮动的盒子压住下面的标准流盒子示例1:让第一个盒子div1左浮动，第二个盒子就会移上去被div1盒子压住。示例2:给第二个盒子一个左浮动，图片并没有像我们想象的那样被div2压住，而是并成一排排布。或者又是因为图片为行内元素的原因，所以在此再给图片一个display: block;结果还是并成一排显示。示例3:前面的例子对盒子进行浮动测试发现，盒子与盒子之间浮动的压住与被压住的情况以及图片并不会随着盒子的浮动而被压住，而是并排显示。那么我们再对图片进行浮
2020-11-22 13:19:28
1020
1
翻译 行内元素里的置换元素与非置换元素
以前，我们知道行内元素不能设置宽度和高度，但是当我们知道行内元素给其设置宽高，是无效的。既然如此，当引入一个img图片，我们想到，行内元素设定宽高是无效的，那么给它一个宽度和高度，既然发现图片会随着宽度和高度设定的改变而发生变化。这里我们就可以引入一个概念，置换元素。...
2020-11-22 11:29:23
218
原创 margin与padding对行内元素的影响
行内元素与块级元素一样，都是盒子模型。块级元素的margin与padding对其有效，而行内元素是否也与块级元素一样得到margin与padding对其产生相同的作用呢？我们了解到，给行内元素设置宽高是无效的，但是用其它的块级或行内块盒子来撑开行内元素的盒子时，行内元素只有宽度被撑大，而高度只有部分被撑大。...
2020-11-21 10:21:57
347
转载 text-align简单运用
text-align:通常情况下，我们只是用来设置文本的对齐方式。但有的时候，我们也可以使用该属性进行元素的对其，以及进行布局。一：基本概念 1：W3C标准中，对text-align这样说明：它是一个基本的属性，它会影响一个元素中的文本行相互之间的对其方式。 2：基本取值： left,right,center,这三个取值，想当直接，就是居左，居右，据中。其中，在不设置text-align属性时，浏览器默认是居左的。...
2020-11-20 23:25:01
9869
原创 背景图片与图片对盒子的影响
背景图片:对于一个给定的行内块或行内元素的盒子，不给它设置宽高，当在里面插入背景图片时，背景图片不会撑大且不撑开里面的盒子，故而不会显示。 当给上述行内块盒子一个宽度和高度时，背景图片也不会撑大和撑开盒子，而是在已有的宽度和高度里显示背景图片，如果背景图片宽高小于盒子，则显示部分。如果背景图片宽高大于盒子，则显示部分背景图片。总之，只要背景图片的宽高有一方大于盒子，则那一方不显示。图片:对于一个给定的行内块元素的盒子不给它设置宽高,当在里面
2020-11-20 23:04:21
889
原创 css外边距margin塌陷问题与解决方案
css外边距margin塌陷问题与解决方案我们先来了解一下什么是外边距的塌陷，再来论解决方案。首先，外边距的塌陷是在标准流中，具体包括两个方面1.父级与子级之间的塌陷:当子盒子设置margin-top后，我们首先想到的是子盒子会相对于父盒子向下移动，但是父盒子也会跟着掉下来，这就是父子级之间的塌陷。示例1:第一步先准备两个盒子: .father{ width: 300px; height: 300px; ...
2020-11-19 22:57:14
491
原创 margin-left对最后一个盒子的影响
margin-right对最后一个盒子的影响如上图所示，里面有一个大盒子div，其版心为1200px，其中有6个dl盒子，在编写完dl盒子里面的内容后，给它一个属性值margin-right，此时让margin-right处于临界值让dl盒子隔开一段距离直到最后一个盒子跑到下一行。当临界值变小，最后一个盒子也就会上来与其他盒子排成一行显示，此时最后一个盒子里的content部分右边部分还有...
2020-11-19 18:49:38
281
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人