前端基础2——CSS基本样式修饰、网页布局

r囧r小猫 2022-05-08 09:48 415阅读 0赞

**目录**

一、CSS基本样式修饰

1，字体常用样式

2，文本常用样式

3，超链接样式

4，背景类样式

5，列表样式

6，表格样式

7，轮廓样式

二、网页布局

1，页面尺寸

2，布局思路

3，float定位（重要）

4，overflow溢出处理

5，清除浮动 - clear

6，position相对定位与绝对定位

--------------------

# 一、CSS基本样式修饰 #

## 1，字体常用样式 ##

（1）font-family ：设置字体样式（像微软雅黑之类的字体有很多，可以下载一些字体扩充字体的选项）

![70][]  
（2）font-size：设置字体大小

有px、%、em三种表示方法；若未规定字体大小，字体默认为16像素（16px）

特别说明下em（%类似，也是父标签的百分比）：

![70 1][]

（3）font-weight：黑体之类的设置（400 等同于 normal，而 700 等同于 bold）  
![70 2][]  
（4）font-style：显示字体的样式（斜体，正常之类）

normal、italic、oblique  normal是正常，后两个是不同的两种斜体

（5）line-height：这不是行高哦！这是行与行之间的距离，尤其是设置行的位置时要经常遇到

属性值表示方式：  
固定值（如：line-height:36px; ），  
相对值（如：line-height:1.5em;）

## 2，文本常用样式 ##

（1）文本缩进：text-indent    (text-indent:2em;   还比较好用，做首行缩进)  
（2）水平对齐：text-align

常用属性值有三种：left、center、right  
（3）文本修饰：text-decoration

设置文本的修饰效果

无装饰，上划线，下划线，删除线，文本闪烁

属性值：none, overline, underline, line-through, blink  
（4）文本颜色：color

## 3，超链接样式 ##

超链接有四种状态：  
未被访问的超链接a:link  
鼠标经过超链接a:hover  
链接被点击的那一刻a:acitve  
访问过的超链接a:visited  
设置参考：

![70 3][]

## 4，背景类样式 ##

（1）background-color ： 背景色

（2）background-image：背景图片

background-image: url (image/bg.jpg);

（3）background-repeat：背景重复

可选属性：

![70 4][]

（4）background-position：背景定位

属性值：

![70 5][]

也可以用百分比、px描述（比如 50px 100px）

（5）background：背景综合设置

![70 6][]

## 5，列表样式 ##

（1）list-style-type：列表类型

可选属性：

![70 7][]

（2）list-style-position：列表标志位置

属性： outside、 inside（是否在列表中显示列表符号）

（3）list-style-image： 列表项图像

list-style-image:url(image/arrow.gif);

（4）list-style：列表综合设置

list-style: square inside url(image/arrow.gif)

## 6，表格样式 ##

caption-side 设置表格标题的位置。  
border  设置边框  
border-collapse 设置是否把表格边框合并为单一的边框。  
border-spacing 设置分隔单元格边框的距离。  
text-align 和 vertical-align 文本的对齐方式  
由于在前端基础1有介绍，对这些样式有个印象，需要的时候比较和查一下

## 7，轮廓样式 ##

（1）outline：综合设置

![70 8][]  
（2）outline-color：轮廓颜色

![70 9][]  
（3）outline-style：轮廓样式

![70 10][]  
（4）outline-width：轮廓粗细

![70 11][]

# 二、网页布局 #

## 1，页面尺寸 ##

分辨率:800x600时，页面尺寸:780x428个像素  
   分辨率:640x480时，页面尺寸:620x311个像素  
   分辨率:1024x768时，页面尺寸:1005x600个像素

## 2，布局思路 ##

由整体到局部

布局的做法总结起来就是 div + css

div相当于一个容器（盒子）  
  div标签可以把文档分割为独立的、不同的部分  
  通过id或class属性区分不同的容器

## 3，float定位（重要） ##

float：浮动，定义元素在哪个方向浮动，改变页面中对象的前后流动顺序。

属性值：

![70 12][]

float特别说明：

（1）浮动元素距离父元素边框的位置，是该侧的父元素padding+自身margin的值  
（2）通常不会超过父元素的边界  
（3）元素一旦浮动就不属于父元素了  
（4）浮动元素不会相互重叠  
（5）不能上下浮动，通常只设一种浮动即可  
（6）如果父元素宽度不够，浮动元素会另起一行显示。

## 4，overflow溢出处理 ##

overflow属性：

![70 13][]

overflow说明：

（1）、父元素不设高度并且子元素浮动时，使父元素高度自动适应子元素高度。  
（2）、父元素设置的高度或宽度小于子元素时，使父元素出现相应滚动条或隐藏子元素超出部分内容。

## 5，清除浮动 - clear ##

clear：用来设置该元素边上没有其他元素可以浮动

clear: left / right / both / none

left：不允许左边有浮动的元素  
right：不允许右边有浮动的元素  
both：不允许左右两边有浮动的元素  
none：默认值，可以浮动

## 6，position相对定位与绝对定位 ##

position属性：

![70 14][]

绝对定位  
  position:absolute  
1、与left，right，top，bottom等属性共同使用  
2、如果父元素未设置position属性，则以浏览器窗口左上角为起始位置  
3、如果父元素设置了position属性，则以父元素左上角为起始位置

相对定位  
  position:relative  
1、与left，right，top，bottom等属性共同使用  
2、以自身本应在的位置为起始位置

float和position相似点：  
1、都是将元素浮动起来  
2、元素一旦设置就与父元素没关系了

float和position不同点：  
1、position与top、left等配套使用  
2、float位置移动通过margin、padding等实现  
3、overflow和clear对position无效  
4、布局通常使用float，而不是position

顺序堆叠      z-index  
1、用于体现元素在Y轴空间的堆叠关系  
2、与position：absolute配套使用  
3、大部分情况以数字为取值  
4、可为多个元素设置

[70]: /images/20220508/37f331d0c7454a7ca7329d00b4cf312b.png
[70 1]: /images/20220508/2accd24f07594cc7829f87be2fda45c4.png
[70 2]: /images/20220508/c229f03078394d67ba025f07275dd333.png
[70 3]: /images/20220508/94e562b666ed4f1a92a09a7d07227c1f.png
[70 4]: /images/20220508/b9f1b24e8c2845a486d71728aa7fc617.png
[70 5]: /images/20220508/d66477814d6b4e018a36dff1bd746291.png
[70 6]: /images/20220508/0353858c833941929ca017e36fb6b3fe.png
[70 7]: /images/20220508/71fa405efb3b431c8052be57b978e6dc.png
[70 8]: /images/20220508/5a34950429dd42fe9760773c04a84a03.png
[70 9]: /images/20220508/b87d7759483f454d99cdf70f6dcd8f1a.png
[70 10]: /images/20220508/fe7f9eb777644b2999d5337ce849d451.png
[70 11]: /images/20220508/027a265041ac4585a613f687b10be39d.png
[70 12]: /images/20220508/33dc2e1ffae44b85b8508c2a50efafea.png
[70 13]: /images/20220508/b379720f2aab4ce68e4111cea4ce7e09.png
[70 14]: /images/20220508/e1563d24b7314ee29a662e1254f6e014.png