认识CSS--02

目录

1 CSS常用元素属性

1.1 字体

1.1.1 设置字体

1.1.2 设置字体粗细

1.2 文本

1.2.1 文本颜色

1.2.2 文本对齐

1.2.3 文本装饰

1.2.4 文本缩进

1.2.5 行高

1.3 背景

1.4 圆角矩形

2 元素的显示模式

2.1 块级元素

2.2 行内元素

2.3 元素转换

3 CSS中的盒模型

 3.1 盒模型相关参数设置

3.1.1 内边距

3.1.2 边框

3.1.3 外边距

4 弹性布局

1 CSS常用元素属性

1.1 字体

1.1.1 设置字体

使用font-family设置字体，前提得保证有这个字体

1.1.2 设置字体粗细

使用font-weight设置字体的粗细，值是100-900整数，数字越大字体越粗，还可以用单词：normal、bold、lighter等设置字体粗细

前面我们的等级标题也可以用css来设置文字的大小和粗细，达到和h1标签类似的效果

1.2 文本

1.2.1 文本颜色

color：直接写单词；rgb（三原色）/rgba（a表示透明度0-1之间的小数）形式；#十六进制数字的形式

1.2.2 文本对齐

text-align进行设置

  

1.2.3 文本装饰

text-decoration，可以给文字加上上划线、下划线、删除线

  

1.2.4 文本缩进

text-indent能够控制一段话的首行缩进，不知道文字大小的情况下，2em直接能缩进两个字

1.2.5 行高

line-height（文字大小+行间距）

 

1.3 背景

1.3.1 background-color

背景颜色

  

1.3.2 background-image

背景图片设置，背景图片默认是平铺的，会自动有很多图片把背景铺满

 

1.3.3 background-repeat

控制背景图的平铺

  

1.3.4 background-position

设置背景图的位置，还可以使用坐标的方式设置位置，第一个数值是纵坐标，第二个数值是横坐标，坐标原点在左上角。

  

1.3.5 background-size

设置背景图片大小

  

1.4 圆角矩形

heml元素默认是矩形的，四个角都是九十度，然而我们常见到圆角矩形

  

2 元素的显示模式

2.1 块级元素

独占一行的元素：div、h1-h6、p、table、tr……

2.2 行内元素

不独占一行的元素：span、a、u、b、strong……

2.3 元素转换

可以使用display属性针对行内/块级元素相互转换（绝大部分是把行内转为块级）

 

还可以让元素隐藏

 

 

3 CSS中的盒模型

页面上的html元素都是一个一个矩形，就可以视为盒子，里面装文字、链接、图片等

每个盒子出了内容还有其他东西

 

最里面的是内容、绿色的这个是内边距、黄色的这个是边框、最外面这个外边距。

 3.1 盒模型相关参数设置

3.1.1 内边距

padding，边框和内容之间的间距

padding：10px 20px  这样写第一个数字代表上下10px，左右20px

padding：10px 20px 30px  这样写上是10、左右是20、下是30

如果写四个数字就是顺时针上右下左

 

3.1.2 边框

border

在上面我们设置的是200×100的，但是图示明显数据更大，原因是边框把盒子撑大了，这里为了让相对位置不发生改变，我们让边框占据内容的地盘，使得整体面积不变

边框还可以分方向单独设置

 

 

3.1.3 外边距

margin使用方法和padding非常相似，只不过它控制的是元素之间的距离

4 弹性布局

上述的都是元素内部自己的布置，弹性布局是针对元素之间的相对位置关系。

display: flex; 给div加，加到上层容器上，把当前元素设置成弹性布局的容器，里面的子元素就会按照弹性布局的规则来排列（不影响其余的后代元素）。

由于块级元素本身就是垂直方向排列的，因此实际布局的时候就是一行一行往下布局的，每一行里如果有多个元素并列，此时就使用弹性布局处理。

在弹性布局这里，可以使用justify-content属性来设置水平方向的排列方式；垂直方向，使用align-items进行排列。