CSS笔记（三）

知识点一：行高

1、属性值与盒子的高度相同--垂直居中

2、属性值小于盒子的高度-文本靠上

3、属性值大于于盒子的高度-文本靠下

4、交line-height: 300px;

5、了解文本顶线、底线、中线、基线

知识点二：CSS三大特性

1、三大特性：层叠性、继承性、优先级

2、层叠性：就近原则    （联想刷墙的事例）

(1) 、 同类种选择器,第二个选择器相同样式会覆盖第一个选择器

(2) 、在同一个选择器中，相同的属性，以最后一个为准

3、继承性:子承父业     （联想现实家族继承）

4、优先级：

a) 在同一个元素中 !important>style>ID选择器>类名选择器>标签选择器>通配符选择器

b) 本身选择器的样式>继承过来的样式

c) 同种选择器，本身选择器的样式<子代后者后代 ???????，这个不确定根据权重判断

知识点三：背景

1、背景：背景色、背景图

2、背景色

(1) 、英文单词   

(2) 、十六进制    background-color: #ff0000;

(3) 、 RGB   红绿蓝     

(4) 、rgba   红绿蓝透明度   background-color: rgba(255, 0, 0, 0.5);

① 取值范围0-1

②  1是完全不透明 ，0是完全透明

(5) 、补充透明度 opacity: 0.5

 

  

知识点四：盒子模型之边框

1、CSS的三大重点：盒子模型、浮动、定位

2、 盒子模型：内容、边框、外边距、内边距

3、  网页布局本质：拼接盒子的过程   div +CSS 

4、  边框 

(1) 、边框属性：边框厚度、边框的颜色、边框的线条样式 

(2) 、边框厚度：border-top-width（上）

(3) 、边框的颜色： border-top-color: blue;（上）

(4) 、边框的线条样式：border-top-style: solid;

① 、实线 solid

② 、虚线  dashed

③ 、点线 dotted

④ 、双实线 double

(5) 、综合设置：border:1px solid red;

(6) 、边框会影响盒子的尺寸

知识点五：内边距

1、定义：内边距：盒子中内容与边框之间的距离

2、用法：

(1) 、上内边距  padding-top: 20px;

(2) 、左内边距 padding-left: 15px;

(3) 、下内边距  padding-bottom: 25px;

(4) 、右内边距  padding-right: 10px;

(5) 、属性值个数不同

①  四个属性值 :上、右、下、左   padding: 50px 40px 30px 10px;

② 三个属性值： 上、左右、下  padding: 50px 40px 30px;

③ 两个属性值： 上下、左右 padding: 50px 20px;

④  一个属性值： 上下左右 padding: 50px;