table of Contents
- Dictation + Recap
- Pseudo-class selector
- 2. How to add a label at the back p '' & 'content?
- 3. Set web fonts which use property, font options how to write?
- 4. How to set text spacing and word spacing English?
- 5. Use bold font which property, its value What?
- 6. The text-decoration property with which it values what?
- 7. illustrate px, em, rem unit means
- 8. How to set the first line indent, the general use of what units?
- 9. horizontal text arrangement which property, its value there?
- 10. How to make a box is centered horizontally?
- 11.margin What will happen in the vertical direction?
- 12. If you let two boxes side by side on his show?
- 13. simple to elaborate, floating on the box had what phenomenon?
- Today's content:
Dictation + Recap
Pseudo-class selector
a:link{} 没有被访问过时a标签的样式
a:visited{} 访问过后的
a:hover{} 悬浮时
a:active{} 摁住的时候2. How to add a label at the back p '' & 'content?
<style>
p::after{
/*行内元素*/
content:'&',
color:red;
font-size: 20px;
}
</style>
<p>wusir</p>3. Set web fonts which use property, font options how to write?
font-family:'宋体','楷体';4. How to set text spacing and word spacing English?
文字间距:letter-spacing
英文单词间距:word-spacing5. Use bold font which property, its value What?
font-weight:lighter| normal | bold |bolder| 100~900 字体加粗
font-style:italic;/*斜体*/6. The text-decoration property with which it values what?
text-decoration:none| underline | overline | line-through7. illustrate px, em, rem unit means
px: 绝对单位 固定不变的尺寸
em和rem :相对单位 font-size
em:相对于当前的盒子
rem:相对于根元素（html）8. How to set the first line indent, the general use of what units?
em9. horizontal text arrangement which property, its value there?
text-align:left | center | right | justify(仅限于英文，两端对齐)10. How to make a box is centered horizontally?
盒子必须有宽度和高度，再设置margin: 0 auto;
让文本水平居中： text-align:center;
让文本垂直居中：line-height = height11.margin What will happen in the vertical direction?
外边距合并，“塌陷”
尽量避免出现塌陷问题，只要设置一个方向的margin12. If you let two boxes side by side on his show?
1.float浮动属性
2.设置盒子的显示方式 display:inline | inline-block;13. simple to elaborate, floating on the box had what phenomenon?
1.脱离标准文档流，不在页面上占位置 “脱标”
2.文字环绕 设置浮动属性的初衷
3.“贴边” 现象： 给盒子设置了浮动，会找浮动盒子的边，如果找不到浮动盒子的边，会贴到父元素的边，如果找到了，就会贴到浮动盒子的边上
4.收缩效果
有点像 一个块级元素转成行内块Today's content:
float
Layout plan
Role: implementation elements side by side
Floating phenomenon
- Out of the standard document flow, accounting for position on the page is not
- Welt phenomenon
Shrinkage effect
### problematic floating (not afford to support the height of the parent box)
### Clear floating way
给父元素添加固定高度 （不灵活，后期不易维护）- Application: the same years navigation
内墙法：给最后一个浮动元素的后面添加一个空的块级标签，并且设置该标签的属性为clear:both; 问题：冗余伪元素清除法 推荐大家使用 .clearfix::after{ content:''; display: block; clear: both; /*visibility: hidden;*/ /*height: 0;*/ }overflow:hidden; 常用 因为overflow:hidden;会形成BFC区域，形成BFC区域之后，内部有它的布局规则 计算BFC的高度时，浮动元素也参与计算 但是小心overflow：hidden它自己的本意
Locate
position:static | relative | absolute | fixed;
静态 相对 绝对 固定Relative positioning relative
feature:
- Boxes with standard documents shed no difference
- Stay "pit", will affect the page layout
effect:
做“子绝父相”布局方案的参考Reference point:
以原来的盒子为参考点Absolute positioning absolute
Reference Point
If a box is provided separately for absolute positioning,
以top描述，它的参考点是以body的（0，0）为参考点
以bottom描述，它的参考点是以浏览器的左下角为参考点Zaijuefuxiang
以最近的父辈元素的左上角为参考点进行定位feature
1.脱标
2.压盖
3.子绝父相