CSS学习——三大特性、盒子模型（上）
目录
-
-
- 目录
- CSS三大特性
- CSS层叠性
- CSS继承性
- CSS优先级
- CSS特殊性(Specificity)
- 盒子模型（CSS重点）
- 看透网页布局的本质
- 盒子模型(Box Model)
- 盒子边框(border)
- 表格的细线边框
- 盒子边框总结表
- 圆角边框（CSS3）
- 内边距(padding)
-
CSS三大特性
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
例：
<html>
<head>
<title>title>
<style type="text/css">
div {
color: hotpink;
font-size: 30px;
}
div {
color: skyblue;
}
style>
head>
<body>
<div>王可可div>
<p>1.样式冲突，遵循的原则是就近原则。哪个样式离着结构近，就执行那个样式。p>
<p>2.样式不冲突，不会层叠p>
body>
html>
网页中显示为：
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是：子承父业。
适当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承，以及color属性)
例：
<html>
<head>
<title>title>
<style type="text/css">
div {
color: pink;
font-size: 20px;
}
style>
head>
<body>
<div>
<p>王可可p>
div>
body>
html>网页中显示为：
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0.即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100.总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
例：
<html>
<head>
<title>title>
<style type="text/css">
/*0,0,0,0 特殊性公式*/
div {/* 标签选择器 0,0,0,1*/
color: pink;
}
:first-child {/*伪类选择器 0,0,1,0*/
color: green;
}
.king {/* 类选择器 0,0,1,0*/
color: blue;
}
#wang {/*id选择器 0,1,0,0*/
color: red;
}
/*最大的 不是选择器*/
div {
color: orange!important; /*important就是重要的 级别最高 一旦出现优先执行*/
}
style>
head>
<body>
<div class="king" id="wang" style="color: skyblue">王者荣耀div>
body>
html>
上述例子中，选择器优先级逐渐增大
CSS特殊性(Specificity)
关于CSS权重，我们需要一套计算公式来计算，这个就是CSS Specificity，我们称为CSS特性或称非凡性，它是一个衡量CSS值优先级的一个标准。具体规范如下：
Specificity用一个四位的数字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越
| 继承或者*的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | ∞无穷大 |
权重是可以叠加的
比如：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover ------> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p ------> 0,1,0,1注意：
- 数位之间没有进制，比如说：0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0，所以不会存在10个div能赶上一个类选择器的情况。
- 继承的权重是0
总结优先级：
- 使用了!important声明的规则。
- 内嵌在HTML元素的style属性里面的声明。
- 使用了ID选择器的规矩。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
- 同一类选择器则遵循就近原则。
总结：权重是优先级的算法，层叠是优先级的表现
例：
<html>
<head>
<title>title>
<style type="text/css">
ul li { /* ul 0001 li 0001 叠加 0,0,0,2*/
color: green;
}
li { /*0,0,0,1*/
color: red;
}
nav ul li { /*叠加之后的 0,0,0,3 权重大于红色绿色，执行蓝色*/
color: blue;
}
.daohang ul li {/*叠加之后的 0,0,1,2 最终执行粉色*/
color: pink;
}
style>
head>
<body>
<nav class="daohang">
<ul>
<li>李白li>
<li>程咬金li>
<li>鲁班1号li>
ul>
nav>
body>
html>
继承的权重是0，举例：
<html>
<head>
<title>title>
<style type="text/css">
.daohanglan { /* 0,0,1,0 是 nav 的 不是li*/
color: red;
}
li { /*0,0,0,1*/
color: pink;
}
style>
head>
<body>
<nav class="daohanglan">
<ul>
<li>继承的权重为0li>
ul>
nav>
body>
html>
盒子模型（CSS重点）
CSS有三个大模块：盒子模型、浮动、定位，重点学习。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
看透网页布局的本质
把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
例：
<html>
<head>
<title>title>
<style type="text/css">
div, section {
width: 100px;
height: 100px;
background-color: pink;
}
style>
head>
<body>
<div>这是一个div盒子div>
<hr />
<section>这是一个section 块section>
body>
html>
网页中显示为：
盒子模型(Box Model)
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框(element box)，它描述了一个档案元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
盒子边框(border)
border : border-width || border-style || border-color边框属性-设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
none:没有边框即忽略所有边框的宽度（默认值）
solid:边框为单实线（最为常用的）
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线
例：
<html>
<head>
<title>title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border-width: 10px;/*边框宽度 粗细*/
border-color: pink;/*边框颜色*/
border-style: solid;/*边框样式 实线 用的最多的*/
}
style>
head>
<body>
<div>我是一个盒子div>
body>
html>
网页中显示为：
若更改border-style：
border-style: dashed;边框样式 虚线
网页中显示为：
border-style: dotted;边框样式 点线
网页中显示为：
border-style: double;边框样式 双线
网页中显示为：
表格的细线边框
以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。
table { border-collapse:collapse; }
border-collapse:collapse; 表示边框合并在一起。
例：
<html>
<head>
<title>title>
<style type="text/css">
table {
width: 700px;
height: 300px;
border: 1px solid red;
border-collapse: collapse;/*合并相邻边框*/
}
td {
border: 1px solid red;
}
style>
head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
tr>
<tr>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
tr>
<tr>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
tr>
<tr>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
tr>
<tr>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
<td>123td>
tr>
table>
body>
html>
网页中显示为：
盒子边框总结表
| 设置内容 | 样式属性 | 常用属性值 |
|---|---|---|
| 上边框 | border-top-style:样式；border-top-width:宽度；border-top-color:颜色；border-top:宽度 样式 颜色； | |
| 下边框 | border-bottom-style:样式；border-bottom-width:宽度；border-bottom-color:颜色；border-bottom:宽度 样式 颜色； | |
| 左边框 | border-left-style:样式；border-left-width:宽度；border-left-color:颜色；border-left:宽度 样式 颜色； | |
| 右边框 | border-right-style:样式；border-right-width:宽度；border-right-color:颜色；border-right:宽度 样式 颜色； | |
| 样式综合设置 | border-style:上边[右边 下边 左边] | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边[右边 下边 左边] | 像素值 |
| 颜色综合设置 | border-color:上边[右边 下边 左边] | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色 |
例：
<html>
<head>
<title>title>
<style type="text/css">
input {
border: 0;/*没有边框*/
}
.user {
border-width: 1px;
border-color: pink;
border-style: solid;
}
.nc {
border-top-width: 1px;/*上边框宽度*/
border-top-color: hotpink;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-color: hotpink;
border-bottom-style: solid;
}
.email {
border-top: 1px solid red;/*上边框 宽度 样式 颜色 一起写*/
border-bottom: 1px solid green;/*上边框 宽度 样式 颜色 一起写*/
}
.tel {
/*border-width: 1px;
border-color: pink;
border-style: solid;*/
border: 1px solid skyblue;/*综合性写法*/
}
style>
head>
<body>
用户名： <input type="text" class="user" /><br /><br />
昵 称： <input type="text" class="nc" /><br /><br />
邮 箱： <input type="email" class="email" /><br /><br />
手 机： <input type="tel" class="tel" /><br /><br />
body>
html>
网页中显示为：
圆角边框（CSS3）
语法格式：
border-radius:左上角 右上角 右下角 左下角
例：
<html>
<head>
<title>title>
<style type="text/css">
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
div:first-child {/*结构伪类选择器 选亲兄弟*/
border-radius: 10px;/*一个数值表示四个角都是相同的*/
}
div:nth-child(2) {
/*border-radius: 100px;取宽度和高度的一半 则会变成一个圆形*/
border-radius: 50%;/*100px 50%取宽度和高度一半 则会变成一个圆形*/
}
div:nth-child(3) {
border-radius: 10px 40px;/*左上角 和右上角 是 10px 右上角 左下角 40 对角线*/
}
div:nth-child(4) {
border-radius: 10px 40px 80px;/*左上角 10 右上角 左下角 40 右下角80*/
}
div:nth-child(5) {
border-radius: 10px 40px 80px 100px;/*左上角 10 右上角 左下角 40 右下角80 左下角 右下角100*/
}
div:nth-child(6) {
border-radius: 100px;
height: 100px;
}
div:nth-child(7) {
border-radius: 100px 0;
}
style>
head>
<body>
<div>1div>
<div>2div>
<div>3div>
<div>4div>
<div>5div>
<div>6div>
<div>7div>
body>
html>
网页中显示为：
内边距(padding)
padding属性用于设置内边框。是指边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
注意：后面跟几个数值表示的意思是不一样的。
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding:上下左右边距。比如padding:3px;表示上下左右都是3像素 |
| 2个值 | padding:上下边距 左右边距。比如padding:3px 5px;表示上下3像素 左右5像素 |
| 3个值 | padding:上边距 左右边距 下边距。比如padding:3px 5px 10px;表示上3像素 左右5像素 下10像素 |
| 4个值 | padding:上内边距 右内边距 下内边距 左内边距。比如padding:3px 5px 10px 15px;表示上3像素 右5像素 下10像素 左15像素 顺时针 |
例：
<html>
<head>
<title>title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px solid red;
/*padding-left: 20px;padding-top: 30px; 左内边距
padding: 20px; padding 如果只写一个值表示 上下左右都是 20像素
padding: 10px 30px; 上下10 左右 30*/
padding: 10px 20px 30px 40px; /*顺时针 上右下左*/
}
style>
head>
<body>
<div>内边距就是内容和边框的距离div>
body>
html>
网页中显示为：
