css基础

一.css简介

CSS 指层叠样式表 (Cascading Style Sheets)，CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来。

css选择器：通配选择器、选择符和逻辑组合伪类的优先级都是 0。标签选择器的优先级是 1。类选择器、属性选择器和伪类的优先级是 2。ID 选择器的优先级是 3。style属性内联样式的优先级是 4。!important优先级是最高的，也就是 5

类选择器	.myclassname
标签选择器	div,h1,p
相邻选择器	h1+p
子选择器	ul > li
后代选择器	li a
通配符选择器	*
属性选择器	a[rel=“external”]
伪类选择器	a:hover, li:nth-child

css 中逗号，空格，冒号，点号的含义

一：#a,b{…………｝

二：#a b{…………｝

三：#a:b{…………｝

四：#a.b{…………｝

这是四个分别代表着什么含义呢？

一、一个id叫a和一个标签是b的样式

二、一个id叫a下面的一个标签是b的样式

三、一个id叫a的伪类b，例如：a:hover

四、一个id叫a的下面的class叫b的样式

css样式表：外部样式表每个页面使用 标签链接到样式表。 标签在（文档的）头部。内部样式表用

二.css背景

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

背景图片的url要用’‘符号，默认是平铺重复显示。

background-position:right top;

如果只有一个值，则另一个为center

三.css文本

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

所有字句变成大写、小写，每个单词首字母变成大写。颜色为color.

四.css链接

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

a:hover 必须跟在 a:link 和 a:visited后面。a:active 必须跟在 a:hover后面（love hate）

五.嵌套选择器

• p{ }: 为所有 p 元素指定一个样式。
• .marked{ }: 为所有 class=“marked” 的元素指定一个样式。
• .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
• p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

六.disaplay与visibility

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

七.定位

静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

relative定位是相对于其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

absolute绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。

sticky基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。设置了sticky定位的元素相对于第一个定位不为static的父级元素的位置。

z-index属性指定一个元素的堆叠顺序。

css的overflow属性

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

css的float浮动属性

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上。假如某个div元素是浮动的，如果a元素的上一个元素也是浮动的，那么a元素会跟随在上一个元素的后边，一行放不下，a元素会被挤到下一行，如果a元素的上一个元素是标准流的元素，a的相对垂直位置不会改变，也就是a元素的顶部总是和上一个元素的底部对齐。

清除浮动clear，这个规则只能影响使用清除的元素本身，不能影响其他元素。

块级元素在水平方向上有7大属性，margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。

元素居中对齐，可以使用margin：auto。如果没有设置width，居中对齐则不起作用。

文本居中对齐，可以使用text-align：center。

inline-block元素使用margin：auto不起作用：对于块级元素，当width固定后，margin就能通过margin = (包含块的宽度 - width )/2获得取值而对于inline-block元素（包含行内替换元素比如img等），内容的宽度就是最终的宽度，没有margin-left + width + margin-right = 包含块的宽度这一限制，所以当margin被设置为auto时，它并不知道要取什么值，就默认为0了，这和为什么垂直方向上不能设置auto是一样的道理。

左右对齐，使用定位方式。position：absolute。绝对定位元素会被从正常流中删除，并且能够交叠元素。

左右对齐，使用float方式。如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。

.clearfix {
    overflow: auto;
}

垂直居中对齐使用padding，第一个参数为上下padding，第二个参数为左右padding，当左右padding设置为0时，优先左padding为0.如果水平和垂直都居中，可以时使用padding和text-align：center。

垂直居中使用line-height和height高度相等。

垂直居中还可以使用position和transform设置。

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

css组合选择符

