前端学习笔记之CSS(2)

元素显示模式：就是元素以什么方式显示，比如<div>独占一行，或者一行可以放多个<span>

HTML元素分为块元素和行内元素两种。

块元素：

特点：

 

 行内元素：

 

 

 行内块元素：

 

 

 元素显示模式的转换：即一个模式的元素需要另外一种模式的特性，如增加<a>的触发范围

 

单行文字垂直居中的代码：

让文字的行高等于盒子的宽度也可以实现居中。

CSS的背景：添加背景颜色、背景图片、背景图片位置、背景平铺、背景图像固定等

   

 背景图片： 

 背景平铺：

 

 页面元素既可以添加背景颜色也可以添加背景图片，不过背景图片会压住背景颜色。

背景图片位置：

 

如果两个词都是方位名词，前后顺序无关。

如果只指定了一个方位名词，另一个省略，则第二个默认居中对齐。

如果参数是精确坐标，第一个肯定是x坐标，第二个是y坐标

如果只指定一个数值，那么一定是x坐标，另一个默认垂直居中

参数混合单位，第一个值为x坐标，第二个为y坐标。

 背景图像固定（背景附着）：指的是图像是否随着页面的其余部分滚动。

 

 

 背景复合写法：

 

 

 背景色半透明：

 

 背景总结：

 

CSS的三大特性：层叠性、继承性、优先级

层叠性：主要解决样式冲突的问题。

 继承性：子标签会继承父标签里的某些样式

 行高的继承：

  

 优先级：选择器相同，则执行层叠性。选择器不同，根据选择器权重执行

 

盒子模型：网页布局的核心本质就是利用css摆盒子。

CSS盒模型有两种：IE盒模型、标准的W3C盒模型。

两种盒模型的区别就是width的包含范围

标准盒模型的盒子宽度width=border+padding+width

IE盒模型的盒子宽度=width

在 CSS3 中引入了 box-sizing 属性，box-sizing:content-box;表示标准的盒子模型，

box-sizing:border-box 表示的是 IE 盒子模型

在IE盒模型中改变padding和border不会撑大盒子。

   

边框border:边框宽度（粗细），边框样式、边框颜色

 边框的复合写法：

 边框分开写法：

 Border-collapse:控制浏览器绘制表格边框的方式，控制相邻单元格的边框。

 内边距：边框和内容之间的边距。

 

 Padding复合属性：

 外边距margin:控制盒子和盒子之间的距离。

 

 

 

 嵌套块元素垂直外边距的塌陷：

 

 去掉li前面的项目符号：

 圆角边框：

 

 

 盒子阴影： 

 

 

 文字阴影：