前端学习之CSS第三天

╰半橙微兮° 2022-05-10 07:48 242阅读 0赞

#                                                  Css基础 #

### **复习昨天知识** ###

###     1、Css书写位置 ###

◆内嵌

<head>

样式表内容

</style>

</head>

◆外链

◆行内样式表

###     2、标签分类（显示方式） ###

◆块元素

典型代表： div,p,h1-h6,li,.....

★独占一行

★可以设置宽高

★没有定义宽度时，宽度为父集元素的宽度

◆行内元素

典型代表：span,a,strong,em,del......

★在一行显示

★不能直接设置宽高

★宽高为内容撑开的宽高

◆行内块元素

典型代表:img,input

★在一行上显示

★可以设置宽高

### 3、元素转换 ###

display:block;   行内转块

Display:inline;   块转行内

Display:inline-block;  块或行内转行内块

### 4、Css三大特性 ###

◆层叠性

样式发生冲突的时候，总是执行后边的样式，和调用顺序无关。

◆继承性

★文字的所有属性都可以被继承

\-特殊：h1-h6  文字大小不能被继承

a标签文字颜色不能被继承

◆优先级

默认样式<标签选择器<类选择器<id选择器<行内样式<!important

0                    1                   10          100        1000       1000以上

★继承的权重为0

★权重会叠加

### 5、链接伪类 ###

a:link\{属性:值;\}   链接默认状态   a\{属性:值;\}是一样的

a:visited\{属性:值;\} 链接访问之后的状态

a:hover\{属性:值;\}  鼠标放上去显示的状态

a:active\{属性:值;\}    链接激活的状态

:focus\{属性:值;\}       获取焦点

注意:如果四个链接伪类都使用，按顺序书写。

### 6、背景 ###

background-color                  背景颜色

background-image:url(“1.png”);       背景图片

background-repeat:   repeat  |   no-repeat   |    repeat-x  |  repeat-y

background-position   left  | right  |  center   | top   |  bottom

Background -attachment  scroll  |  fixed

## 二、行高 ##

◆浏览器默认文字大小

浏览器默认文字大小：16px

行高：是基线与基线之间的距离

行高=文字高度+上下边距

![70][]

一行文字行高和父元素高度一致的时候，垂直居中显示。

### 1、行高的单位 ###

总结:单位除了像素以为，行高都是与文字大小乘积。

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:93.4pt;"> 行高单位 </td> 
 <td style="vertical-align:top;width:150.75pt;"> 父元素文字大小 </td> 
 <td style="vertical-align:top;width:155.25pt;"> 子元素文字大小 </td> 
 <td style="vertical-align:top;width:93.25pt;"> 行高 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:93.4pt;"> 40px </td> 
 <td style="vertical-align:top;width:150.75pt;"> 20px </td> 
 <td style="vertical-align:top;width:155.25pt;"> 30px </td> 
 <td style="vertical-align:top;width:93.25pt;"> 40px </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:93.4pt;"> 2em </td> 
 <td style="vertical-align:top;width:150.75pt;"> 20px </td> 
 <td style="vertical-align:top;width:155.25pt;"> 30px </td> 
 <td style="vertical-align:top;width:93.25pt;"> 40px </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:93.4pt;"> 150% </td> 
 <td style="vertical-align:top;width:150.75pt;"> 20px </td> 
 <td style="vertical-align:top;width:155.25pt;"> 30px </td> 
 <td style="vertical-align:top;width:93.25pt;"> 30px </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:93.4pt;"> 2 </td> 
 <td style="vertical-align:top;width:150.75pt;"> 20px </td> 
 <td style="vertical-align:top;width:155.25pt;"> 30px </td> 
 <td style="vertical-align:top;width:93.25pt;"> 60px </td> 
 </tr> 
 </tbody> 
</table>

总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。

◆推荐行高使用像素为单位。

### 2、盒子模型 ###

![70 1][]

边框  border

Border-top-style:  solid   实线

dotted  点线

dashed  虚线

Border-top-color   边框颜色

Border-top-width   边框粗细

![70 2][]

◆**边框属性的连写**** **

**特点：没有顺序要求，线型为必写项。**

![70 3][]

◆四个边框值相同的写法

![70 4][]

**特点：没有顺序要求，线型为必写项。**

**2.2、边框合并   border-collapse:collapse;**

![70 5][]

**2.3、获取焦点**

![70 6][]

label  for  id      获取光标焦点

![70 7][]

**2.4、内边距**

Padding-left   |   right    |  top  |  bottom

![70 8][]

◆padding连写

Padding: 20px;   上右下左内边距都是20px

Padding: 20px 30px;   上下20px   左右30px

Padding: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40

Padding:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px

◆**内边距撑大盒子的问题**

影响盒子宽度的因素

内边距影响盒子的宽度

边框影响盒子的宽度

**盒子的宽度=****定义的宽度+****边框宽度+****左右内边距**

**◆继承的盒子一般不会被撑大**

包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

**2.5、外边距**

margin-left   | right  |  top  |  bottom

![70 9][]

◆外边距连写

Margin: 20px;    上下左右外边距20PX

Margin: 20px 30px;   上下20px  左右30px

Margin: 20px  30px  40px;     上20px  左右30px   下  40px

Margin: 20px  30px   40px  50px; 上20px   右30px   下40px  左50px

◆**垂直方向外边距合并**

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

◆**嵌套的盒子外边距塌陷**

解决方法:  1  给父盒子设置边框

2给父盒子overflow:hidden;   bfc   格式化上下文

[http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html][http_www.w3cplus.com_css_understanding-bfc-and-margin-collapse.html]

### 4、Fireworks的基本使用 ###

新建文件   ctrl+n

打开文件  ctrl+o

调出和隐藏标尺 ctrl+r

清除辅助线：  视图---辅助线----清除辅助线

放大镜  z   放大镜状态下alt+鼠标左键 缩小

抓手   快捷键   空格

测量距离      ★先拉出2根辅助线

★切换到指针工具![70 10][]

★将光标放到2根辅助线之间，按住shift键

如果有疑问联系博主：y19970821ywty

![70 11][]

要用到的工具，视频教程，关注公众号（Java学习之乐）直接免费获取：

![70 12][]

[70]: /images/20220510/a6823dea55494a9c9d785ae7bd75b56a.png
[70 1]: /images/20220510/9da17e46322a4c3d8d7df1bb6ce7e6f7.png
[70 2]: /images/20220510/a05781e5a1574f5096b76b40b1a470e9.png
[70 3]: /images/20220510/1c4ce9090ba648e1a29f49329f383840.png
[70 4]: /images/20220510/ddc799ed418f43d3a984f7cf30af07df.png
[70 5]: /images/20220510/f6b7a28bd5c34a71baf97ea2792b4f78.png
[70 6]: /images/20220510/604d6ba0fc24443f80b33bf1ee6a959c.png
[70 7]: /images/20220510/aeac936cb8c34f8da142f992874e53c1.png
[70 8]: /images/20220510/4b668dcbc62b4626992e26d2576673bf.png
[70 9]: /images/20220510/9e0401fa049844268c083c56ad1d8c8b.png
[http_www.w3cplus.com_css_understanding-bfc-and-margin-collapse.html]: http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
[70 10]: /images/20220510/4371b2d581794375b7c843457383230b.png
[70 11]: /images/20220510/d7ca65af032047c9bae0367779c084fa.png
[70 12]: /images/20220510/43dbf925ed5346c8bef2ac00488b26e6.png