CSS语法范

最新推荐文章于 2024-09-05 11:59:45 发布

一株禾

最新推荐文章于 2024-09-05 11:59:45 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签：前端 html css

本文链接：https://blog.csdn.net/chuhe163/article/details/121256817

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

1、CSS简介
2、CSS语法规范
3、CSS代码风格
- 3.1、样式格式书写
- 3.2、样式大小写
- 3.3、空格规范
- 3.4、常用CSS命名规则
4、CSS的引入方式
- 4.1、行内样式表（行内式）
- 4.2、内部表式表（嵌入式）
- 4.3、外部样式表
5、CSS基础选择器
- 5.1、选择器分类
- 5.2、标签选择器
- 5.3、类选择器
- - 5.3.1、类选择器的使用
  - 5.3.2、多类名使用方式
- 5.4、id选择器
- 5.5、class选择器和id选择器的区别
- 5.6、通配符选择器
6、复合选择器
- 6.1、后代选择器
- 6.2、子选择器
- 6.3、并集选择器
- 6.4、伪类选择器
7、字体属性
- 7.1、字体
- 7.2、字体大小
- 7.3、字体粗细
- 7.4、字体样式
- 7.5、字体复合属性
8、文本属性
- 8.1、文本颜色
- 8.2、文本对齐
- 8.3、文本装饰
- 8.4、文本缩进
- 8.5、行间距
- 8.6、垂直居中
9、用户界面
- 9.1、鼠标样式cursor
- 9.2、轮廓线outline
- 9.3、防止拖拽文本域resize
- 9.4、vertical-align属性应用
10、背景
- 10.1、背景颜色
- 10.2、背景图片
- 10.3、背景平铺
- 10.4、背景图片位置
- 10.5、背景图像固定（背景附着）
- 10.6、背景属性复合写法
- 10.7、背景色半透明
11、元素显示模式
- 11.1、什么是元素显示模式
- 11.2、元素显示模式的分类
- 11.3、元素显示模式转换
12、CSS的三大特性
- 12.1、层叠性
- 12.2、继承性
- 12.3、行高的继承性
- 12.4、优先级
13、盒子模型
- 13.1、盒子模型（Box Model）组成
- 13.2、边框（border）
- 13.3、页边距（padding）
- 13.4、外边距（margin）
- 13.5、清除内外边距
14、浮动
- 14.1、传统网页布局的三种方式
- 14.2、浮动基本语法
- 14.3、浮动的特性
- 14.4、常见网页布局
- 14.5、浮动布局的注意点
- 14.6、清除浮动
- 14.7、清除浮动方法
15、定位
- 15.1、为什么需要定位
- 15.2、定位组成
- 15.3、静态定位sttic
- 15.4、相对定位relative
- 15.5、绝对定位absolute
- 15.6、子绝父相原则
- 15.7、固定定位fixed
- 15.8、粘性定位sticky
- 15.9、定位的叠放顺序
- 15.10、绝对定位的盒子居中
- 15.11、定位的特殊性
16、CSS属性书写顺序
17、去除列表前的小圆点或数字
18、元素的显示与隐藏
- 18.1、display属性
- 18.2、visibility属性
- 18.3、overflow属性
19、圆角边框
- 19.1、圆角边框介绍
- 19.2、圆形盒子的实现
- 19.3、圆角矩形盒子的实现
20、盒子阴影
- 20.1、盒子阴影用法
- 21.2、鼠标经过盒子产生阴影
22、文字阴影
23、图片格式
- 23.1、常见图片格式
- 23.2、插件切图
24、精灵图
- 24.1、精灵图产生的原因
- 24.2、精灵图（sprites）原理
- 24.3、精灵图使用
25、字体图标

1、CSS简介

CSS是层叠样式表（Cascading Style Sheets）的简称。
也称CSS样式表或级联样式表。
CSS也是一种标记语言。
美化HTML。

2、CSS语法规范

CSS规则由两个主要部分构成：选择器以及一条或多条声明。
CSS一般写在标签中

<html>
<head>

    <title>Document</title>
    <style>
        p{
            color:red;
            front-size:12px;
        }
    </style>
</head>
<body>
    
</body>
</html>

3、CSS代码风格

3.1、样式格式书写

紧湊格式

        p{ color:red;front-size:12px; }

展开格式，推荐使用这种格式

        p{
            color:red;
            front-size:12px;
        }

3.2、样式大小写

样式选择器、属性名、属性值推荐使用小写字母，特殊情况除外。

3.3、空格规范

属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号之间保留一个空格

3.4、常用CSS命名规则

常用CSS命名规则

常用类名	命名	常用类名	命名	常用类名	命名
头	header	内容	content/container	加入	joinus
尾	footer	栏目	column	指南	guild
页脚	footer	栏目标题	title	服务	service
导航	nav	文章列表	list	注册	regsiter
子导航	subnav	提示信息	msg	状态	status
侧栏	sidebar	页面主体	main	投票	vote
左右中	left right center	搜索	search	合作伙伴	partner
登录条	loginbar	标签页	tab	友情链接	friendlink
广告	banner	小技巧	tips	新闻	news
菜单	menu	滚动	scroll	下载	download
子菜单	submenu	热点	hot	版权	copyright
页面外围控制整体布局宽度	wrapper

