qq_37621289-CSDN博客

原创父亲高度给定，儿子内容超出父亲高度，会怎样显示

如果父亲的高度给定，儿子的内容不是很多，没有超出父亲的高度，显示效果见下：显而易见，下面的盒子是和父亲对齐的。如果儿子的内容太多，超出父亲的范围，会这样显示：可以看到对下面盒子的布局并没有影响，它还是和父亲对齐的，只不过和儿子会有一部分的重叠。遇到这种情况，可能是因为沿用了之前的样式，而之前设置的盒子高度又太小，所以需要设置新的样式层叠掉上面的样式。...

2018-10-10 11:39:17 288

原创图片和文字对齐

想要完成如下的布局：图片和文字垂直对齐，相距100像素。方法一：用绝对定位方法二：用浮动注意：如果给了行高，就默认给了高并且和行高相等，所以p中的文字能够垂直居中。两种方法的margin-left值不一样，是因为绝对定位是完全飘起来的，而浮动只是半脱标。...

2018-10-09 21:01:14 284

原创浮动是半脱标，绝对定位是完全脱标

浮动是半脱标：1。若将子盒子设置成浮动，它是不会超出父盒子的内边距的。但是如果强制给子盒子一个负的margin-left值,它就会超出父盒子的内边距了。给父盒子一个内边距，并将子盒子设置为浮动，编写代码如下：显示结果如下：可以看到浮动的盒子不会超过父亲内边距的范围。为了进一步验证浮动的特性，强制给子盒子一个负的margin-left值，结果子盒子会往左走10像素的距离，超出了父盒子的...

2018-10-09 19:56:13 1859 1

之前一直有一个疑问：对于左右摆放的两个盒子，在水平方向上都可以自由移动，如果给左边盒子一个margin-right值，是左边的盒子往左走，还是右边的盒子往右走。答案是后者。对于外边距，看的时候只看一个盒子，不要两个盒子一起看，否则容易混淆。对于一个盒子来说，给它一个margin-left，盒子会走。给它margin-right，盒子是不动的。如果想让盒子走只能通过设置其margin-right值...

2018-10-08 10:45:35 2159

原创关于按钮

在写页面的时候，发现按钮里面的文本会自动居中，不需要设置水平和垂直居中。通过测试来研究按钮都有哪些默认的属性。编写代码如下：显示结果如下：可以得知：input按钮里面的文本会默认水平以及垂直居中；盒子默认有一个内边距；默认有一个边框。对于button元素：可以得知：button元素里面的文本会默认水平以及垂直居中；盒子默认有一个内边距；默认有一个边框。从结果上看，可以得知行内...

2018-10-07 19:17:03 138

原创 margin:0 auto什么时候会失效

对于普通的盒子，margin auto是不会失效的。对于浮动的盒子，margin auto会失效。对于没有边偏移的相对定位的盒子，margin auto是有效的。对于有上下边偏移的相对定位的盒子，margin auto是有效的。对于有左右边偏移的相对定位的盒子，margin auto也是有效的，只是在居中的基础上会偏差一个left或right值。当left或right为0时...

2018-09-30 16:00:05 12285

原创给行内元素设置padding和margin是否有效

块级元素的padding和margin值的设置都是有效的。行内元素和块级元素一样，都是盒子模型。但是今天做网页时发现给span设置margin-top值并没有效果，所以就想检测一下行内元素的padding和margin值的设置是否有效。代码运行结果如下：可以看出margin-top和margin-bottom并没有起作用。下面看左右内边距：可以看到行内元素的margin-left和mar...

2018-09-26 20:43:21 24228 14

原创给子盒子设置padding值是不会撑开父盒子的

最开始有如下一张图大标题看起来离下边框太近了，所以想利用h4标签的padding-bottom将它们的距离调得远一些。现在就是有一个疑问，如果将h4的padding-bottom设置成10px,那大盒子会不会被撑大呢。测试结果如下所示：没有设置padding时，父盒子和子盒子的大小如下：给h4标签添加padding-bottom:10px;属性之后，显示结果如下：可以看到父盒子的...

2018-09-25 15:52:25 6144 1

原创行内元素、行内块元素设置水平居中的特殊方法

如果块级元素里包含有行内元素或者行内块元素，要想设置行内元素水平居中对齐，此时可以将行内元素看成是父元素中的文本，即利用 text-align: center;属性就可以将行内元素设置成水平居中。具体的看下面的例子：在这里a元素就可以看作是.nav的文字。设置a水平居中，就可以利用.nav的text-align: center;属性。显示结果如下：上面的方法只对行内元素和行内块元素起作用...

2018-09-24 10:02:29 15188 1

qq_37621289的博客