摘要：如果里有多行，那么就把每一行的行高加起来算。姓名怎么和联系方式对齐其他的方法直接用可以的，不过会受到字体的影响。字体一变，加的就会变。代码解释代码如果是内联元素要被改变宽度的话，一定要先写上。
css float 布局以及其他小技巧总结
这篇博文 前面四个部分是关于css 经典布局 如果你已经知道了 可以直接跳过看第六部分 css 的其他小技巧
1.0 左右居中布局
Document
a1
a2
2.0 左中右布局
Document
Left
Right
Main
```
3.0 水平居中
Document
水平居中
4.0 垂直居中 （两种方法）
垂直居中第一种方法table自带
| 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 |
垂直居中第二种方法marginautoabsolute
垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直
5.0 水平垂直居中
Document
水平垂直居中
6.0 其他小技巧
6.1 css 有类似javascript 的console.log 的工具吗？
//用border
div{
border: 1px solid red;
}
6.2 为什么明明在数字1和2之间敲两个空格 但是网页显示出来它们之间 只有一个空格 ？ 那是因为你没有添加 (no break space)
你写的bug
1 2
6.3 为什么只有一个阿拉伯数字且已经设定了 字体大小是20 px 但一旦打开开发者工具：显示的字体大小是 28px ？
因为每一种字体被设计时，为了【好看】设计师会给每一种字体一个好看系数 eg：默认的字体时pingfang 那么28px /20px =1.4 这个1.4 就是【好看（字体）系数 】每一种字体都有自己的 【好看系数】
如果不想使用字体设计师给你的【好看系数】一定要用自己的 可以添加一行
line-height： 20px；
代码如下
test
1
6.4 为什么分别两个span元素之间 看似什么都没有 但游览器 1 和 2 之间确有空隙 ？
span元素 之间有tab 有回车等都会造成有空格的情况
Document
1
2
6.5 块级元素的高度怎么确定？
如果div 里 只有一个内联元素 那么div 的高度是由这个内联元素的行高所决定。
如果div 里有多行，那么就把每一行的行高加起来算。
6.6 姓名怎么和联系方式对齐 ？
其他的方法：直接用 ？可以的，不过会受到字体的影响。字体一变， 加的 就会变。
代码解释：代码如果是内联元素要被改变宽度的话， 一定要先写上display：inline-block 。
text-align: justify; 当有多行字体时，这句话会让强迫症看了之后 非（两）常（边）舒（对）心 （齐）。
那只有一行的时候 怎么对齐？看上去是多添加了一行。代码
如下：
span:after{
content:"";
display: inline-block;
width: 100%;
border: 1px solid pink;
}
JS Bin
姓名
联系方式
6.7 六个内联元素 怎么写才能没有空隙 ？
添加 float：left
clearFix
Document
6.8 怎么做 一行和多行文本过长变省略号？
//一行
Document
s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f
// css multi line text ellipsis
Document
s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f
6.9 什么情况下margin 会合并以及怎么修改使其正常化？
如果父元素没有什么东西挡住子元素 那么子元素的边距就会父合并起来
Document
111
怎么修改 ：
第一种添加： 在父元素里添加border -top 和 border - bottom ；
第二种添加： 同样是在 父元素里添加 padding-top
Document
111
6.10 怎么break out words？
添加一行代码： word-break: break-all;
JS Bin
1 apppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppple
6.11 怎么脱离文档流 ？
三种方法：
position：absolute； float： left； position：fixed；
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52174.html
摘要：如果里有多行，那么就把每一行的行高加起来算。姓名怎么和联系方式对齐其他的方法直接用可以的，不过会受到字体的影响。字体一变，加的就会变。代码解释代码如果是内联元素要被改变宽度的话，一定要先写上。 css float 布局以及其他小技巧总结 这篇博文 前面四个部分是关于css 经典布局 如果你已经知道了 可以直接跳过看第六部分 css 的其他小技巧 1.0 左右居中布局 ...
摘要：在我们写代码的过程中，可以养成记录一些小技巧的习惯。不到万不得已，尽量少使用或在可控范围内使用。可以在缩小浏览器窗口时等比例缩放。但此时不能加左右的，否则总宽度会超过的宽度。我们为达到目的让同一类和左右排布不同类上下排布。 在我们写CSS代码的过程中，可以养成记录一些小技巧的习惯。 1. 一般特定的元素都有自己默认的样式，但是在我们的整体布局中，可能适得其反。我们可以去掉其默认样式。 ...
摘要：例一个高的，里面的文字垂直居中使该元素变大倍动画过渡效果 CSS的两种经典布局 左右布局 一栏定宽，一栏自适应 定宽 自适应 .left{ width: 200px; height: 600px; float: left; display: table; text-align: ...
摘要：返回的是一个样式声明对象，只读。方法返回一个最初值对象或值列表对象，这取决于属性值的类型。而且，虽然中，对象支持方法，但总是返回因此，目前来讲，方法可以先不闻不问。本文转载之张鑫旭的博客 一、getComputedStyle是？getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclara...
摘要：返回的是一个样式声明对象，只读。方法返回一个最初值对象或值列表对象，这取决于属性值的类型。而且，虽然中，对象支持方法，但总是返回因此，目前来讲，方法可以先不闻不问。本文转载之张鑫旭的博客 一、getComputedStyle是？getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclara...
阅读 2512·2021-11-25 09:43
阅读 1077·2021-11-11 16:53
阅读 1816·2021-09-04 16:45
阅读 539·2019-08-30 15:44
阅读 798·2019-08-30 13:07
阅读 363·2019-08-29 16:06
阅读 1203·2019-08-29 13:43
阅读 1890·2019-08-27 11:04