功能CSS命名规则

功能	命名	功能	命名
标志	logo	按钮	btn
广告	banner	滚动	scroll
登陆	login	标签页	tab
注册	regsiter	文章列表	list
搜索	search	提示信息	msg
功能区	shop	当前的	current
标题	title	小技巧	tips
加入	joinus	图标	icon
状态	status	注释	note
指南	guild	服务	service
热点	hot	新闻	news
下载	download	投票	vote
合作伙伴	partner	友情链接	link
版权	copyright

导航CSS命名规则

导航名称	命名
导航	nav
主导航	mainbav
子导航	subnav
顶导航	topnav
边导航	sidebar
左导航	leftsidebar
功能区	shop
菜单	menu
子菜单	submenu
标题	title
摘要	summary

页面结构CSS命名规则

页面结构	命名
容器	container
页头	header
内容	content/container
页面主体	main
页尾	footer
导航	nav
侧栏	sidebar
栏目	column
页面外围控制整体布局宽度	wrapper
左右中	left right center

4、CSS的引入方式

CSS的三种样式表:

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

4.1、行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式
适合修改简单样式。
也称为行内式样式表。

<p style="color: red; front-size: 16px;">锄禾日当午，汗滴河下土</p>

4.2、内部表式表（嵌入式）

写到html页面内部
将所有的CSS代码抽取出来，单独放到一个<style></style>标签中
<style></style>标签理论上可以放在HTML文档的任何地方, 但一般会放在文档的<head></head>标签中。
此种方式方便控制当前整个页面中的元素样式设置。
代码结构清晰，但并没有实现结构与样式完全分离。
内部样式表设定CSS，通常也称为嵌入式引入。

4.3、外部样式表

核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入外部样式表分为两步：

新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
在HTML页面中，使用标签引入这个文件

<head>
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css" >
</head>

属性	作用
rel	1、定义当前文档与被链接文档之间的关系 2、这里需要指定为stylesheet，表示被链接的文档是一个样式表文件
href	定义所链接的外部样式表文件的URL

5、CSS基础选择器

5.1、选择器分类

选择器可分为：

基础选择器
复合选择器

基础选择器由单个选择器组成

基础选择器包括：

标签选择器
类选择器
id选择器
通配符选择器

5.2、标签选择器

指用HTML标签名称作为选择器

    <style>
        p {
            color: red;
            front-size: 12px;
        }
        div {
            div: green;
        }
    </style>

5.3、类选择器

5.3.1、类选择器的使用

若想差异化单独选一个或者某几个标签，可以使用类选择器。
结构需要用class属性来调用class类
类选择器使用“.”（英文点号）进行标识，后面紧跟类名（需自定义）
不能用关键字作为类名


<head>
    <title>类选择器</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <h1>区块链技术</h1>
    <ul>
        <li>BTC</li>
        <li>ETC</li>
        <li class="red">Pi Network</li>
    </ul>    
</body>

5.3.2、多类名使用方式

标签class属性中写多个类名
类名中间必须用空格分开
该标签分别具有这些类名的样式

<head>
    <title>多类名使用</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
        .red {
            background-color:red;
  
        }
        .green {
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    
</body>

5.4、id选择器

可为标有特定id的HTML元素指定样式
HTML元素以id属性来设置id选择器
CSS中id选择器以“#”来定义


<head>
    <title>Document</title>
    <style>

        #red {
            background-color:red;
        }


    </style>
</head>
<body>
    <div id="red"></div>    
</body>

5.5、class选择器和id选择器的区别

id属性唯一，经常和JavaScript搭配使用
class属性可以重命

5.6、通配符选择器

使用“*”选取页面中所有元素（标签）
不需要调用，自动给所有元素使用样式

        * {
            background-color:red;
            margin: 0;
            padding: 0;
        }

6、复合选择器

由两个或多个基础选择器，通过不同的方式组合而成。

包括：

后代选择器
子选择器
并集选择器
伪类选择器

6.1、后代选择器

<!--语法规则-->
元素1 元素2 {样式声明}

又称包含选择器
元素2是元素1的后代元素，最终选择的是元素2
元素1和元素2中间用空格隔开
元素2也可以是孙子元素，只要是包含在元素1中间的元素，都可以选择

