前言：最近需要对刚入门的同学培训，于是整理一下css基础知识
1.css
- CSS 指层叠样式表（Cascading Style Sheets）
- CSS 同时控制整个站点的样式和布局。
- CSS 可以帮助我们实行表现与结构分离的开发模式。
2.语法
- css 样式由选择符和声明组成，而声明又由属性和值组成
[图片上传失败...(image-d2f1a3-1525313132125)]
注意：
- 最后一条声明可以没有分号,建议加上分号。
- 推荐写法格式如下：
/*这是注释*/
p{
font-size:12px;
color:red;
}
3.css样式使用
-
插入css代码形式有
- 内联式
- 嵌入式
- 外部样式表
内联式：把css代码直接写在现有的HTML标签中
<p style="color:red">这里文字是红色。</p>
- 嵌入式：css样式代码写在<style type="text/css"></style>标签之间
<style type="text/css">
span{
color:red;
}
</style>
- 外联样式表：css代码写一个单独的外部文件中，使用<link>标签将css样式文件链接到HTML文件内
<link href="mystyle.css" rel="stylesheet" type="text/css" />
注意：
- <link>标签位置一般写在<head>标签之内。
- 三种样式的优先级：内联式 > 嵌入式 > 外部式（就近原则：离被设置元素越近优先级别越高）
4.选择器
-
常用选择器
- id选择器 #id{}
- 类选择器 .id{}
- 元素选择器 body{}
- 后代选择器 div p{}
- 子选择器 div>p{}
- 属性选择器 input[type="text"] {}
- 伪类选择器 a:hover {}
- 通用选择器 *{}
- ...
-
选择器优先级
CSS三大特性—— 继承、 优先级和层叠
- 继承:即子类元素继承父类的样式
- 优先级：是指不同类别样式的权重比较;
- 层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。
- 继承：即子类元素继承父类的样式
<p style="color:red">我是爸爸<span>我是儿子</span></p>
- 优先级：是指不同类别样式的权重比较
h1{
color:blue
}
.red{
color:red
}
<h1 class="red">哈哈哈<span>hh</span></h1>
- 权值：
- 内联样式：1000
- id选择器：100
- 类和伪类选择器：10
- 元素选择器：1
- 通用选择器：0
- 继承的样式：无
浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
p{color:red;} /*权值为1*/
p span{color:green;}/*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
- 层叠：在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
p{color:red;}
p{color:green;}
<p>哈哈哈</p>
//green
权值相同，后面的样式会覆盖前面的样式。
- !important：特殊的情况需要为某些样式设置具有最高权值，分号的前面
写上!important
p{color:red!important;}
p{color:green;}
<p>哈哈哈</p>
//red
!important具有最高权值
5.css盒子模型
元素分类
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
- 常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
- 元素的高度、宽度、行高以及顶和底边距都可设置
- 常用的内联元素有
：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
- 和其他元素都在一行上
- 元素的高度、宽度及顶部和底部边距不可设置
- 常用的内联块状元素有（同时具备内联元素、块状元素的特点）：
<img>、<input>
盒子模型
盒子模型，英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
-
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
-
两种盒子模型
-
标准盒子模型
标准盒子模型 IE盒子模型
IE盒子模型在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度
-
标准盒子模型的盒子宽度：左右margin+左右border+左右padding+width
IE盒子模型的盒子宽度：左右margin+width
css3新增属性：box-sizing
- box-sizing:content-box;表示标准的盒子模型，
- box-sizing：border-box表示IE盒子模型。
- 默认的情况下是标准盒子模型。
应用：当你想要设置宽高后，改变border，padding不会改变盒子宽高即可设置box-sizing：border-box
