CSS进阶

一、超链接的伪类样式

• 语法结构

 

 

• 优先级有先后顺序

:link(未访问过的样式)>:visited(访问过的样式)>:focus(获得光标使用的样式)>:hover(鼠标悬停的样式)>:active(激活状态使用的样式)

• hover 和 active对所有元素适用
• link、visited只对超链接适用。

二、列表样式

• list-style-type
• list-style-image
• list-style-position
• list-style:(type position image)
• 一般只用list-style: none;

三、尺寸属性

• width
• 最大最小固定宽度一般用于页面布局才有效
• 固定宽度

 

 

 

• 最大宽度

 

 

• 最小宽度

适配不同分辨率，在横向滚动条出现之前可显示有效内容的尺寸

 

 

 

• height

• 同理

四、盒子模型

属性值作用位置

只有一个值：所有边框

第一个值：上下；第二个值：左右

第一个值：上；第二个值：左右；第三个值：下

第一个值：上；第二个值：右；第三个值：下；第四个值：左；（顺时针）

1. 边框(border)

• 边框颜色（border-color）
• border-top-color
• border-bottom-color
• border-left-color
• border-right-color
• 一般用下面这种设置方式：

只有一个值：四边框

 

 

 

第一个值：上下；第二个值：左右

 

 

 

第一个值：上；第二个值：左右；第三个值：下

 

 

 

第一个值：上；第二个值：右；第三个值：下；第四个值：左；（顺时针）

 

 

• 边框宽度（border-width）

只有一个值：四边框

• border-width:10px;

第一个值：上下；第二个值：左右

• border-width:10px,20px;

第一个值：上；第二个值：左右；第三个值：下

• border-width:10px,20px,30px;

第一个值：上；第二个值：右；第三个值：下；第四个值：左；（顺时针）

• border-width:10px,20px,30px,40px;
• 边框风格(border-style)
• solid (实线)
• dotted(圆点)
• dashed(虚线)
• double(双实线)
• 复合简写方式

 

 

2.外边距(margin)

上下边界距离会合并为最大的距离

子容器的外边距会传递给父容器，如果想实现外边距，需要给父容器设边框，但是有边框，设成透明也会占用像素 推荐使用 padding

3.充满页面

方法一：html body无留白充满:

*body默认有外边距，所以也要设body**的父类的高度*

 

 

 

方法二：直接设body外边距为0：

 

 

 

• 水平居中

 

 

​简写：

 

 

 

4.内边距（padding）

控制内容排布时，能用padding就不要用margin

5. 盒子模型的宽高计算（box-sizing）

盒子的总宽度=内容的宽度+左边框宽度+右边框宽度+左内边距+右内边距

盒子的总高度=内容的高度+左边框高度+右边框高度+上内边距+下内边距

• 默认内容盒子

 

 

 

• 包括了边框+内边距+内容

 

 

 

• 使用通配符设置内容盒子

 

 

 

6.背景属性

• 背景平铺

默认是平铺repeat

//非平铺（单张）

 

 

 

//x轴平铺一行

 

 

 

//y轴平铺一行

 

 

 

• 背景位置

//居中

 

 

 

//左上角

 

 

 

//右下角

 

 

 

• 复合简写方式

 

 

 

 

 

老九学堂会员社群出品

作者：wtdtcwsws