<style>
    ul li{
        color: red;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

元素1、元素2可以是任意基础选择器的组合

<style>
    .name li{
        color: red;
    }
</style>
<ul class="name">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

6.2、子选择器

只能选择最近一级子元素，即只能选亲儿子元素
语法规则：

元素1>元素2 {样式声明}

元素2是元素1的亲儿子，最终选择的是元素2
元素1和元素2中间用>隔开
元素2必须是元素1的亲儿子，孙子、重孙子都不行

<style>
    div>a{
        color: red;
    }
</style>
<div>
    <a href="#">儿子</a>
    <p>
        <a href="#">孙子</a>
    </p>
</div>

6.3、并集选择器

可以选择多组标签，同时为其定义相同样式
通过英文逗号，连接
，可以理解为和的意思
任何形式的选择器都可以作为并集选择器的一部分
语法：

元素1,元素2{样式声明}

<style>
    div,
    p,
    .pig li {
        color: red;
    }
</style>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <ul class="pig">
        <li>佩奇</li>
        <li>乔治</li>
        <li>小恐龙</li>
    </ul>
</body>

6.4、伪类选择器

选择第1个或第n个元素
用:表示，如:hover、:first-child

6.4.1、链接伪类选择器

选择器	描述
`a:link`	选择所有未被访问的链接
`a:visited`	选择所有已被访问的链接
`a:hover`	选择鼠标指针位于其上的链接
`a:active`	选择活动链接（鼠标按下未弹起的链接）

<style>
    a:link {
        color: red;
        text-decoration: none;
    }
</style>
<a href="#">佩奇</a>

6.4.2、链接伪类选择器的注意事项

为确保生效，需按照LVHA的顺序声明:link、:visited、:hover、:active
因a链接在浏览器中具有默认样式，故实际工作中需要给链接单独指定样式
开发中使用最多的写法如下：

<style>
/*所有链接*/    
    a {
        color: gray;
    }

/*鼠标经过*/
    a:hover {
        color: red;
    }
</style>

6.4.3、focus伪类选择器

:focus伪类选择器用于选择获得焦点的表单元素

<style>
    input:focus {
        background-color: blue;
    }
</style>

7、字体属性

Fonts（字体）属性用于定义字体、大小、粗细和文字样式（如斜体）

7.1、字体

使用font-family属性定义文本字体
各种字体之间必须使用英文状态下的逗号隔开
字体若由多个单词组成加英文单引号
尽量使用系统默认自带字体，保证在任何用户浏览器均能正确显示
写多个字体的好处是，当第一个字体不存在时，会选用第二个字体，依次类推
当所有设置字体均不存在，则使用用户浏览器默认字体显示

        body {
            font-family: 'Microsoft Yahei',‘Times New Roman’,Arial,微软雅墨，‘Hiragino Sans GB’；
        }

7.2、字体大小

使用font-size属性定义字体大小
px（像素）大小是网页最常用的单位
谷歌浏览器默认文字大小为16px
不同浏览器可能默认显示字体大小不一致
-可以给body指定整个页面文字大小
-标题标签比较特殊，需要单独指定文字大小

  body {
            font-size: 16px；
        }

7.3、字体粗细

使用font-weight属性设置文本字体粗细

属性值	描述
normal	默认值（不加粗）
bold	定义粗体（加粗）
100-900	1、400等同于normal 2、700等同于bold 3、这个数字后面不跟单位

        .bold {
            font-weight: bold;
        }

		/*700后面不要加单位*/
        .bold {
            font-weight: 700;
        }

7.4、字体样式

使用fon-style属性设置文本的风格

属性值	描述
normal	1、默认值，标准的字体样式 2、可以使倾斜字体变的不倾斜
italic	显示斜体的字体样式

 .p {
     font-style: italic;
 }

7.5、字体复合属性

字体属性可以把以上文字样式综合来写，更节约代码。
使用font属性时，必须严格按上面语法格式中的顺序书写
不能更换顺序
各个属性间以空格隔开
不需要设置的属性可以省略
必须保留font-size和font-family属性，否则font属性将不起作用

/* font: font-style font-weight font-size/line-height font-family; */
body {
    
    font:italic 700 16px/20px 'Microsoft Yahei'
}

8、文本属性

8.1、文本颜色

color属性用于定义文本颜色

颜色表示方法	属性值
预定义的颜色值	如red、green、blue
十六进制	#FF0000
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

8.2、文本对齐

text-align属性用于设置元素内文本内容的水平对齐方式。

属性值	描述
left	左对齐（默认值）
right	右对齐
center	居中对齐

8.3、文本装饰

text-decoration属性规定添加到文本的修饰。
可以给文本添加下划线、删除线、上划线等。

属性值	描述
none	1、默认。没有装饰线（最常用） 2、可以去除链接的下划线
underline	下划线。链接a自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线

8.4、文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
em是一个对相单位，就是当前元素1个文字的大小，
如果当前元素没有设置大小，em则会按照父元素的1个文字大小进行设定

p {
    text-indent: 20px;
}

或者

p {
    text-indent: 2em;
}

8.5、行间距

p {
	/*如果字体是16px,则上间距=下间距=2px*/
    text-height: 20px;
}

line-height属性用于设置行间的距离（行高）。
可以控制文字行与行之间的距离。
行间距改变的是上间距和下间距的高度。
行间距不会改变文本高度。

8.6、垂直居中

CSS中没有提供文字垂直居中的代码，可以使用一个小技巧实现
解决方案：让文字的行高等于盒子的高度，即可实现。
文字的行高<盒子高度，文字偏上
文字的行高>盒子高度，文字偏下
文字的行高line-height
盒子的高度height

<style>
    span {
        width: 100px;
        height: 500px;
        display: block;
        line-height: 10px;
        background-color: red;
    }
</style>

<span>佩奇</span>

<span>佩奇</span>

9、用户界面

9.1、鼠标样式cursor

设置鼠标样式。
语法：
```
li{cursor:pointer;}
```

值	描述
default	白色指针。默认。
pointer	小手
move	移动
text	光标指标
not-allowed	禁止

9.2、轮廓线outline

样式之后，可以去掉默认的蓝色边框。
给表单添加outline:0;
或者outline:node;

<style>
    input {
        outline: none;
    }
</style>
<input type="text">

9.3、防止拖拽文本域resize

语法：

    textarea {
        resize: none;       
    }

示例：

<style>
    textarea {
        resize: none;
        outline: none;
    }
</style>
<textarea name="" id="" cols="30" rows="10"></textarea>

9.4、vertical-align属性应用

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。
使用vertical-align
设置图片或者表单（行内块元素）和文字垂直对齐
只针对行内元素和行内块元素有效。

语法：

 vertical-align: baseline|top|middle|bottom

值	描述
baseline	默认。元素放置在父元素基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

在这里插入图片描述

10、背景

10.1、背景颜色

背景颜色	描述
`background-color:transparent;`	背景透明色
`background-color:red;`	背景红色
`background-color:#fff;`	背景白色
`background-color:#ffffff;`	背景白色

10.2、背景图片

background-image属性描述了元素的背景图像。
常见于logo、装饰性小图片或者超大背景图片。
优点是便于控制位置。

<style>
    div {
        width: 300px;
        height: 300px;
        background-image: url(images/logo.png);
    }
</style>

<div></div>

参数值	作用
none	无背景图（默认）
url	使用绝对或相对地址指定背景图像

10.3、背景平铺

使用background-repeat属性设置

参数值	说明
repeat	1、背景图像在纵向和横向上平铺。 2、默认平铺
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

<style>
    div {
        width: 300px;
        height: 300px;
        background-image: url(images/logo.png);
        background-repeat: no-repeat;
    }
</style>

<div></div>

10.4、背景图片位置

使用background-position属性。
语法
```
background-position: x y;
```
参数可以使用方位名词或精确单位。

参数值	说明
length	百分数
position	top、center、botton、left、center、right方位名词

参数是方位名词：

如果指定的两个值都是方位名词，则两个值前后顺序无关，如left top和top left效果一样
```
/*靠上居中*/
background-position: center top;
```
如果只指定了一个方位名词，则第二个值默认居中对齐
```
/*靠上居中*/
background-position: top;
```

参数是精确单位：

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
```
background-position: 20px 50px;
```
如果只指定了一个数值，那该数值一定是x坐标，另一个坐标默认垂直居中

参数是混合单位：

如果是指定的两个值是精确单位和方位名词混合使用，刚第一个值是x坐标，第二个值是y坐标。

 background-position: 20px center;

10.5、背景图像固定（背景附着）

设置背景图像是否固定或者随着页面滚动
使用background-attachment属性
语法：

background-attachment: scroll|fixed

参数	作用
scroll	背景图像随内容滚动
fixed	背景图像固定

10.6、背景属性复合写法

background-color、background-image、background-repeat、background-position、background-attachment五个属性可以合并简写
合并简写在同一个属性background
没有特定书写顺序

习惯约定：

background: 背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置

例如：

 background: red url(images/logo.png) no-repeat fixed center top;

10.7、背景色半透明

  background: rgba(0, 0, 0, 0.3);

最后一个参数是alpha透明度，取值范围在0~1之间
习惯把0.3的0省略，写为background: rgba(0, 0, 0, .3);
盒子背景色半透明，盒子里面的内容不受影响
CSS3新增属性，IE9及以上版本浏览器才支持

11、元素显示模式

11.1、什么是元素显示模式

就是元素（标签）以什么方式显示
比如<div>独占一行
比如一行可放多个<span>
HTML元素一般分为块元素和行内元素两种类型

11.2、元素显示模式的分类

11.2.1、块元素

常见的快元素有<h1>、<p>、<div>、<ul>、<ol>、<li>等
其中<div>是最典型的块元素

块元素的特点：

独占一行。
高度、宽度、外边距和内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内元素或者块元素。

注意事项：

文字类的元素内不能使用块元素
<p>标签主要用于存放文字，因此其内不能放<div>
<h1>~<h6>等都是文字类元素，其内也不能放块元素。

11.2.2、行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>。
是最典型的行内元素。
行内元素有时也被称为内联元素。

行内元素的特点：

一行可放多个行内元素
高、宽直接设置是无效的
默认宽度就是其本身内容的宽度
行内元素只能容纳文本或其行内元素

注意事项：

链接里面不能再放链接
<a>里面可以放块元素，但是给<a>转换一下块级模式最案例

11.2.3、行内块元素

行内元素中有几个特殊的标签<img />、<input />、<td>、
它们同时具有块元素和行内元素的特点
有些资料称它们为行内块元素。

行内块元素的特点：

相邻行内块元素在一行上，但是他们之间会有空白缝隙。一行可显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度、行高、外边距及内边距都可以控制（块元素特点）

11.3、元素显示模式转换

特殊情况下，需要元素模式转换
如想要增加链接<a>的触发范围
如 <a>转换成块元素后，就可以为其设置宽度和高度。

11.3.1、行内元素转换成块元素

使用display: block;
行内元素转换成块元素以后，可为其设置宽度和高度
行内元素转换成块元素以后，也会独占一行

<style>
    a {
        width: 100px;
        height: 50px;
        display: block;
    }
</style>

<a href="#">佩奇</a>

11.3.2、块无素转换成行内元素

使用display: inline;
块元素转换成行内行素后，将不再独占一行
块元素转换成行内行素后，也不能为其设置高度和宽度

<style>
    div {
        display: inline;
    }
</style>

<div>佩奇</div>
<div>乔治</div>

11.3.3、转换成行内块

使用display:inline-block;

<style>
    span {
        width: 100px;
        height: 30px;
        display: inline-block;
    }
</style>

<span>佩奇</span>

12、CSS的三大特性

层叠性
继承性
优先则

12.1、层叠性

给相同选择器设置不同样式，此时一个样式会覆盖（层叠）另一个冲突的产式
层叠性原则：
样式冲突，后面的样式会覆盖前面的样式。

样式不冲突，不会层叠

/*color样式冲突，会层叠*/
/*font-size样式不冲突，不会层叠*/
<style>
    div {
        color: red;
        font-size: 20px;
    }

    div {
        color: blue;
    }
</style>

12.2、继承性

子标签会继承父标签的某些样式.
子元素可以继承父元素的样式：
text-、font-、line-这些开头的元素属性，以及color属性

<style>
    div {
        color: red;
        font-size: 20px;
    }
</style>

<div>
    <p>锄禾日当午</p>
</div>

上面代码p标签会继承div的样式

12.3、行高的继承性

body{
	font:12px/1.5 'Microsoft YaiHei'
}

子元素可以继承父元素的行高
行高可以跟单位也可以不跟
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是，当前子元素的文字大小*1.5

<style>
    bddy {
        font: 12px/1.5 'Microsoft YaiHei';
    }

    div {
        font-size: 14px;
    }
</style>

<body>
    <div>佩奇</div>
    <p>乔治</p>
</body>

上面代码
p和div是body的子元素
子元素p和div都继承了父元素body的行高1.5
div标签font-size=14px，故其行高=14*1.5=21px
p标签 font-size继承自body，font-size=12px，故其行高=12*1.5=18px
body行高1.5，这种写法的最大优势就是面面子元素可以根据自己文字大小自动调整行高。

12.4、优先级

当多个选择器指向同一个元素，就会有优先级的产生
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

选择器权重如下

选择器	权重
继承或者`*`	0,0,0,0
元素选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式`style=""`	1,0,0,0
!important重要的	无穷大

<style>
    .name {
        color: red;
    }

    div {
        color:  rebeccapurple!important;
    }

    #chuhe {
        color:blue;
    }
