css概述
css=层叠样式表
作用：定义html各元素样式
目的：将内容和表现分离
多重样式层叠为一个，即运用被样式表允许的多种方式规定样式信息，所有的样式都会进行层叠，相当于通过一个包含所有样式的css文件来定义html各元素样式。
规定样式信息的方式：
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
css知识点
基础语法
css由选择器和一条或者多条申明两个主要部分构成
selector {
declaration1;
declaration2;
...
declarationN;
}
选择器分组
在selector的内容中添加样式一致的元素，则这一组元素的样式都发生相同的变化
派生选择器
根据元素在其位置的上下文关系来定义样式，程序运行时，会自动搜索符合位置和上下文关系的元素，然后改变其样式
id选择器
功能：为标有特定id的html元素指定特定的样式
形式：#id名
id是唯一识别码，id属性只能在每个html文档中出现一次，表示唯一一个元素的样式，如果需要表示多个元素样式相同，应该用class类选择器，以.class名{}作为样式表达
id选择器可以用做单独的选择器，标定特定元素样式，也可以用于建立派生选择器，指定一个元素内的指定元素的样式
框模型
框模型概述
1.png
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
综合来看，整个框模型的宽=width+2padding+2margin（如果有设置边框的宽度，则还需加上边款宽度）
外边距可以是负值，而且在很多情况下都要使用负值的外边距
padding
内边距
接受以px为单位的长度值，或以父元素为对比的百分比，但不允许使用复制
百分比都是相对父元素的width计算的，无论是左右内边距还是上下内边距，都是相对父元素的width
padding-top 、padding-right、padding-bottom、padding-left分别设置上、右、下、左的内边距，也可以直接简略成padding：上、右、下、左的数值
border
边框
可以通过设置border属性来规定元素边框的样式、宽度和颜色
border-style：
| 属性 | 描述 |
|---|---|
| none | 定义无边框 |
| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线 |
| solid | 定义实线 |
| double | 定义双线。双线的宽度等于 border-width 的值 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值 |
| outset | 定义 3D outset 边框,其效果取决于 border-color 的值 |
| inherit | 规定应该从父元素继承边框样式 |
margin
围绕在元素边框的空白区域，即外边距
设置外边距的方法就是使用margin属性，接受任何长度单位、百分数值甚至是负数
设置居中的时候可以采用margin设置负数的方式
CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
2.png
通过具体指出哪一边的margin，可以只设置单边的外边距，方式为——margin-bottom、margin-top、margin-right、margin-left
margin同border一样，都可以缩略写法，只要记住数值为上右下左的顺序即可
定位
行内元素有：title、 lable 、span 、 br 、 a style、 em 、 b、 i、 strong
块级元素有：body 、 from、 select、 textarea、 h1-h6、 table、 button、 hr、 p、 ol、 ul、 dl、 div
块级元素从上到下一个个顺序排列
通过"display：block"可以讲行内元素表现成块级元素一样
行内元素和块级元素都存在框
基本定位机制：普通流、浮动、绝对定位
css定位属性
position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中
overflow：设置当元素的内容溢出其区域时发生的事情
clip：设置元素的形状。元素被剪入这个形状之中，然后显示出来
vertical-align：设置元素对齐方式
z-index：设置元素堆叠顺序，在设置背景图片时有用
position 属性值：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留
相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置
absolute
元素框从文档流完全删除，因此绝对元素不占据空间
如果元素存在已定位的祖先元素，则相对于最近的已定位的祖先元素，反之则相对于其包含块定位
包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
绝对定位的框与文档流无关，所以可以覆盖页面上的其他元素，可以通过设置z-index属性来调节视图顺序
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身
css浮动
形式——float：left/right
表示款级元素脱离文档流并且向左/右移动，直至离框最近的一侧碰到框
由于是浮动，所以如果位置处理不当，视图上会覆盖文档流的部分元素
如果两个元素都设置相同方向的浮动，则两个元素并列显示，如果并列元素的总宽超过最外层边框的宽，则最后一个浮动元素会向下移动
浮动元素脱离文档流，导致其不占据空间，因此如果想要让包围元素在视觉上包围浮动元素，需要使用clear
网友评论