前端学习小日常6

1.行高

什么是行高？
一行文字实际占用的高度就是行高
样式：line-height
取值方式：px，百分比。
百分比：按照默认的字体大小取值。

2.字号字体

什么是字号字体？
通过样式可以调整文本的字体大小和字体的样式。
样式：font-size font-family
取值方式：数字，单词

3.段落

3.1：设置文本的首行缩进
text-indent
3.2：设置文本的居中方式
text-align
3.3：单词间间距： 中文无效
word-spacing:
3.4：单词大小写转换

4.基线

什么是基线？
基线就是字母或文字对齐的线
基线对齐
vertical-align

5.盒模型

什么叫盒子？
一个元素在页面中真实占据的位置。
五个部分：内容的宽，内容的高，内边距，边框，外边距。

宽：width px；
高：height px；
定义的内容的宽和高。

padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的。

6.边框

就是给一个元素添加一个边框
border：宽度，样式，颜色
边框是可以拆分的。
border-right
border-top
border-right
border-bottom

7.倒三角

1.设置边框，然后将内容宽高设置为0
2.取消底部边框。
3.将左右边框的颜色改为white。（透明色）

8.外边距

什么是外边距呢？
两个盒子之间的距离就是外边距。
margin：
这个也是可以拆分的
当margin：1px；表示四周外边距都为1px
当margin：1px 2px；表示上下外边距为1px 左右外边距为2px
当margin：1px 2px 3px；表示上外边距为1px，左右外边距为2px，下外边距为3px
当margin：1px 2px 3px 4px；表示上为1，左为2，下为3，右为4

1.技巧

假如有一个padding/border/margin 与其他的三条边不同，其他三条边一样，这个时候我们设置总体样式，再单独去设置它的样式。

border: 5px solid red; 
/* css：层叠特效 */
border-bottom: 10px dashed green;

2.清除默认样式

有一些标签会有默认的样式，比如默认的margin。

我们可以使用：

*{
      margin: 0;
      padding: 0;
}

4.高度

我们一般是不设置高度的，而是用内容去撑开盒子的高。

内容的多少不是由咱们决定的，使用自适应可以避免大片留白和内容溢出。

5.溢出内容隐藏

overflow: hidden;

6.外边距塌陷

垂直方向上相邻的两个盒子，如果都有外边距，则外边距相交的地方会出现外边距重合现象，也叫作外边距塌陷。

取值：margin相遇的部分，并不是两个margin值的和，而是为最大值。

如果两个margin值为负数，取值为绝对值最大的。

如果一正一负，结果为两者之和。

7.居中方法

文字居中：

水平居中：

text-align:center

垂直居中：

• 单行文本 line-height等于盒子的高。

盒子居中

水平居中：

margin: 0 auto;

垂直居中

给盒子添加一个上下一样的padding。

8.父子盒模型

真实的宽：内容的宽+左padding+左border+右padding+右border

真实的高：内容的高+上padding+下padding+上border+下border

子盒子的宽度若不设置默认为父盒子的内容的宽。

若设置了边框和内边距，父盒子的内容宽减去边框和内边距的大小，剩下的就是子盒子的宽度。