</style>

<div class="name" id="chuhe" style="color: violet">锄禾日当午</div>

权重的叠加

<style>
    ul li {
        color: red;
    }

    li {
        color: blue
    }
</style>

<ul>
    <li></li>
</ul>

上面代码
ul li的权重为0,0,0,1+0,0,0,1=0,0,0,2
li的权重为0,0,0,1
故执行color: red;

13、盒子模型

页面布局三大核心：

盒子模型
浮动
定位

13.1、盒子模型（Box Model）组成

边框border
外边距margin
内边距padding
内容content

13.2、边框（border）

使用border设置元素边框
边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
边框会影响盒子的大小。

语法：

border: border-width || border-style || border-color

属性	作用
border-width	1、定义边框粗细 2、单位是px
border-style	边框的样式
border-color	边框颜色

13.2.1、边框样式

border-style值：

属性	描述
none	默认无边框
dashed	虚线边框
dotted	点线边框
solid	实线边框
double	定义两个边框。两个边框的宽度和border-width的值相同
groove	定义3D沟槽边框。效果取决于边框颜色。
ridge	定义3D脊边框。交果取决于边框颜色。
inset	定义一个3D的嵌入边框。效果取决于边框颜色。
outset	定义一个突出边框。效果取决于边框颜色值

13.2.2、边框复合写法

