css基础

# 介绍一下 CSS 的盒子模型？

1）有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；
2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。


# CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有哪些？
1）id 选择器（#myid）
2）类选择器（.myclassname）
3）标签选择器（div，h1，p）
4）相邻选择器（h1 + p）
5）子选择器（ul > li）
6）后代选择器（li a）
7）通配符选择器（* ）
8）属性选择器（ a[rel = "external"]）
9）伪类选择器（a: hover, li: nth - child）


##可继承的属性： 
font-size font-family color, UL LI DL DD DT


## 不可继承的样式：
border padding margin width height


# 载入样式以最后载入的定位为准;
优先级为: !important >  id > class > tag  ；   important 比 内联优先级高 


# 如何居中div？ 
给div 设置一个宽度，然后添加 margin:0 auto 属性；div{width:200px; margin:0 auto; }


# 如何居中一个浮动元素？
确定容器的宽高  宽500 高300的层，设置层的外边距(走自己的一半 1/2宽高)
.div{width:500px;height:300px;margin:-150px 0 0 -250px;

position:relative;background:green；left：50%；top：50%}

#css有哪些新特性？

css3实现圆角：border-radius：8px

阴影：box-shadow

对文字加特效（其实也就是给文字加阴影）：text-shadow

线性渐变：gradient

动画：tranform

transform：rotate（9deg）scle（0.85，0.90） translate（0px，30px）skew（-9deg，0deg）

旋转 缩放位移倾斜

#radius的值有8个：

 左上、右上，左下、右下分别  两个值

#radius有八个兼容性写法：

  -moz-border-radius-topleft: 15px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 15px;
 -moz-border-radius-bottomleft: 0px;
 -webkit-border-top-left-radius: 15px;
 -webkit-border-top-right-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -webkit-border-bottom-right-radius: 15px;

#为什么初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的 ，如果不对css初始画浏览器所呈现的页面会出现差异。

初始化样式对seo有一定影响  但那影响很小 

最简单的初始化方法是：*{padding:0;margin:0} (不建议)
淘宝的样式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl,
dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, 
        textarea, th, td { margin:0; padding:0; } 
        body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
        h1, h2, h3, h4, h5, h6{ font-size:100%; } 
        address, cite, dfn, em, var { font-style:normal; } 
        code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
        small{ font-size:12px; } 
        ul, ol { list-style:none; } 
        a { text-decoration:none; } 
        a:hover { text-decoration:underline; } 
        sup { vertical-align:text-top; } 
        sub{ vertical-align:text-bottom; } 
        legend { color:#000; } 
        fieldset, img { border:0; } 
        button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } 

#display：inline-block什么时候显示间隙？（这是空格或换行产生的间隙）

dispaly：inline-block布局的元素在chrome下会出现几像素的间隙

因为我们在编辑器里 写代码的时候，同级的标签不写在同一行 ，出现换行符

这就是著名的inline-block”换行符/空格  间隙问题“

##怎样移除空格？

使用margin：负值、使用font-size：0、letter-spacing、word-spacing、word-spacing

#什么是盒子模型？

在网页中  一个元素占有空间的大小有几部分组成，其中包括

concent 、padding、border、margin

四个部分组成

**box-sizing:border-box;→盒子的大小是固定的  无论是加 padding还是 border盒子的总体大小是不变的**

这四个部分占有的空间中，有的部分可以显示相应的内容，

而有的部分 只用来分隔相邻的区域，四个部分一起构成了css 中元素的盒子模型。

#px和em、rem的区别？；

px：px的值是固定的，指定是多少就是多少，计算比较容易。

em：em的值不是固定的  em会继承父级元素的大小。浏览器的默认字体高度就是16px。

所以未经调整的浏览器的都符合：1em = 16px。那么12px ==0.75em，10px = 0.625em；

rem：rem的值 是相对与根文字大小的一个尺寸单位；

例如，html{ font-size:50px} div{font-size:0.5rem} 则div中的字体大小为25px；

#link和@import的区别是：

1）link属于XHTML标签，而@import是css提供的；

2）页面被加载的时，link同时会被加载，而@import引用的css会等到页面被加载完再加载

3）import只有在IE5以上才能被识别，而link是XHTML标签，无兼容性问题

4）link方式的样式的权重高于import的权重。

