CSS的基础

CSS语法，引入方式，选择器

1、什么是css样式?

​ CSS通常称为 CSS样式表 或 层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

2、css的优点？

1.内容与表现分离。
2.网页的表现统一，容易修改。
3.丰富的样式，使得页面布局更加灵活。
4.减少网页的代码量，增加网页的浏览速度。
5.运用独立于页面的CSS，有利于网页被搜索引擎收录。
6.提高代码的复用率。

3、css的样式规则？

选择器{
   属性：属性值;
}

4、css样式表的引入方式？

行内式

内嵌式

外链式

导入式

5、css样式表的优先级？

行内式>内嵌式>外链式=导入式

6、选择器有哪些？

基本选择器:

1,全局

2,标签

3,类选择器 多类选择器

4,ID选择器

复合选择器:

1. 子选择器
2. 后代选择器
3. 并集选择器 中间用逗号隔开
4. 交集选择器 标签.类名 或者 #ID
5. 伪类选择器 a:hover

7、链接伪类选择器有哪些？（按顺序）

a:link

a:visited

a:hover

a:active

8、css的三大特性？请你描述三大特性是什么？

优先性 继承性 层叠性

优先级 谁的权重性高,谁就优先

继承性 子标签会继承父标签的属性

层叠性 样式冲突的时候,遵循就近原则

9、选择器的优先级？

! important>行内样式表>id>伪类选择器标签>属性选择器>类>标签>全局>继承

文字，文本属性与背景，列表属性

1、文本颜色属性？

color

2、字体大小属性？

font-size

3、em 和 px的 区别？

px是相对于显示器的分辨率而言的

em:1.不是固定的

​ 2:随着父级的大小而变化

4、字体类型属性？

font-family

5、字体粗细属性？

font-weight

6、字体风格属性？

font-style

7、文本装饰属性？

text-decoration

8、文本缩进属性？

text-indent

9、水平对齐方式属性以及值？

​ text-align

left左

right右

center中间

10、行高？

line-height

11、背景颜色属性？

background-color 背景颜色

12、背景图片属性？

background-image

13、背景平铺属性以及值？

background-repeat

no-repeat

repeat-x

repeat-y

14、背景尺寸属性？

background-size

15、背景位置属性？

background-position

16、什么是精灵图（sprite）？精灵图的优点？

​ 就是把很多小图片集合成一张大的图片

​ 1.提高网页加载速度

​ 2.缓解服务器的压力

​ 3.提升用户体验度

17、列表样式属性？（怎么去点项目符号）

list-style:none;

盒模型

1、什么是盒子模型？

把网页中的一个元素当成一个矩形盒子,也就是一个可以盛装内容的容器.

2、盒子有哪几个部分组成？

内容 内边距 外边距 边框

3、计算盒子模型的总尺寸？（宽和高）（写汉字和英文）

宽:内容(content)+左右边框(border)+左右内边距(padding)+左右外边距(margin)

高:内容+上下内边剧+上下外边距+上下边框

4、盒子边框属性？

border:1px solid red

5、什么是内边距？属性？

内容与边框的距离

padding

6、什么是外边距？属性？

边框与边框之间的距离

margin

7、当padding有一个值，两个值，三个值，四个值时，分别指的是什么？（margin同理）

一个值:上下左右

两个值:上下 左右

三个值:上 左右 下

四个值:上 右 下 左

8、什么是外边距嵌套塌陷？以及解决办法？

父盒子嵌套一个子盒子,子盒子设置上外边距,父盒子会跟着一块移动.

1.盒子设置边框.

2.父盒子设置内边距.

3. 父元素末尾设置 overflow:hidden

9、什么时外边距折叠现象？

上边距和下边距会发生折叠现象,折叠后 取最大的值.

10、盒子水平居中的代码？

margin:0 auto;

11、文字水平居中的代码？

text-align:center;

12、清除元素的默认内外边距？

*{

padding:0;

margin:0;

}

13、圆角边框属性？

border-radius

14、举出块级元素的例子？块级元素的特点？

块元素:

<p></p><h1></h1>~<h6></h6><div></div>

特点:1、独占一行 2、 可以设置内外边距 ,宽和高 3、可以容纳其它块元素默认宽度占容器的100%

15、举出行内元素的例子？行内元素的特点？

 <a></a> <b></b>

特点: 1.不能独占一行 2.不能设置宽和高 默认宽度是文本内容的宽度

3.行内只能容纳文本或其它行内元素 4.可以设置水平方向的内外边距垂直方向不可以设置

16、举出行内块元素的例子？行内块元素的特点？

img input td

特点: 不独占一行,可以设置宽和高

17、显示模式转换属性是什么？行元素怎么转行内块元素？

display:inline-block

浮动和清除浮动

1、什么是浮动？

脱离标准文档流 不占据原来的位置

2、什么是标准文档流？

​ 一个网页它是从上往下从左到右去排列的

3、浮动的属性以及属性值？

float left right none

4、浮动元素的特点？

