css基本知识总结

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于网页设计的语言。它可以控制网页上的元素的样式，包括文字颜色、字体、大小、间距、背景、边框等等。下面是CSS的一些基本知识：

选择器

选择器用于指定要应用样式的HTML元素。常见的选择器包括标签选择器、类选择器、ID选择器、属性选择器、伪类选择器等等。

1. 标签选择器：元素标签就是选择器名称，如div、p、span等，用法如下:

<!-- 元素 -->
<div>Hello world!</div>
<!-- 元素样式 -->
<style>
	div{height:100%;width:100%}
</style>

2. 类选择器：给盒子定义一个class，即为类名，在类名前加上“.”,即为类名选择器。用法如下：

<!-- 元素 -->
<div class='divDom'>Hello world!</div>
<!-- 元素样式 -->
<style>
	.divDom{height:100%;width:100%}
</style>

3. id选择器：给盒子定义一个id，id是单一的，是盒子的唯一标识，多用于js操作，在id名前加上“#”,即为id选择器。用法如下：

<!-- 元素 -->
<div id='divDom'>Hello world!</div>
<!-- 元素样式 -->
<style>
   #divDom{height:100%;width:100%}
</style>

4. 属性选择器：通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。用法如下：

<!-- 元素 -->
<input type="text" placeholder="请输入" />
<!-- 元素样式  -->
<style>
	input[type="text"] {
	  border: 1px solid gray;
	}
</style>

5. 伪类选择器：伪选择器支持按照未被包含在文档树中的状态信息来选择元素。用法如下：

<!-- 元素 -->
<a href="https://mp.csdn.net/mp_blog/manage/article">csdn</a>
<!-- 元素样式  -->
<style>
	a:visited{ /* a链接被访问过的样式 */ 
	 color:red;
	}
</style>

常见的伪类元素有：

伪类	用法	说明
:before	p:before	在元素前添加内容
:after	p:after	在元素后添加内容
:link	a:link	选择所有未访问链接
:visited	a:visited	选择被访问过的链接
:active	a:active	被选择的链接
:hover	p:hover	鼠标在元素上时
:focus	a:focus	元素聚焦时
:disable	input:disable	元素禁用，不可输入
:ckecked	input:chaecked	元素被选中

盒模型

网页中的每个元素都是一个矩形盒子，盒模型指的是这个矩形盒子的四个部分：内容区（content）、内边距（padding)、边框(border)、外边距(margin）。
盒模型有两种：IE盒子（怪异盒子）和普通盒子。

1. 普通盒子：content（width）+padding+border+margin
2. IE盒子（怪异盒子）：content(width+padding)+border+margin

普通盒子转怪异盒子可以通过css的box-sizing: border-box;属性进行转换。

层叠

当多个样式应用于同一个元素时，样式将按照一定的层叠优先级进行应用。CSS定义了多个层叠优先级，包括!important、内联样式、ID选择器、类选择器、标签选择器等等。
层级优先级排序：!important > 内联样式 > ID选择器 > 类选择器 >标签选择器.

响应式设计

响应式设计是一种网站设计方法，使得网页能够自适应不同设备的屏幕大小和分辨率。CSS提供了响应式设计的基础，例如媒体查询、弹性布局等等。下一章会着重讲解响应式布局，敬请期待。