#css的基本语法构成是：

选择器｛属性1：值1；属性2：值2；属性3：值3｝

#描述css reset的作用和用途：

Reset是重置浏览器的

css默认属性 浏览器的 品种不同  样式不同  然后重置让他们统一

#解释css中的sprites如何使用？

css 精灵图 把一堆小的图片整合到一张背景透明的大图片上，

然后通过定位的方式让各自显示在应显示的位置

**好处是  减轻服务器对图片的请求数量

#清除浮动的 几种方式，各自的优缺点是什么，什么时候清除浮动？

清除浮动的方式：

1）使用空标签  清除浮动 clear：left  |   right  |  both

（理论上能清除浮动，但是增加无意义的标签）

2）使用overflow：auto；

　　 此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中 定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。

.clear{background:#FF9;overflow:auto;zoom:1;}

<div class=”clear”> 

3）使用after伪元素清除浮动（用于非IE浏览器）

　　该方法只适用于非IE浏览器。写法如下示例。

使用中需注意：

一、该方法中必须有height:0，否则该元素会比实际高出若干像素；

二、content属性是必须有，其值可以为空也可以为"."

.clearfix:after{

content:" ";

height:0;

line-height:0;

display:block;

clear:both;

visibility:hidden;//隐藏

}

.clearfix{

zoom:1;//兼容其他浏览器

}

***什么时候清除浮动？1）父元素的高度为0；2）父元素的子元素的都设置了浮动***

#rgba（）和 opacity的透明度效果有什么不同？

opacity作用域元素，以及元素的所有内容（子元素继承父元素的的透明效果）。

rgba（）只作用于与元素的颜色或被景色（子元素不会继承透明度效果）

#css设置dom元素 不显示浏览器的可视范围

基本方式：

1.display：none

2.visibility：hidden

技巧性：

3、宽高为0；

4、透明度 为0；

5、z-index：-100（降低层级）；

6、定位出浏览器可视范围。

#display：none与visibility：hidden  的区别：

display:none→隐藏元素，并且不占空间；

visibility:hidden;→隐藏元素，占有空间；

#行内node与块级node区别  行内node是否可以设置padding和margin：

行内元素：display:inline;在同一行显示，不可以设置宽高。宽高 内外边距的top/bottom都可以不设置，但是 内外边距left/right可以设置。

块级元素：display：block 独占一行  ，可以设置宽高 内外边距…

行内块元素：inline-block 在同一行显示 可以设置宽高 

*行内块标签：input，img，button，texterea，label

#css盒子模型

两种：

IE盒模型：content包含了border和padding

w3c盒模型

#去除a标签的跳转效果

<a href = "javascript:return false;">这个连接点不能点击</a>

<a href = "javascript:volid(0);"></a>

#b标签 和Strong标签，i标签和em标签的区别

后者有语义  前者没有语义

#颜色的4种表达方式↓↓↓

1、直接设置color：red；

2、十六进制：color：#00ff；

3、rgb设置color：rgb(0-255,0-255,0-255)

4、 rgba color:rgba(0-255,0-255,0-255,0-255,0.1); 

#css的3中书写方式

1、外联式：新建css内部引用<link href = "css文件路径" rel = ”“>（主要写法  ：   推荐写法）

1)该写法  影响范围比较广，影响整个站点

2）完全实现了html结构与样式的分离（代码的可维护性比较好）

2、内嵌式：在头部的style中书写

1）只会影响当前页面

2）没有实现html结构与样式的分离

3、行内式：直接在标签内写style

1）只会影响当前标签

2）没有实现 html结构与样式的分离

#css的特性：

1、 层叠性：当同一个标签（权重一样）的样式发生冲突的时候，最后定义的样式会将之前定义的样式层叠掉；

与样式定义的顺序有关、与样式调用的顺序无关

2、继承性：标签之间的关系属于嵌套关系 

 *可以被继承的属性：有关文字的相关属性都可以被继承，如，颜色 大小 行高  字体。

*注意：两个例外↓↓↓

a标签不能直接使用父元素中的文字大小。

标题标签 h1... h6不能使用父元素的文字大小

#伪类：用来向选择器定义样式或添加特定的效果。常用的伪类有focus  nth-child等

1、a:link｛属性：值｝  设置a标签的默认样式