语法：

/*没有顺序*/
border: 1px solid red;

13.2.3、边框各边设置

语法：

border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;

实例：
上边框为红色，其余边为蓝色。

<style>
    div {
        width: 200px;
        height: 200px;
        border:1px solid blue;
        border-top:1px solid red;
    }
</style>
<div>

</div>

13.2.4、表格细线边框

border-collapse属性控制浏览器绘制表格边框的方式。
它控制相邻单元格的边框。
语法：
```
border-collapse: collapse;
```
collapse是合并的意思。
border-collapse: collapse;表示相邻边框合并在一起。

<style>
    table {
        width: 500px;
        height: 300px;
    }

    table,
    td,
    th {
        border: 1px solid red;
        border-collapse: collapse;
    }
</style>
<table>
    <tr>
        <th>序号</th>
        <th>标题</th>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td></td>
    </tr>
</table>

13.3、页边距（padding）

13.3.1、页边距的使用

使用padding属性设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

13.3.2、页边距（padding）复合写法

值的个数	表达意思
`padding: 5px;`	1个值，代表上下左右都有5像素内边距
`padding: 5px 10px;`	2个值，代表上下内边距是5 像素，左右内边距是10px
`padding: 5px 10px 20px;`	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
`padding: 5px 10px 20px 30px;`	4个值，上5像素，右10像素，下20像素，左30像素，顺时针

13.3.3、padding与盒子的大小

