html+css阶段知识总结

html+css

<!DOCTYPE> 声明

它不是html的标签，它为浏览器提供一项信息（声明），即html是用什么版本编写的。

<html lang="en">标签

lang属性：HTML语言声明属性，用来定义当前文档显示的语言。

lang=“en” 表示定义语言为英文

<meta>标签

<meta charset="UTF-8">
/*charset 属性规定 HTML 文档的字符编码。*/

a标签

target：属性有：_blank(新窗口打开) _self(当前窗口打开) _parent _top

锚链接：给元素添加id属性，使用a标签添加其中的href=“#id名字”，来实现对网页的定位。

a标签如何做到点击不跳转

将a标签中的href属性中添加井号加上其他东西

<a href="#1">我是链接</a>

块元素，行元素，行内块元素

块级元素：独占一行，对宽高的属性值生效；如没有给出宽高，块级元素就默认为浏览器的宽度，即就是100%；

行内元素：可以多个标签存在一行，对宽高属性不生效，完全由内容撑开宽高；

行内块元素：可以对宽高属性值生效，还可以多个标签存在一行显示；

块标签：p，div，ul，ol，li，h1~h6，form；

行内标签：a，span，em，strong（一般用来对文字进行强调，使用加粗字体体现出来），img，var（JavaScript中命名变量的标签）；

行内块元素：img，input，textarea；

各种标签之间的转换：

display:black;/*该标签设置为块级元素，能够设置宽高，不可以和其他标签占一行*/
display:inline;/*该标签设置为行级元素，不能设置宽高，可以和其他标签占一行*/
display:inline-block;/*该标签能设置宽高，可以和其他标签占一行*/

块标签可以套行标签，行标签不可以套块标签。

四种定位

static定位：html元素的默认值，即没有定位

fixed定位：元素的位置相对于浏览器窗口位置固定

relative 定位：相对定位元素的定位是相对其正常位置

absolute定位：相对于已定位的父元素，和其他元素重叠

子绝父相

在父类的position属性是relative的情况下，子类的position属性又是absolute的情况下，那么我们的子类的定位是在父类的范围中absolute，而不是整个页面。

选择器的分类及用法

分类及优先级

基本选择器：

标签选择器，类选择器，id选择器，通配符选择器，组合选择器

层次选择器：

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

子元选择器：div>p{color:red;} （与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素）

兄弟选择器：div+P{color:red;}

通用选择器：div~p{color:red;}

伪类选择器

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

伪元素选择器

