css基础面试题CSS入门：基础样式与盒模型css常考面试题居然可以这样，

1、css样式表的引用方式

1.1外部文件引用方式

1.2使用@import引用外部CSS文件

@import url(mystyle.css);

1.3内部文档头方式

1.4行内样式

2、选择器

2.1基本选择器

标签/.class/#id/*通配符

2.2属性选择器

[name]匹配到所有属性名为name的元素；

[name=test]匹配到属性名name=test的元素；

[name~=test]属性中包含独立的单词为 value；

[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行；

[name|=test]属性中必须是完整且唯一的单词，或者以 - 分隔开；

[name^=test]属性的前几个字母是 value 就可以；

[attribute$=value] 以value结尾。

2.3复合选择器：

后代选择器（空格）；

子代选择器（>）；

兄弟选择器（~）：选择下面的所有兄弟元素 .sub ~p；

相邻兄弟选择器（+）：选择到紧挨着一个元素 .sub +p；

交集选择器（.box#atr)；

并集选择器(.box,#atr)。

2.4伪元素选择器(两个冒号)

::before；

::after；

::selection；

::first-letter（只用于块级元素，首字母）；

::first-line（只能用于块级元素，首行）。

2.5伪类(一个冒号)

:link；

:visited；

:hover；

:active。

3、样式优先级

3.1选择器权重

内联样式：1,0,0,0；

​id：0,1,0,0；

类、伪类、属性：0,0,1,0；

标签、伪元素：0,0,0,1；

通配符、选择符：0,0,0,0。

3.2 !important

3.3 就近原则（样式的层叠性）

4、基础样式

4.1字体

font:style,variant,weight,size/line-height,family；

font-family；

font-size:偶数；

font-style:unset/normal/inherit/initial；

font-variant:small-caps小型字母大写状态；

font-weight:数字（1-100）/bold/normal/bloder/lighter。

4.2文本

颜色：color——#ffffff,rgb(255,255,255),关键字(red),rgba()；

水平对齐：text-align:justify(两端对齐)/center/left/right/start/end；

垂直对齐：vertical-align:middle/text-top/text-bottom；

修饰线：text-decoration:none/underline/line-through/overline；

方向：direction:ltr,rtl；

缩进：text-indent:2em；

文本转换：text-transform:uppercase/lowercase/capitalize；

行高：line-height:1.5em;(适用于单行数据)；

换行：white-space:nowrap; word-break:break-all;text-overflow:ellipsis。

--例子：单行文本换行处理--

--white-space: nowrap;

--text-overflow: ellipsis;

--overflow: hidden;

字间距:word-spacing;

字符间距:letter-spacing;

4.3背景

background-color:;

background-image:url();

background-repeat:repeat;no-repeat;repeat-x;repeat-y;

background-position:direction px direction px;(left/right/top/bottom只写一个参数时,默认为center;默认位置左上)；

background-attachment:fixed;loacl;scroll;

background-size:cover;contain;100% 100%。

5、盒模型

5.1元素分类

块级标签block：独占一行，可以设置所有样式；

行内块标签inline-block：不独占一行，可以设置样式；

*--幽灵间距：但是会把中间的换行进行处理，无法完全贴合；

*--解决：标签放在一行；父级元素设置font-size:0；

行内标签inline：不独占一行，部分样式无法设置。

5.2元素类型转换display

display:inline-block|inline|block|flex|inline-flex|table-cell|none;

5.3盒模型

5.3.1组成

content：内容；

padding：内边距；

border：边框；

margin：外边距。

盒模型大小=content+padding+border

5.3.2计算方式

width:设置的盒子宽度；

box-sizing；

*content-box :标准盒模型,默认值，width = content-width;

*border-box:怪异(IE)盒模型 width = content-width + padding-width + border-width;

padding-box:width=content+padding;

box-sizing:border-box;//自动改变content的宽度来适应设置的width宽度；

content-box;//默认值。

5.4.padding

上 右 下 左；

上 左 右 下；

5.5.margin

叠压现象（外边距合并）：边距采用最大值；

塌陷现象：当父级和子级元素都是块级元素；给第一个（最后一个）设置了margin-top(bottom),父级会向相应的方向塌陷。

外边距塌陷例子：

box1

.box>.box1{

width: 200px;

height: 200px;

background-color: teal;

margin-top: 100px;

}

.box{

width: 400px;

height: 400px;

background-color: thistle;

}