前言
css 基础内容比较多，但绝大多数都是需要记忆的内容
行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性
行内块元素的特点
● 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
● 默认宽度就是它本身内容的宽度。
● 高度，行高、外边距以及内边距都可以控制。
块级元素和行内元素
块级元素特点：
● 总是从新行开始
● 高度，行高，外边距以及内边距都是可以控制的
● 宽度默认是容器的100%
● 可以容纳内联元素和其他块元素
行内元素的特点:
● 和相邻行内元素在一行上。
● 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
● 默认宽度就是它本身内容的宽度。
● 行内元素只能容纳文本或则其他行内元素。（a特殊）
CSS三大特性
层级、继承、优先级
CSS层叠性：是指多种CSS样式的叠加。
CSS继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是： 子承父业。
CSS优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
使用了 !important声明的规则，权重要按如下规则
● 继承样式的权重为0。
● 行内样式优先。
● 权重相同时，CSS遵循就近原则。
盒子模型
定义：就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成
盒子边框（border）
语法：border : border-width || border-style || border-color
常用属性值：none：没有边框即忽略所有边框的宽度（默认值）、solid线(单实线)、dashed(虚线)、
dotted(点线)、double(双实线)
实现居中
外边距实现盒子居中
- 必须是块级元素
- 盒子必须制定了宽度，然后给元素左右的外边距都设置为auto。
例如：.header{ width:960px; margin:0 auto;}
文字盒子居中
- 文字水平居中是 text-align: center
-
盒子水平居中 左右margin 改为 auto
盒子模型布局稳定性
按照优先使用宽度 （width）、其次 使用内边距（padding）、再次 外边距（margin）。
width > padding > margin
原因：
● margin 会有外边距合并 还有 ie6下面margin 加倍的bug，所以最后使用。
● padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
● width 没有问题，我们经常使用宽度剩余法 高度剩余法来做。
盒子阴影
语法： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
尝试一下
浮动
浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法：选择器{float:属性值;} 属性值可以是left，right，both，none。
目的：为了让多个块级元素同一行上显示。
定位
position属性值分为4种：
● static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。
● relative：相对定位，相对定位是将元素相对于它在标准流中的位置进行定位
● absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
● fixed：固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器；完全脱标，不占有位置，不随着滚动条滚动。
叠放次序 z-index的特点：
● z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
● 如果取值相同，则根据书写顺序，后来居上。
● 后面数字一定不能加单位。
● 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性
CSS 背景
background 属性用于定义 HTML 元素的背景。定义元素背景效果的 CSS 属性有五种：
background-color 背景颜色
background-image 背景图像
background-repeat 背景图像设置水平或垂直平铺或不平铺
background-position 背景图像设置定位
background-attachment 背景图像设置固定或滚动
背景属性简写：
body{
background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat -->
background-attachment --> background-position
尝试一下
CSS文本外观属性
CSS文本格式主要分为：文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换
文本对齐方式：text-align属性有四个值：left，center，right，justify(两端对齐)；属性默认值为auto。
文本修饰：text-decoration 属性用来设置或删除文本的修饰。
主要是用来删除超链接的下划线，也可以使用其他值来设置文本的修饰；
文本阴影：text-shadow: x y shadow color
其中 x 是水平阴影的偏移值，
y 是垂直阴影的偏移值，
shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。
color 指定阴影的颜色。该属性有两个作用，产生阴影和模糊主体。
文本缩进：用来指定文本的首行缩进，允许为负值，如果值是负数，第一行则向左缩进
文本间距：行高，也就是文本行的高度。例如：line-height：22px
字间距：letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白，即字间距。
不同的是：letter-spacing 属性设置字符间距，而 word-spacing 属性设置单词间距。
注意：word-spacing 属性对中文无效，因此在设置中文的字间距时请使用 letter-spacing 属性。letter-spacing 和 text-align：justify 是两个冲突的属性，不能同时使用
文本空白处理：white-space 属性指定元素内的空白如何处理，默认值为 normal 空白会被浏览器忽略
文本转换：text-transform 属性控制文本中的字母
尝试一下
CSS字体
font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性。
简写顺序：
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
网友评论