1 inline-block 的间隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
display: inline-block;
background-color: #2459a2;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a>111</a>
<a>222</a>
<a>333</a>
</body>
</html>- inline-block默认的空格符就是标签与标签之间的空隙造成的。
- 我们可以通过margin:-3px来解决，但是
- 我们布局肯定很多元素，不可能每个都添加margin负这样维护成本太大了
- 我们线上代码如果压缩，那么我们就不存在哪个4px的问题了，那么我们的margin负就回造成布局混乱！
- 我们可以给几个标签加一个父级div，然后：
- 我们可以通过margin:-3px来解决，但是
div{word-spacing: -5px;} 2 word-wrap & word-break:
- word-wrap:
- the word-wrap CSS property is used to specify whether or not the browser is allowd to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit.
- The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line. It takes in two values; normal or break-word.
- word-break:
- The word-break CSS property is used to specify how (or if) to break lines within words
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{
width: 100px;
background-color: #84a42b;
word-wrap: break-word;
word-break: break-all;
}
.p2{
width: 100px;
background-color: darkgoldenrod;
word-wrap: break-word;
word-break: break-all;
}
</style>
</head>
<body>
<p class="p1">hello yuan hello yuan hello yuan hello yuan hello yuan</p>
<p class="p2">helloyuanhelloyuanhelloyuanhelloyuanhelloyuanhelloyuan</p>
</body>
</html>3
- 一旦给元素加上absolute或float就相当于给元素加上了display:block;。什么意思呢？比如内联元素span默认宽度是自适应的，你给其加上width是不起作用的。要想width定宽，你需要将span设成display:block。但如果你给span加上absolute或float，那span的display属性自动就变成block，就可以指定width了。
4 快写
div tab
a tab
div.main>ul>li.c*4 tab5 display:flex
6 响应式布局
7 z-index
定义和用法
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- 注释：元素可拥有负的 z-index 属性值。
- 注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明
- 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
默认值： auto
继承性： no
版本： CSS2
JavaScript 语法： object.style.zIndex="1"可能的值
值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