padding会影响盒子的大小。

padding不会影响盒子的大小的情况：

下面代码
p继承父标签div的宽度width=300px;
但是并未直接给p标签指定宽度
此时padding不会影响p的宽度，依然是width=300px
如果直接给p标签指定宽度，哪怕是指定的宽度和父标签一样，padding依然会影响盒子大小

<style>
    div {
        width: 300px;
        height: 100px;
        background-color: purple;
    }

    p {
        padding: 30px;
        background-color: skyblue;
    }
</style>
<div>
    <p></p>
</div>

13.4、外边距（margin）

13.4.1、外边距的使用

使用margin设置外边距
控制盒子与盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

13.4.2、外边距的复合写法

值的个数	表达意思
`margin: 5px;`	1个值，代表上下左右都有5像素外边距
`margin: 5px 10px;`	2个值，代表上下外边距是5 像素，左右外边距是10px
`margin: 5px 10px 20px;`	3个值，代表上外边距5像素，左右外边距10像素，下内外距20像素
`margin: 5px 10px 20px 30px;`	4个值，上5像素，右10像素，下20像素，左30像素，顺时针

13.4.3、利用外边距让块级盒子水平居中

必须满足两个条件：

盒子必须指定了宽度（width）
盒子左右的外边距都设置为auto

常见的写法

以下三种都可以：

margin-left: auto;
margin-right: auto;

margin: auto;

margin: 0 auto;

以上方法是让块级元素水平居中
行内元素或者行内块元素水平居中给其父元素添加text-align:center;即可。

13.4.4、外边距合并

使用margin定义块元素的垂直外边距时，可能会引起外边距的合并。
对于两个嵌套关系（你子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：
- 可以为父元素定义上边距border:1px solid transparent;
- 可以为父元素定义上内边距padding:1px;
- 可以为父素添加overflow:hidden;
- 还有其它方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。
- 浮动的盒子不会有外边距合并

13.5、清除内外边距

网页元素很多带有默认的内外边距。
不同浏览器默认值也不一致。

因此布局前要清除下网页元素的内外边距。

<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>

注意：

行内元素为了照顾兼容性，尽量只设置左右内外边距，
不要设置上下内外边距（因为设置了也可能不生效）。
需要设置可以转换为块级和行内块元素。

14、浮动

14.1、传统网页布局的三种方式

标准流（普通流/文档流）：标签按照规定默认方式排列。
浮动
定位

网页布局准则：

多个块元素纵向排列用标准流。
多个块元素横向排列用浮动。

14.2、浮动基本语法

float属性用于创建浮动边框，将其移动到一边，直到左边缘或右边缘触及另一个浮动框的边缘。
语法：
```
选择器{float: 属性值}
```

参数值	描述
none	默认值。元素不浮动
left	向左浮动
right	向右浮动

14.3、浮动的特性

浮动元素会脱离标准流（脱标）。
浮动的元素会一行内显示并且元素顶部对齐。
浮动的元素会具有行内块元素的特性。
浮动的盒子不再保留原先的位置。
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动盒子，多出的盒子会别起一行对齐。
浮动元素具有行内块元素特性。
如果行内元素有了浮动，则不需要转换成块元素或行内块元素，就可以直接给高度和宽度。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间没有缝隙，是紧挨在一起的。
行内元素同理。

14.4、常见网页布局

在这里插入图片描述

14.5、浮动布局的注意点

一、浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

二、一个元素浮动了，理论上其余兄弟元素也要浮动。

一个盒子里面有多个盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。

14.6、清除浮动

一、为什么清除浮动？

父级盒子很多情况下，不便给高度，但是盒子浮动又不占有位置，会导致父级盒子高度为0，此时会影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

二、清除浮动的本质

清除浮动的本质就是清除浮动元素造成的影响。
如果父盒子本身有高度，则不需要清除浮动。
清除浮动后，父级元素会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流元素了。

三、清除浮动的策

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

四、语法：

选择器 {clear:属性值}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

实际工作中，几乎只用clear:both;

14.7、清除浮动方法

清除浮动有以下四种：

额外标签法也称为隔墙法，是W3C推荐的做法。
父级添加overflow属性。
父级添加after伪元素。
父级添加双伪元素。

14.7.1、额外标签法

在浮动元素末尾添加一个空的标签。例如<div style="clear: both"></div>
注意：要求这个新的空标签必须是块元素。

<style>
    .box {
        width: 300px;
        border: 1px solid blue;
        background-color: skyblue;
        margin: 0 auto;
    }

    .one {
        width: 100px;
        height: 100px;
        float: left;
        background-color: pink
    }

    .two {
        width: 100px;
        height: 100px;
        float: left;
        background-color: pink;
    }

    .three {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 0 auto;
    }

    .clear {
        clear: both;
    }
</style>

<div class="box">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="clear"></div>
</div>
<div class="three">3</div>

14.7.2、父级添加overflow属性

给父级添加overflow属性，将其属性值设置为hidden、auto、scroll
缺点：无法显示溢出的部分