在 CSS3 中包含了四种组合方式:后代选择器(以空格 分隔) 选取某元素的所有后代元素；子元素选择器(以大于 > 号分隔） 只能选择直接/一级子元素；相邻兄弟选择器（以加号 + 分隔） 紧接在另一个元素后的元素，而且二者有相同的父元素；普通兄弟选择器（以波浪号 ～ 分隔） 选取所有指定元素之后的相邻兄弟元素

css伪类和伪元素

css水平导航栏可以使用inline或者float。

css图像透明度是opacity。

css图像拼合img中的src不能为空，先定义一个透明图像，通过width和height定义宽高，background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

css媒体类型@media

媒体类型	描述
all	用于所有的媒体设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv	用于电视机类型的设备。

css属性选择器[]

表单样式的无需使用class或id形式

例
input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

输入框颜色可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色。在默认情况下，一些浏览器获取焦点时会有轮廓，我们可以设置input的样式为outline：none，使用：focus选择器可以设置输入框在获取焦点时的样式。

input[type=text]:focus{
background-color:lightblue;
}

选择属性type=text的input输入框，获取焦点后设置背景颜色。

input输入框在添加小图标时，要注意设置边距。

文本框使用resize属性来禁用文本框可以重置大小的功能。

CSS 计数器使用到以下几个属性：

• counter-reset - 创建或者重置计数器
• counter-increment - 递增变量
• content - 插入生成的内容
• counter() 或 counters() 函数 - 将计数器的值添加到元素

css3

css3边框：圆角border-radius，盒阴影box-shadow，边界图片border-image。

border-radius指定每个圆角

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

border-radius 的值如果为百分比，则为盒子的宽度与高度的比值。所以当值为 50% 的时候正好是直径为盒子长度的圆。那当 border-radius 为 100% 的时候，直径应该为两倍的边长。相邻的两个角的半径之和已经超过了盒子的长度，浏览器需要重新计算。计算的规则就是同时缩放两个圆角的半径，直至两个相邻角的半径和为盒子的长度。

使用background-image添加背景图片时，后设置的优先级低。

使用background-origin属性可以指定背景图片的位置区域，在context-box，padding-box，border-box区域内可以放置背景图像。background-clip属性剪裁从指定的位置开始。

css3渐变，可以减少下载的时间和宽带的使用，渐变是由浏览器生成，分为线性渐变和径向渐变。

线性渐变语法结构

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

如果想要在渐变的方向上做更多的控制，可以定义角度

background-image: linear-gradient(angle, color-stop1, color-stop2);

css3渐变也支持透明度，可以使用rgba（）函数定义颜色节点，rgba（）函数的最后一个参数可以是0到1的值，定义了颜色的透明度，0代表全透明。

repeating-linear-gradient() 函数用于重复线性渐变

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

css3径向渐变

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

css3字体，在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

css3 2D转换

translate（）方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

transform: translate(50px,100px);

rotate（）方法，给定读书顺时针旋转

sacle（）方法增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

skew（）方法包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

css3 3D旋转

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

css3 过渡

如果未指定的期限，transition将没有任何效果，因为默认值是0。

下表列出了所有的过渡属性:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

css3 动画

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

css多列属性

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	column-width 与 column-count 的简写属性。

css3用户界面

resize属性指定一个元素是否应该由用户去调整大小。box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓不占用空间，轮廓可能是非矩形。

css3图片，如果需要自由缩放图片，且图片放大的尺寸不大于原始的最大值，

img {
    max-width: 100%;
    height: auto;
}

css3禁用按钮，通过添加cursor属性并设置为“not-allowed”来设置禁用。默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:

css3弹性盒子。 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变。flex-direction 属性指定了弹性子元素在父容器中的位置。

flex-direction的值有:

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

• flex-start：

  弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

• flex-end：

  弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

• center：

  弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

• space-between：

  弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

• space-around：

  弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

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

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

• nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
• wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
• wrap-reverse -反转 wrap 排列。

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

• stretch - 默认。各行将会伸展以占用剩余的空间。
• flex-start - 各行向弹性盒容器的起始位置堆叠。
• flex-end - 各行向弹性盒容器的结束位置堆叠。
• center -各行向弹性盒容器的中间位置堆叠。
• space-between -各行在弹性盒容器中平均分布。
• space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

弹性子元素属性，order 属性设置弹性容器内弹性子元素的属性:数值小的排在前面。可以为负值。

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

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

flex 属性用于指定弹性子元素如何分配空间。flex属性是flex-gorw,flex-shrink,flex-basis三个属性的简写，默认值为0 1 auto。

• auto: 计算值为 1 1 auto
• initial: 计算值为 0 1 auto
• none：计算值为 0 0 auto
• inherit：从父元素继承
• [ flex-grow ]：定义弹性盒子元素的扩展比率。
• [ flex-shrink ]：定义弹性盒子元素的收缩比率。
• [ flex-basis ]：定义弹性盒子元素的默认基准值。

flex取一个非负数字，则该值为flex-grow的值

flex取两个非负数字，则分别视为 flex-grow和flex-shrink的值

flex取一个非负数字和长度或百分比，则视为flex-grow和flex-basis的值。flex-shrink取1

flex取一个长度或者百分比，则视为flex-basis的值。flex-grow和flex-shrink分别取1

css3多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

• not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
• only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
• all: 所有设备，这个应该经常看到。

css网格布局，当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

第一行100px。第二行300px。

网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

使用 grid-column-gap 属性来设置列之间的网格间距：

使用 grid-row-gap 属性来设置行之间的网格间距：

grid-gap 属性是 grid-row-gap 和 the grid-column-gap 属性的简写，可以同时设置行间距和列间距:

grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性使用网格线

justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。

align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。

grid-column 属性定义了网格元素列的开始和结束位置。grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。

grid-row 属性定义了网格元素行的开始和结束位置。grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。

grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。

grid-area 属性可以对网格元素进行命名。命名的网格元素可以通过容器的 grid-template-areas 属性来引用，每行由单引号内 ’ ’ 定义，以空格分隔。. 号表示没有名称的网格项。要定义两行，请在另一组单引号内 ’ ’ 定义第二行的列。
宽度必须小于容器的宽度才能使 justify-content 属性生效。

align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。

grid-column 属性定义了网格元素列的开始和结束位置。grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。

grid-row 属性定义了网格元素行的开始和结束位置。grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。

grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。

grid-area 属性可以对网格元素进行命名。命名的网格元素可以通过容器的 grid-template-areas 属性来引用，每行由单引号内 ’ ’ 定义，以空格分隔。. 号表示没有名称的网格项。要定义两行，请在另一组单引号内 ’ ’ 定义第二行的列。