p:first-line {color:#FF0000;} /* 文本首行设置特殊样式 */
p:first-letter {color:#FF0000;}  /* 文本首字母设置特殊样式 */
p:before {color:#FF0000;} /* 在元素的前面加上新的内容 */
p:after {color:#FF0000;} /* 在元素的后面加上新的内容 */
p:first-child{color:#FF0000;}/* 样式匹配元素的第一个子元素 */

优先级

选择器的权值
通配选择符（*）：0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 1
id： 100
important： 1000

.testClass{ 
color:blue !important;/*使用！important提高优先级*/
}

用法

内联样式（行内样式）

在标签内部通过style属性来设置元素的样式，改样式只对一个标签生效

内部样式表

将样式编写到头部中的style标签里，通过css选择器来选中元素并为其设置样式，可以为多个标签设置样式

外部样式表

将样式编写到一个外部的css文件中去，然后通过link标签来引入外部的css文件（最佳实践）

css单位的种类和区别

px : 绝对单位，按照像素的长度衡量

em : 相对单位，父类字体大小的倍数

% : 相对于父类元素的长宽（当position：fixed时，相对于窗口的大小；当position：absolute时，将相对于其相对元素的大小）

颜色的表示方法

十六进制颜色（红色：#ff0000 带有透明的红色：#ff000080）

带透明度的十六进制颜色

RGB 颜色（蓝色：rgb(0,0,255) 带有透明度的蓝色：rgba(0, 255, 0, 0.3)）

RGBA 颜色

HSL 颜色（指的是色相（hue）、饱和度（saturation）和亮度（lightness））

HSLA 颜色（使用格式：hsla(hue, saturation, lightness, alpha)；其中alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。）

预定义/跨浏览器的颜色名称（blue 颜色名）

使用 currentcolor 关键字（currentcolor 关键字引用元素的 color 属性值。）

浮动及清除浮动

css浮动

浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。

由于浮动框不在文档中的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

css float属性

通过float属性来实现元素的向左向右浮动。

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

盒子模型

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容

元素的宽度和高度：

最终元素的总宽度计算公式是这样的：

总元素的宽度=设置的宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的宽度：content + padding-left +padding-right +border-left+ border-right+margin-left+margin-right

元素的总高度最终计算公式是这样的：

总元素的高度=设置的高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

怪异盒子模型的宽度和高度：

怪异盒模型下盒子的大小=width（content + border + padding） + margin

css flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。

通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

flex容器属性：

display：指定html元素的盒子类型

flex-direction：指定弹性盒子中元素的排列方式（row：默认值，主轴沿水平方向从左到右；row-reverse:主轴沿水平方向从右到左；column：主轴沿垂直方向从上到下；column-reverse：主轴沿垂直方向从下到上；initial：将此属性设置为属性的默认值；inherit：从父元素继承此属性的值）

flex-wrap：属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行（nowrap：默认值，表示项目不会换行；wrap：表示项目会在需要时换行；wrap-reverse：表示项目会在需要时换行，但会以相反的顺序；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值）

flex-flow:是 flex-direction 和 flex-wrap 两个属性的简写(例如：flex-flow: row-reverse wrap;)

justify-content：用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式（flex-start：默认值：左对齐；flex-end：右对齐；center：居中；space-between：两端对齐，项目之间的间隔是相等的；space-around：每个项目两侧的间隔相等；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值）

align-items：设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式（stretch：默认值，项目将被拉伸以适合容器；center：项目位于容器中央；flex-start：项目位于容器顶部；flex-end：项目位于容器的底部；baseline：项目与容器的基线对齐；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值；）

align-content：align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式（stretch：默认值，将项目拉伸以占据剩余空间；center：项目在容器内居中排布；flex-start：项目在容器的顶部排列；flex-end；项目在容器的底部排列；space-between：多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部；space-around：多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值；）

flex项目属性

order属性用来设置项目在flex容器中出现的顺序（给order来用数字赋值，默认值为零）

align-self：允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值（auto：默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”；stretch：项目将被拉伸以适合容器；center：项目位于容器的中央；flex-start：项目位于容器的顶部；flex-end：项目位于容器的底部；baseline：项目与容器的基线对齐；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值）

flex：它是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：
flex: flex-grow flex-shrink flex-basis;

（flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值）或者以具体的值加 "%"、"px"、"em" 等单位的形式。）

    column, float, clear和vertical-align对网格容器没有效果。

css Grid布局

Grid布局和flex布局：flex布局是一维布局，Grid布局是二维布局；

CSS：Grid布局教程文档

Grid容器属性

（1）display属性：指定html元素的盒子类型

使用display属性来定义一个网格容器，它的grid值决定了容器展现为块级还是内联形式。一旦启用网格容器，它的所有子元素都进入grid文档流，称为网格子项。

（display:grid；指定一个容器为网格布局，定义为块级元素；inline-grid：定义一个内联的网格容器
subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。）

（2.1）grid-template-columns/grid-template-rows：设置各个行高和列宽

/*定义列的宽度*/
/* <track-size>定义单元格的宽高; <line-name>定义单元格的名字 */
/* 单元格的名字不是一定要定义的，不定义将默认以数字命名 */
grid-template-columns: <track-size> ... / <line-name> <track-size> ...;
/*定义行的高度*/
grid-template-rows: <track-size> ... / <line-name> <track-size> ...;

/* 具体的格式 */
.container{   
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];   
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];  
}

.container02{   
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

（2.2）grid-template-areas

grid-template-areas可以配合grid-area定义一个显式的网格区域。

grid-template-areas定义网格区域，然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。（即是使用grid-area定义盒子的名字，再由grid-template-areas进行排布）

grid-template-areas: "<grid-area-name> | . | none | ..." "..." /* 
<grid-area-name>：在grid-area中指定的网格区域名字
.：一个句点表示一个空的网格单元none：没有网格区域被定义 */

（2.3）grid-column-gap/grid-row-gap/grid-gap

指定网格线的大小，也可以说是网格子项之间的间距。

/* <line-size>长度值 */grid-column-gap: <line-size>grid-row-gap: <line-size>

（2.4）justify-items/align-items

justify-items：让网格子项的内容和列轴对齐（align-items则相反，是和行轴对齐），这个值对容器里面的所有网格子项都有用；

start：内容和网格区域的左边对齐
end：内容和网格区域的右边对齐
center：内容和网格区域的中间对齐
stretch：填充整个网格区域的宽度（默认值）

（2.5） justify-content/align-content

justify-content：是整个内容区域在容器里面的水平位置

align-content：是整个内容区域在容器里面的垂直位置

属性值：

start:左对齐
end：右对齐
center：居中对齐
stretch：填充网格容器
space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between：两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly：网格间隔相等，包括始末两端

Grid子项属性

（1）grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row

通过网格线来定义网格项的位置。

grid-column-start、grid-row-start定义网格项的开始位置，grid-column-end、grid-row-end定义网格项的结束位置。

（2）grid-area

给网格子项取一个名字以让它被由grid-template-areas属性创建的模板引用

同时，这个属性还可以用来更简短地表示grid-row-start+ grid-column-start + grid-row-end+ grid-column-end。

（3）justify-self/align-self

justify-self是让网格子项的内容以列轴对齐（与之相反align-self是跟行轴对齐），这个值可以应用在单个网格子项的内容中。