​ 1.脱离标准文档流 不占据原来的位置

​ 2.找最近的父级元素对齐不会超出内边距的范围

​ 3.对行内元素产生影响 可以水平排列设置宽和高

5、浮动元素对行内元素和块元素的影响？

对行内元素产生的影响:可以设置一排设置宽和高（具有行内块的特性）

对块级元素产生的影响: 浮成一排设置宽和高（具有行内块的特性）

6、为什么要清除浮动（本质）？

为了解决父级元素因为子级浮动引起内部高度为零的问题

7、清除浮动的方法？

​ 1.给父级元素加高

​ 2.在受浮动影响的元素中添加clear样式属性

​ 3.额外标签法：在浮动元素末尾添加空标签给其设置clear:both

定位

1、静态定位的属性值以及特点？

position:static

1、网页中所有元素都默认的是静态定位。
2、无法使用偏移属性改变元素的位置。

2、相对定位的属性值以及特点？

position:relative

1. 可以通过边偏移移动位置，但是原来的所占的位置，继续占有（不脱离标准文档流）。
2. 相对于自己来移动位置

3、绝对定位的属性值以及特点？

position:absolute

1、绝对定位是脱离文档标准流的
2、绝对定位的参考点
	2.1距离最近的具备定位特性的祖先父元素。
	2.2祖先父元素都没有定位时，以浏览器窗口为基准。

4、子绝父相指的是什么？

绝对定位通常和相对定位进行搭配使用，父级使用相对定位，子级使用绝对定位

5、绝对定位的盒子水平/垂直居中？

1. 首先 left:50%   父盒子的一半大小
2. 外边距设置为**自己大小**负的一半值就可以了（ margin-left）。

left:50%;
margin-left:-100px;（transform:translate(-50%））

6、固定定位的属性值以及特点？

position:fixed

1. 固定定位的参考点是浏览器窗口。
2. 固定定位元素脱离标准文档流，不占有位置。
3. 固定定位是固定的，不随着滚动条滚动。

7、叠放次序属性？

z-index: 数字;

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 定位元素始终压在未定位的元素上方。
4. 父元素的z-index决定了子元素的层级。

布局和兼容

1、在任何浏览器中，图片都会有间距，如何解决？

1、将图片转换成块，img{display：block；}
2、如果要让图片成行显示，img{float：left；}或者 img{float：right；}
3、给图片加一个对齐方式img{vertical-align:middle; } 

2、css设置元素透明度问题？

opacity:x （x的值为0~1，值越小越透明） 含IE8以下不支持

解决办法：

filter:alpha(opacity=x) （x的值为0~100，值越小越透明）

3、css圆角问题？

低版本不支持

​ width：100px;

​ height:100px;

​ boder-radius ：50%；（50%-100%都有效）

overflow属性：规定当内容溢出元素框时发生的事情。

• overflow:visible |hidden |scroll |auto
• visible(可视的) 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

visibility（可见度）属性：设置或检索是否显示对象。

visible：设置对象可视
hidden：设置对象隐藏

visibility:hidden与display:none的区别

• visibility: hidden; /元素隐藏，位置保留/

• visibility: visible;/元素显示/

• display:none;/元素隐藏，位置不保留/

• display:block;/元素显示/

弹性布局

弹性盒子：

​ 弹性盒子是 CSS3 的一种新的布局模式,弹性盒（ Flexible Box 或 flexbox），是当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.

​ 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

一、设置父级容器的样式属性

1、display属性：定义为弹性盒子容器。

属性值	说明
flex	设置父级容器为块级弹性盒子容器
inline-flex	设置父级容器为内联级弹性盒子容器

2、flex-direction属性：设置弹性子元素在父容器中的排列顺序（形成主轴和交叉轴）

属性值	说明
row(行)	横向从左到右排列（左对齐），默认的排列方式。
row-reverse（反向）	反转横向排列（右对齐，从后往前排，最后一项排在最前面）。
column（列）	纵向排列
column-reverse	反转纵向排列，从后往前排，最后一项排在最上面

3、justify-content 属性：内容对齐（justify-content）属性，沿着弹性容器的主轴线（main axis）对齐。

属性值	说明
flex-start	弹性项目向行头紧挨着填充。这个是默认值。
flex-end	弹性项目向行尾紧挨着填充
center	弹性项目居中紧挨着填充。
space-between	弹性项目平均分布在该行上。
space-around	弹性项目平均分布在该行上，两边留有一半的间隔空间。

4、align-items 属性：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

属性	说明
flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
center	弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch	如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

5、flex-wrap：属性规定flex容器是单行或者多行

属性	说明
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

二、设置子级级容器的样式属性

1、flex属性: 指定弹性子元素如何分配空间

flex:比例；

2、align-self:定义flex子项单独在侧轴（纵轴）方向上的对齐方式

属性值	说明
stretch	元素被拉伸以适应容器。
center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。

3、小技巧-子元素的属性：
margin:auto;设置子元素在弹性盒子中自动主轴，侧轴居中对齐。