Skip to content

Commit

Permalink
add: CSS 基础回顾
Browse files Browse the repository at this point in the history
  • Loading branch information
qianguyihao committed Oct 3, 2019
1 parent 7138c60 commit 10357b4
Show file tree
Hide file tree
Showing 8 changed files with 60 additions and 177 deletions.
26 changes: 9 additions & 17 deletions 02-CSS基础/01-CSS属性:字体属性和文本属性.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。
<font color="#0000FF">**CSS中的单位是必须要写的**,因为它没有默认单位。</font>

- **绝对单位**
### 绝对单位

1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`
1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`

各种单位的含义:

Expand All @@ -27,7 +27,8 @@ html中的单位只有一种,那就是像素px,所以单位是可以省略
- `pt`:点Points,或者叫英镑 (1点 = 1/72英寸)
- `pc`:皮卡Picas (1 皮卡 = 12 点)

- **相对单位:**
### 相对单位

`px`:像素
`em`:印刷单位相当于12个点
`%`:百分比,相对周围的文字的大小
Expand All @@ -40,6 +41,10 @@ html中的单位只有一种,那就是像素px,所以单位是可以省略

## 字体属性

CSS中,有很多**非布局样式**(与布局无关),包括:字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性(粗体、斜体、下划线)等。

这一段,我们先来讲一下字体属性。

### 行高

CSS中,所有的行,都有行高。盒子模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的。
Expand All @@ -56,7 +61,6 @@ CSS中,所有的行,都有行高。盒子模型的padding,绝对不是直

为了严格保证字在行里面居中,我们的工程师有一个约定: **行高、字号,一般都是偶数**。这样可以保证,它们的差一定偶数,就能够被2整除。


### 如何让单行文本垂直居中

小技巧:如果一段文本只有一行,如果此时设置**行高 = 盒子高**,就可以保证单行文本垂直居中。这个很好理解。
Expand Down Expand Up @@ -206,7 +210,6 @@ CSS样式中,常见的文本属性有以下几种:

![](http://img.smyhvae.com/2015-10-03-css-18.png)


## 列表属性

```html
Expand All @@ -230,8 +233,6 @@ ul li{

![](http://img.smyhvae.com/2015-10-03-css-26.png)



## overflow属性:超出范围的内容要怎么处理

`overflow`属性的属性值可以是:
Expand Down Expand Up @@ -295,12 +296,7 @@ ul li{

![](http://img.smyhvae.com/2015-10-03-css-31.png)






## 鼠标的属性cursor
## 鼠标的属性 cursor

鼠标的属性`cursor`有以下几个属性值:

Expand Down Expand Up @@ -372,7 +368,6 @@ p:hover{

爆料一下,表示博主有两年多的平面设计经验,我做设计的时间其实比写代码的时间要长,嘿嘿···


## 导航栏的制作(本段内容请忽略)

现在,我们利用float浮动属性来把无序列表做成一个简单的导航栏吧,效果如下:
Expand Down Expand Up @@ -435,8 +430,6 @@ p:hover{

国庆这四天,连续写了四天的博客,白天和黑夜,从未停歇,只交替没交换,为的就是这每日一发。以后会不断更新的。



## 我的公众号

想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。
Expand All @@ -446,4 +439,3 @@ p:hover{
![](http://img.smyhvae.com/2016040102.jpg)



Loading

0 comments on commit 10357b4

Please sign in to comment.