<style>
    .box {
        width: 300px;
        border: 1px solid blue;
        background-color: skyblue;
        margin: 0 auto;
        /*清除浮动*/
        overflow: hidden;
    }

    .one {
        width: 100px;
        height: 100px;
        float: left;
        background-color: pink
    }

    .two {
        width: 100px;
        height: 100px;
        float: left;
        background-color: pink;
    }

    .three {
        width: 100px;
        height: 120px;
        background-color: red;
        margin: 0 auto;
    }
</style>

<div class="box">
    <div class="one">1</div>
    <div class="two">2</div>

</div>
<div class="three">3</div>

14.7.3、父级添加:atfer伪元素

:after方式是客外标签法的升级版。也是给父元素添加。

语法：

    .clearfix::after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix{
        /*IE6、7专有*/
        *zoom: 1;
    }

父级添加:atfer伪元素:

<style>
    .box {
        width: 300px;
        border: 1px solid blue;
        background-color: skyblue;
        margin: 0 auto;
    }

    .one {
        width: 100px;
        height: 100px;
        float: left;
        background-color: pink
    }

    .two {
        width: 100px;
        height: 100px;
        float: left;
        background-color: pink;
    }

    .three {
        width: 100px;
        height: 120px;
        background-color: red;
        margin: 0 auto;
    }

    .clearfix::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        /*IE6、7专有*/
        *zoom: 1;
    }
</style>

<div class="box clearfix">
    <div class="one">1</div>
    <div class="two">2</div>

</div>
<div class="three">3</div>

14.7.4、双伪元素清除浮动

给父元素添加。
代表网站：小米、腾讯。
语法：

    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

双伪元素清除浮动示例：

<style>
    /*以下为双伪无素清除浮动*/
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }
	 /*IE6、7专有*/
    .clearfix {
        *zoom: 1;
    }

    /*以上为双伪无素清除浮动*/
    .box {
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
    }

    .one {
        width: 100px;
        height: 100px;
        float: left;
        background-color: pink
    }

    .two {
        width: 100px;
        height: 120px;
        background-color: red;
        margin: 0 auto;
    }
</style>

<div class="box clearfix">
    <div class="one">1</div>
    <div class="one">2</div>

</div>
<div class="two">3</div>

15、定位

15.1、为什么需要定位

某个元素可以自由的在一个盒子内移动位置，并且压住其它盒子。
滚动窗口时，盒子是固定在屏幕某个位置。

15.2、定位组成

定位是将盒子定在某一个位置。
定位=定位模式+边偏移

一、定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可分为四个：

值	描述
`sttic`	静态定位
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

二、边偏移

就是定位的盒子移动到最终位置。
有top、bottom、left和right四个属性。

15.3、静态定位sttic

默认的定位方式，无定位的意思。
语法：
```
选择器{position:static;}
```
静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时很少用到。

15.4、相对定位relative

元素在移动位置时，是相对于它原来的位置来说的。
原来在标准的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
语法：
```
选择器{position:relative;}
```

示例：

    .box{
        position: relative;
        top: 100px;
        left: 100px;
    }

15.5、绝对定位absolute

元素在移动位置时，相对于它的祖先元素来说的。
语法：
```
选择器{position:absolute;}
```

绝对定位的特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置（脱标）。

15.6、子绝父相原则

子级元素使用绝对定位，父级元素则需要相对定位。
子级元素使用绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响到其他兄弟盒子。
子绝父相是因为，父级元素需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
绝对定位不占有原来位置，相对定位占有原来位置。
子绝父相只是相对使用较多，并不是完全要遵照这个原则。

15.7、固定定位fixed

元素固定于浏览器可视区的位置
主要使用场景：可使浏览器页面滚动时元素的位置不变。
语法：
```
选择器{position:fixed;}
```

一、固定定位的特点：

1、以浏览器的可视窗口为参照点移动元素。

跟父元素没有关系
不随滚动条滚动

2、固定定位不占有原来位置。

固定定位也是脱标的。
固定定位可以看做是一种特殊的绝对定位。

二、固定定位小技巧：固定在版心右侧位置
算法：

让固定定位的小盒子left:50%，走到浏览器可视区（也是版心）的一半位置。
让固定定位的盒子margin-left:版心宽度的一半距离。就可以固定在版心右侧对齐了。

三、示例：

<style>
    .w {
        width: 1000px;
        height: 2000px;
        margin: 100px auto;
        background-color: skyblue;
    }

    .fixed {
        position: fixed;
        left: 50%;
        margin-left: 500px;
        width: 50px;
        height: 30px;
        background-color: pink;
    }
</style>
<div class="fixed"></div>
<div class="w"></div>

15.8、粘性定位sticky

粘性定位可以认为是相对定位和固定定位的混合。
不常用，兼容性差。
IE不支持。
语法：
```
选择器{position:sticky;top:10px;}
```

一、粘性定位的特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）。
必须添加top、left、right、bottom其中一个才有效。

15.9、定位的叠放顺序

使用z-index来控制盒子的前后次序（Z轴）。
语法:
```
选择器{z-index:1;}
```
数值可以是正整数、负整数或0
默认是auto，数值越大，盒子越靠上。
如果属性相同，则按书写顺序，后来者居上。
数字后面不能加单位。
只有定位的盒子才有z-index属性。

