add: CSS 基础回顾

This commit is contained in:
qianguyihao
2019-10-03 22:49:06 +08:00
parent 0ea740c0a7
commit 3975268ef4
8 changed files with 60 additions and 177 deletions

View File

@@ -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`
各种单位的含义:
@@ -27,7 +27,8 @@ html中的单位只有一种那就是像素px所以单位是可以省略
- `pt`点Points或者叫英镑 (1点 = 1/72英寸)
- `pc`皮卡Picas (1 皮卡 = 12 点)
- **相对单位**
### 相对单位
`px`:像素
`em`印刷单位相当于12个点
`%`:百分比,相对周围的文字的大小
@@ -40,6 +41,10 @@ html中的单位只有一种那就是像素px所以单位是可以省略
## 字体属性
CSS中有很多**非布局样式**(与布局无关),包括:字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性(粗体、斜体、下划线)等。
这一段,我们先来讲一下字体属性。
### 行高
CSS中所有的行都有行高。盒子模型的padding绝对不是直接作用在文字上的而是作用在“行”上的。
@@ -56,7 +61,6 @@ CSS中所有的行都有行高。盒子模型的padding绝对不是直
为了严格保证字在行里面居中,我们的工程师有一个约定: **行高、字号,一般都是偶数**。这样可以保证它们的差一定偶数就能够被2整除。
### 如何让单行文本垂直居中
小技巧:如果一段文本只有一行,如果此时设置**行高 = 盒子高**,就可以保证单行文本垂直居中。这个很好理解。
@@ -206,7 +210,6 @@ CSS样式中常见的文本属性有以下几种
![](http://img.smyhvae.com/2015-10-03-css-18.png)
## 列表属性
```html
@@ -230,8 +233,6 @@ ul li{
![](http://img.smyhvae.com/2015-10-03-css-26.png)
## overflow属性超出范围的内容要怎么处理
`overflow`属性的属性值可以是:
@@ -295,12 +296,7 @@ ul li{
![](http://img.smyhvae.com/2015-10-03-css-31.png)
## 鼠标的属性cursor
## 鼠标的属性 cursor
鼠标的属性`cursor`有以下几个属性值:
@@ -372,7 +368,6 @@ p:hover{
爆料一下,表示博主有两年多的平面设计经验,我做设计的时间其实比写代码的时间要长,嘿嘿···
## 导航栏的制作(本段内容请忽略)
现在我们利用float浮动属性来把无序列表做成一个简单的导航栏吧效果如下
@@ -435,8 +430,6 @@ p:hover{
国庆这四天,连续写了四天的博客,白天和黑夜,从未停歇,只交替没交换,为的就是这每日一发。以后会不断更新的。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
@@ -446,4 +439,3 @@ p:hover{
![](http://img.smyhvae.com/2016040102.jpg)