css初学

1.css 基本规则

css全称：层叠样式表(Cascading Style Sheets)

选择器：告诉浏览器要设置样式的html元素

声明块：用于设置样式

viewport：移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，开发移动端页面时一定要加上

2.css的几种写法及推荐写法

写法：

内部样式表：写在style标签里面的

内联样式表：写在元素的style属性里面的

外部样式表：link标签将css资源引入

推荐外部样式表：

解决页面当中样式重复的问题

代码分离，利于代码维护和阅读

浏览器会缓存起来，提高页面响应速度(不用重新去服务器获取)

3.常见的选择器及使用场景

必须掌握的选择器

元素(标签)选择器 h1{color:red;}

类选择器 className {color:red;}

id选择器(javaScript) idName {color:red;}

开发过程中常用的选择器

通配符选择器 *

派生选择器：

根据文档dom结构来选择html元素

后代选择器 h1 p {color:red;}

子元素选择器(mdn搜索)div>span{font-size:900}

相邻选择器 h1+p{backgroud-color:pink;}

4.特殊的选择器

特殊的选择器

伪类选择器

选中一些元素的特殊效果

在某些场景选中有关系元素

 /* 需要注意顺序 */
a:link {color:#FF0000;} /* 未访问的链接 */ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;} /* ⿏鼠标悬浮后的链接 */ 
a:active {color:#0000FF;} /* 已选中的链接 */

/* 某些情况下好⽤用的伪类选择器器 */ 
元素:first-child {} 
元素:last-child {} 
元素:nth-child(n) {}

5.css盒子模型

什么是盒子模型

在css里面，所有的html元素你都可以看成是一个盒子

具体可以分成如图：

css盒子模型

由以下部分组成

盒子和盒子之间的间隙(margin)

盒子的边框(border)

盒子的内部间隙(padding)

盒子的内容(content)

盒子怪异模型

w3c标准的盒子模型(标准盒模型)

boxWidth=contentWidth

ie标准的盒子模型(怪异盒模型)

box-sizing:border-box // 声明

boxWidth=contentWidth+border+padding

外边距折叠：

上下两个兄弟盒子的margin都为正取大，都为负取小，一正一负相加

父子元素盒子的margin（假设没有内边距或边框把外边距分隔开），也会合并;只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

解决父子边距合并：
父元素{
  overflow:auto;
}

父元素::before{
  display: table;
  content: "";
}

6.css的常用属性

常用属性

盒子的位置和大小

尺寸：

宽度：width:长度 | 百分比 | auto

高度：height

边界：margin padding 上右下左 || 上下左右

布局：

浮动：float

定位: position

弹性布局：flex

盒子内容超出部分： overflow : hidden || scroll || auto

外观，风格：

background: 背景颜色 || 背景图像 || 背景重复 || 背景不要固定 || 背景位置

background-color

文字属性

字体大小： font-size

是否加粗： font-weight

是不是斜体：font-style

字体是什么：font-family

合并成一个属性：font

7.特性：层叠

层叠是一个基本特征

一个css属性被多次声明的时候，会根据优先级或者声明顺序来计算采用哪个样式

优先级是怎么计算

!important > 行内样式 > id > class > tag > 通配符

标签选择器 1

类选择器 10

id 选择器 100

通配符选择器和表示关系的选择器，对优先级没有影响

例外规则

!important

注意的：

不利于代码的维护

建议不要在自己的局部代码(公用代码)里使用important

可以在引入外部css,覆盖他本身的代码时，就可以用

8.css中什么是继承及常见的可继承的属性

什么是继承

当前的元素你不设置某些属性的时候，展示出来的样子(继承了父元素的某些属性)

默认设置继承的属性

记住一句话：

颜色、文字、字体间距行高、对齐方式、列表的样式

9.css中元素的分类和布局前置知识

元素的分类

块级元素

,
,
, ,

自已点满一行，就算宽度变小，也是独立成行

可修改宽高属性

行内元素： , , , ,

写在块级元素里面

可跟其他行内元素并行显示

不能修改宽高

正常元素怎么布局

默认：一个块级元素的内容宽度就是其父元素的100%,他的高度和其内容高度一致

行内元素它的宽度和高度都是根据内容决定的(无法设置行内元素的宽高)：

可设置display属性，定义元素的类型(css3定义布局)

元素之间又是如何相互影响的呢：

正常的文档布局流：

每个块级元素会在上个元素下面另起一行

行内元素不会另起一行

10.CSS 浮动

什么是浮动

一种布局方式，最初是为了文字能够围绕在图片周围而引入

为什么引入

常规的布局过于死板，引入float属性来实现更丰富的布局

万物皆可浮动

浮动的元素会并行显示

浮动的元素脱离正常的文档布局流

文本会围绕在它身边

使用

1
2
3

float: none; //默认值，元素不浮动
float: left; //元素向左浮动
float: right; //元素向右浮动

特点：

浮动元素会脱离文档流，不再占据文档流空间

浮动元素彼此之间是从左往右排列，宽度超过一行自动换行

在浮动元素前面元素不浮动时，浮动元素无法上移

块级元素和行内元素浮动之后都变成行内块级元素

浮动元素不会盖住文字，可以设置文字环绕效果

浮动带来的问题

影响其他元素的布局

如何解决：

清除浮动：

利用clear属性

在最后一个浮动元素后加入一个带有clear:both属性的空元素

通过伪类选择器，利用:after伪元素在元素末尾添加一个内容并带有clear:both属性来实现的（伪元素可以想成是元素的子级，before就是第一个子元素，after是最后一个）

生成BFC(块级上下文)

将浮动元素的父级的高度固定

1
2
3

clear:both;
content:'';
display:block;

10.flex布局

flex布局(弹性布局) css3

父元素容器的属性：

/*设为flex布局以后，子元素的float、clear和vertical-align属性将失效。*/
display:flex;
/*决定主轴的方向(即项目的排列方向)*/
flex-direction: row | row-reverse | cloumn | cloumn-reverse;
/* 是否换行 */
flex-wrap: nowrap | wrap | wrap-reverse
/* 定义水平方向对齐方式 */
justify-content: flex-start | flex-end | center | space-between | space-around;
/* 定义垂直方向对齐方式 */
align-items: flex-start | flex-end | center | baseline | stretch;
/* 定义多个轴线(多行/多列)对齐方式 */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子元素容器的属性：

/* 定义子元素的排列顺序，默认为0 */
order: -10 | -1 | 0 | 1 | 10;
/* 定义子元素的放大比例，默认为0 */
flex-grow: 0 | 1 | 2 | 3;
/* 定义子元素的缩小比例，默认为1 */
flex-shrink: 0 | 1;
/* 定义了在分配多余空间之前，项目占据的主轴空间*/
flex-basis: <length> | auto;
/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;

兼容性：浏览器ie9及以上

推荐是使用flex布局：flex布局易用，布局全面

11.定位

也是为布局引入的属性

position常用的几个值

子绝父相

static(静态定位)

relative(相对绝对)

absolute(绝对定位)

fixed(固定定位)

sticky(粘性定位)

12.三栏布局如何实现

问题：高度固定，左右两侧的盒子宽度为200px,中间自适应

答案：

浮动实现

定位实现

flex实现

13.水平垂直居中

如何使用css实现水平垂直居中

行内元素：

1. line-height
	text-align: center;
2. display: flex;
	justify-content: center;
	align-items: center;

块级元素：

定位：

知道宽高(margin + 自身元素具体宽高/2) + top

知道宽高(margin + 自身元素具体宽高/2) + left 50%

不知道宽高借助css3的translate属性

1. position + margin 清楚子元素的宽高
2. position + transform 不清楚子元素的宽高
3. flex
4. table-cell 兼容性较差

14.BFC

MDN解释：

块格式化上下文(block formatting context, BFC) 是web页面的可视化css渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素的区域

通俗的解释：

形成一块封闭的区域，能检测到区域内脱离文档流的元素。

特点：

css中隐含的属性，开启后不会被浮动元素覆盖

bfc元素可以包含浮动元素

bfc元素的子元素和父元素外边距不重叠

开启(都会有副作用)：

设置元素浮动 float: left

设置为行内块元素： display: inline-block

overflow: hidden (推荐)

作用：

清除浮动带来的影响

解决边距塌陷问题(外边距折叠(margin collapsing)也只会发生在属于同一BFC的块级元素之间)

15.reset.css

https://meyerweb.com/eric/tools/css/reset/

16.css3常用属性

css3边框：

圆角：border-radius

盒阴影：box-shadow

边界图片：border-image

css3渐变：

/* 从上到下（默认情况下）*/
background-image: linear-gradient(#e66465, #9198e5);
/* 从左到右 */
background-image: linear-gradient(to right, red , yellow);
/* 对角 */
background-image: linear-gradient(to bottom right, red, yellow);

/*使用角度*/
/* 从上到下 */
background-image: linear-gradient(180deg, red, yellow); 
/* 从左到右 */
background-image: linear-gradient(90deg, red, yellow);

/*多个颜色*/
/* 从上到下 */
background-image: linear-gradient(red, yellow, green);
/* 从左到右 */
background-image: linear-gradient(to right, red, orange, yellow);

/* 透明度 */
background-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
/* 重复 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

css3文本效果：

文本阴影
text-shadow: 5px 5px 5px #FF0000;

文本溢出
/* 超过1行省略/裁剪 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis | clip; 

/* 超过2行省略/裁剪 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

文本换行
长文本换行
word-wrap:break-word;
单词拆分换行
word-break: break-all;

17.网络布局(grid)

应用场景：flex布局、float布局应用于一维布局，网格布局应用于二维布局

父元素属性

/* 使用 */
display: grid;
grid-template-columns: 10px 10px 10px;
grid-template-rows: 10px 10px 10px;

/* 百分比使用 */
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;

/* repeat()函数简化 */
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);