2、a：visited｛属性：值｝链接访问过后的样式

3、a:hover｛属性：值｝  鼠标移动到超链接上的样式

4、a:active｛属性：值｝ 链接激活状态下 的样式

*注意：link visitedhoveractive

(LoVe HAte顺序) 爱恨顺序书写可以解决a标签在四种状态中出现的小问题

5、a:foucs｛属性：值｝获取光标焦点的样式

6、xxx：first-child向元素的第一个子元素添加样式

7、xxx：last-child向元素的最后一个样式添加样式

#css3新增伪类举例：

p:first-of-type  选择属于其父元素的首个<p>元素的每个<p>元素；

p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素；

p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素；

p:only-child 选择属于其父元素的唯一子元素的每个<p>标签；

p:nth-child（2）选择属于其父元素的 第二个子元素的每个<p>元素；

xxx：enable

xxx：disabled  控制表单的禁用状态；

xxx：checked   单选 或复选框被选中。

#overflow的用法

1、overflow：hidden 将超出盒子部分的内容隐藏

2、overflow：scorll 添加滚动条

3、overflow：auto 自适应

# 定位(position) : 定位的元素常与具体的方位名称配合使用 left  top  right  bottom 
      1 静态定位(static)    不脱标
           标准留下的盒子  默认静态定位static
      2 绝对定位(absolute) （看脸型） 脱标

1）父元素不定位、子元素定位 的情况下，子元素以浏览器左上角为基准设置定位。

2）父元素设置定位 、子元素设置绝对定位，子元素以父元素的左上角为基准设置定位。

3）元素设置绝对定位后  该元素脱标不占位置。

      3 相对定位 (relative) （自恋型） 不脱标

1）元素设置相对定位  该元素会以自己原来的位置为基准定位。

2）设置相对定位的元素   不脱标占据原来的位置

      4 固定定位(fixed)    脱标

1）设置了固定定位的元素  只会相对于浏览器进行定位

2）设置了固定的元素  脱标不占位置

#Z-index（层级）

1、元素与元素之间的层级关系

2、在css2中  只有定位的元素才有z-index

3、默认情况下，定位元素的z-index的值auto（0）

z-index可以取正值  也可以去负值。

特点：1）如果两个元素都设置了定位，那么后面定位的元素会覆盖前面定位的元素。

2）如果想让一个盒子压另一个盒子 ，可以设置z-index值。

3）如果元素的父元素设置了z-index值，那么程序会以父元素的z-index值为准

#css容易混淆属性

# css容易混淆属性
text-indent: 2em; /* 设置首行缩进两个汉字     Logo优化内容移除*/  
text-align: center;  /* text-align给块级元素设置，其文本会水平居中 */  
text-decoration: none; /*去掉下划线*/  
 
font-style: italic ; /* 文字斜体显示*/  
font-weight: 700;   /* 文字加粗显示*/  
 
line-height: 20px; /* 设置文字的行高*/  
line-break: normal; /*应用日文文本的默认换行规则*/  
list-style: none; /* 去除列表前面的图标*/  
 
disabled:true; /*禁用文本框*/  
disabled:false; /*解禁文本框*/  
 
outline-style: none; /* 去掉输入框的默认轮库线*/   
 
overflow: hidden; /*1  触发元素的bfc(格式化上下文) 解决外边距塌陷问题 
                   2  将多余部分隐藏 可设置 水平 垂直方向的如 ： overflow-x: hidden;  overflow-y: hidden;   
                   3 给父元素这是 可以清楚浮动 
                   * * */

overflow: auto; /*给添加滚动条 可设置水平 */  
overflow：hidden；    /*超出的部分隐藏  */  
visibility：hidden； /*元素隐藏  该属性隐藏元素后，元素占位置*/  
 
display：none: ;     /*元素隐藏 隐藏元素不占位置*/  
display: block;     /*显示元素*/  
display: inline;  /* 转化为  行*/  
display: block; /* 转化为 块*/  
 
vertical-align: baseline /*只对img/img4和表格起作用*/  
vertical-align: middle;  /*垂直居中对齐*/  
 
 
border-collapse: collapse; /* 合并边框  与 表格属性中的 cellspacing="0" 一样*/  
white-space: nowrap; /*将行内快元素在一行上显示*/