CSS基础知识

css不能在末尾加 ;

css引入的形式：内联式、嵌入式、外部式；

优先级：内联式>靠的最近的那个

可以使用类选择器词列表方法为一个元素同时设置多个样式

css继承：指某些样式具有继承性，可以应用到下一级标签，如颜色。但边框样式则不具备继承性。

css权值：标签为1，类选择符为10，id选择符为100。 根据一个选择器所有权值相加来最后判断。

最高权值：！important

css层叠：同一元素有多个css样式，切权值一样，则最后的css样式会被应用。

为块级元素里的字体和图片设置居中：text-align：center；

块级元素居中：margin：0 auto；

块级元素大小会被其内容里块级元素撑高，但不会被行内元素撑高。

行内元素的大小取决于内容的大小。

在css中，html标签被分为三大类：块级元素、行内元素、内联块状元素

块级元素：<p> <div> <blockquote> <form> <table> <address> <ul> <ol> <h1>...<h6> <dl>

行内元素：<span> <a> <br> <i> <em> <strong> <label>

<q> <var> <code>

行内块状元素：<img> <input>

块级元素的特点：

1、从新一行开始，并且其后元素也另起一行。

2、元素高度、宽度、行高以及顶和底边距都可以设置。

3、元素在不设置宽度的情况下，会占父容器的100%。

行内元素特点：

1、和其他元素处在同一行。

2、元素高度，宽度，以及顶部和底部边距不可设置。

3、元素的宽度就是它包含的文字或图片的宽度。

内联块状元素特点：

1、和其他元素都在同一行

2、元素宽度，高度，行高以及顶和底边距都可设置。

盒子模型：

一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

高度也同理。

边界：margin

填充：padding

CSS布局模型：

建立在盒模型基础上，所有元素有三种布局模型：

1、流动模型（flow）

2、浮动模型（Float）

3、层模型（Layer）

流动模型（flow）：

是默认的网页布局模型，两个特征：1、块级元素会在所包含元素内自上而下按顺序垂直延伸分布，并且宽度是100%。2、行内元素都会在所包含元素内从左到右水平分布。

层模型（layer）：

三种形式：1、绝对定位（posiotion：absolute） 2、相对定位（position：relative）3、固定定位（position：fixed）

绝对定位：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于最接近的一个具有定位属性的父元素进行绝对定位，如果不存在，则相对于body元素，即浏览器窗口。

相对定位：通过left、right、top、bottom确定元素在正常文档流中的偏移位置，过程是通过float方式生成一个元素（且浮了起来），然后相对与以前的位置移动，移动前的位置保留不动。

固定定位（fixed）：

与absolute相仿，但是是相对于视图（网页窗口）本身，如果视图是固定到，则元素就会固定。与background-attachment：fixed；属性功能相同。

relative和absolute组合使用：

子元素相对与前辈元素进行定位，子元素加absolute，前辈元素（包括父级元素）加relative；

字体大小：

em：值为本元素给的font-size值，如果元素font-size=14px；1em=14px。当font-size设置为em时，则计算的标准以元素的父元素的font-size为基础。

百分比：也是基于font-size为基础。

 

水平居中：

 

行内元素（文本图片等）：给父元素设置text-align：center属性。

 

块状元素：

定宽块状元素：设置margin：0  auto；

不定宽块状元素：

不定宽块状元素（没设置宽度）

1、加入table标签。 添加table标签，包括<table>,<tr>,<td>,为table标签设置margin：0  auto属性，将块级元素放入td中。

2、将块状元素设置为行内元素。 可以实现居中，但少了块状元素的一些功能。

3、给父元素设置float，position：relative，left：50%；给不定宽块状元素设置float，position：relative，left：-50%；

 

垂直居中：

父元素高度确定的单行文本：为父元素设置height=line height。

父元素高度确定的多行文本：

1、插入table（tbody、tr、td），td默认自带属性vertical-align：middle。

2、父元素设置display：table-cell；vertiacl-align：middle属性。缺点是兼容性差，切修改了块级元素的性质。

 

 

隐性改变display类型：

当一个标签有以下属性：

1、position：absolute

2、float：left或right

元素就会自动转变为display：inline-block（行内块级元素）元素，拥有了行内块级元素的性质。