15.10、绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto;设置水平居中。
可以用下面的方法现水平居中。
垂直居中方法雷同。

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        position: absolute;   
        /*让盒子左移动50%*/    
        left: 50%;
        /*让盒子左移自身宽度的一半*/
        margin-left: -100px;

    }
</style>

<div class="box"></div>

15.11、定位的特殊性

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小。
脱标的盒子不会触发外边距塌陷。
浮动元素、绝对定位（固定定位）的元素都不会触发外边距合并的问题。
绝对定位（固定定位）会完全压住盒子。
浮动元素，只会压住它下面标准流的盒子，但不会压住标准流盒子里面的文字（图片）。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

16、CSS属性书写顺序

建议遵循以下顺序：
1、布局定位：display、position、float、clear、visibility、overflow（建议display第一个写，毕竟关系到模式）
2、自身属性：width、height、margin、padding、border、background
3、文本属性：color、font、text-decoration、text-align、vertical-align、white-space、break-word
4、其它属性(CSS3)：content、cursor、border-radius、box-shadow、text-shadow、background:linear-gradient…

17、去除列表前的小圆点或数字

    li {
        list-style: none;
    }

18、元素的显示与隐藏

display显示隐藏
visibility显示隐藏
overflow溢出显示隐藏

18.1、display属性

用于设置一个元素应如何显示。

值	作用
none	1、隐藏对象。 2、隐藏后不占有位置。
block	除了转换为块级元素之外，同时还有显示元素的意思。

18.2、visibility属性

值	作用
visible	元素可见
hidden	1、元素隐藏. 2、隐藏元素后，继续占有原来的位置

18.3、overflow属性

值	作用
visible	显示全部内容
auto	1、此为body对象和textarea的默认值。 2、在需要时添加滚动条。
hidden	不显示超过对象尺寸的内容
scroll	总是显示滚动条

如果有定位的盒子，需慎用overflow:hidden，因为它会隐藏多余的部分。

19、圆角边框

19.1、圆角边框介绍

CSS3中新增
IE9及以上显示
对整体页面布局无影响，不用担心兼容性。

语法：

/*length可以是像素也可以是百分比*/
border-radius: length;

如：

border-radius: 10px;

border-radius: 50%;

圆角边框分开写法：

属性	描述
border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-right-radius	右下角
border-bottom-left-radius	左下角

圆角边框复合写法：

写法	描述
border-radius: 10px;	一个值，所有倒角半径都是10px
border-radius: 10px 20px;	两个值，
border-radius: 10px 20px 30px;	三个值，
border-radius: 10px 20px 30px 40px;	四个值，左上角，右上角，右下角，左下角，顺时针

19.2、圆形盒子的实现

下面代码
宽、高相同即为一个正方形盒子
设置倒角的半径与宽/2、高/2相等即border-radius: 100px;
也可以设置border-radius: 50%;同样可以做出圆形盒子。

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        border-radius: 100px;
    }
</style>

<div></div>

19.3、圆角矩形盒子的实现

<style>
    div {
        width: 500px;
        height: 200px;
        background-color: pink;
        border-radius: 100px;
    }
</style>

<div></div>

如果是个矩形可以设置倒半径为高度的一半

20、盒子阴影

20.1、盒子阴影用法

CSS3中新增
IE9及以上显示
对整体页面布局无影响，不用担心兼容性。
使用box-shadow属性为盒子添加阴影

语法：

box-shadow:h-shadow v-shadow blur spread color inset;

参数	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影outset改为内部阴影

默认的是外阴影（outset），但是不可以写这个单词，否则会导致阴影无效。
盒子阴影不占用空间，不会影响其他盒子排列。
```
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
```

21.2、鼠标经过盒子产生阴影

hover不仅仅是只可以用在链接上。比如div:hover等。

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;

    }

    div:hover {
        box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);

    }
</style>

<div></div>

22、文字阴影

- CSS3中新增
IE9及以上显示
对整体页面布局无影响，不用担心兼容性。
使用text-shadow属性将阴影用于文本。

语法：

text-shadow: h-shadow v-shadow blur color;

参数	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离。
color	可选。阴影的颜色。

23、图片格式

23.1、常见图片格式

jpg图像格式：JPEG(JPG)对色彩信息保留较好，高清、颜色较多，产品类图片常用。
gif图像格式：GIF格式最多只能存储256色，通常用来显示简单图形及字体，但可以保存透明背景和动画效果，常用于一些图片小动画效果。
png图像格式：一种新兴的网络图形格合，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果要切成背景透明图片，请选择png格式。
PSD图像格式：Photoshop专用格式，可存放图层、通道、遮罩等多种设计稿。

23.2、插件切图

Cutterman是一款运行在Photoshop中的插件。
官网：http://www.cutterman.cn/zn/cutterman

24、精灵图

24.1、精灵图产生的原因

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

24.2、精灵图（sprites）原理

使用精灵图核心：主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
这个大图片称为sprites、精灵图或者雪碧图。
移动背景图片位置，此时可以使用background-position。
移动的距离就是这个目标图片的x和y坐标。

24.3、精灵图使用

给盒子的背景图片移动位置，来显示需要的图标。

使用方法：参考下面代码。

background:url(images/sprites.png) no-repeat -100px -50px;

25、字体图标

详见CSS字体图标。

一株禾

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录