css的日常小知识

CSS的日常

关于字体

字体字号以及大小

一：字体字号
1.网页中，中文主要使用的字体：微软雅黑，宋体，黑体；英文：Arial，Consolas，英文在前，中文在后。中文常用字体：微软雅黑：Microsoft Yahei宋体：SimSun黑体：SimHei。
2.取值方式：数字，单注（注意：数字：100-900，单词：lighter normal,bold,bolder）
3。特殊用法：.fwb:font-weight: bold; fw:font-weight: normal;
（注：必须写的两个值;字号 字体 )
4.个别案例：italic :跟字体样式有关系，oblique斜体代码：italic{ font-style: italic; } .oblique{ font-style: oblique; }
二：字体大小
1.取值：单词，em，px，百分比
2.代码如下：font-size: xx-small; font-size: xx-large; font-size: 48px; font-size: 1em; font-size: 200%;

关于段落

一： 段落的基本用法
1.首行文本缩进 （em px 百分比）代码：text-indent: 2em; 2. 设置文本居中方式代码： text-align: center;
3. 文本修饰 ：none，正常，默认值，underline:下划线，overline:上划线， line-through:中划线。代码：text-indent: 2em;
4. 单词间间距：代码：text-transform: lowercase;

关于基线

一：基线对齐代码：`vertical-align: bottom;

关于盒模型

一：标准和模型
1.什么叫盒子：一个元素在页面中真实占据的位置。
2.五个部分：内容的宽，内容的高，内边距，边框，外边距。
3.宽：width px；高：height px；定义的内容的宽和高。 padding:内容和边框之间的距离内边距是可以被背景色渲染的。
4.代码：`div{
width: 400px;
height: 400px;
padding: 50px;
background-color: pink;
}

二：Padding
1.内容和边框之间的距离。内边距是可以被背景色渲染的。可以给单边设置内边距:代码：padding-left: 50px; padding-top: 30px; padding-right: 40px; padding-bottom: 60px;
2.四值法：
单值：上下左右。
双值：上下 左右。
三值：上 左右 下
四值：上 右 下 左 顺时针。
三：边框

1. 三要素写法：宽度，样式。代码：width: 300px; height: 300px; background-color: pink; margin: 40px;
   2.倒三角特殊案例：代码`

` 四：margin 1.外边距: 两个盒子之间的距离。代码：`div { width: 200px; height: 200px;

}

.div1 {
  background-color: teal;
  margin-bottom: 20px;
}

.div2 {
  background-color: pink;
}

` 五：补充 1.假如有一个padding/border/margin 与其他的三条边不同，其他三条边一样，这个时候我们设置总体样式，再单独去设置它的样式。 2.有一些标签会有默认的样式，比如默认的margin。 六：补充项：# 补充项

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

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

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