css简单总结

1、在文档中应用CSS的三种方法

·外部样式表

<link rel="stylesheet" href="styles.css">

·内部样式表

写在html中style标签中的

·内联样式

写在HTML元素中的

2、选择器

CSS语言有规则来控制在发生碰撞时哪条规则将获胜----这些规则称为级联规则和专用规则。

h1, .special { 
  color: blue; 
} 

选择器的种类

类型选择器、通配选择器、类选择器、ID选择器、标签属性选择器、伪类选择器、伪元素选择器、后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器

类型选择器
	h1 {  }


通配选择器
* {  }


类选择器
.box {  }

ID选择器
#unique { }


标签属性选择器
a[title] {  }


伪类选择器
p:first-child { }

伪元素选择器
p::first-line { }

后代选择器
article p

子代选择器
article > p

相邻兄弟选择器
h1 + p


通用兄弟选择器
h1 ~ p

·级联规则

（1）层叠

当选择器相同时，后面的获胜。

（2）优先级

3、函数

4、盒子模型

什么是CSS 盒模型?

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容

盒子组成

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

盒子模型

通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

替代（IE）盒模型

设置的长宽直接就是盒子占据的空间（不包括外边距）

.box { 
  box-sizing: border-box; 
} 

如果直接给所有元素都使用替代模式

html {
  box-sizing: border-box;
}

外边距是折叠效果（取最大值），而不是相加效果

display: inline-block

display有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免重叠。

这种情况很常见，尤其是a标签上

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：
·设置width 和height 属性会生效。
·padding, margin, 以及border 会推开其他元素。

display: inline-block

background

.box { 
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, 
  url(big-star.png) center no-repeat, rebeccapurple; 
} 

（1）background-image

默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。

background-repeat属性用于控制图像的平铺行为。可用的值是:
no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
也可以使用关键字:
cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

定位

background-position属性允许您选择背景图像显示在其应用到的盒子中的位置。
它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。

多个背景图像

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

在前面的图像在上面

背景附加
另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由background-attachment属性控制的，它可以接受以下值:

scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
local: 这个值是后来添加的(它只在Internet Explorer
9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

溢出

们知道，CSS中万物皆盒，因此我们可以通过给width和height（或者 inline-size 和 block-size）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。

=>1、设置最大最小高度 2、object-fit

裁剪一部分
.cover {
  object-fit: cover;
}
保持原比例
.contain {
  object-fit: contain;
}

拉伸填充
.fill {
  object-fit:fill;
}

（1）块级盒子

• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width 和 height 属性可以发挥作用
• 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

（2）内联盒子

• 盒子不会产生换行。
• width 和 height 属性将不起作用。
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
• 水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。
  a,span,em,strong

**CSS 布局

display属性

在css中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。

弹性盒子(Flexbox)

弹性盒子

Grid布局

grid布局

浮动

添加链接描述

定位技术

定位(positioning)能够让我们把一个元素从它原本在正常布局流(normal flow)中应该在的位置移动到另一个位置。定位(positioning)并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。

有一些非常有用的技术在特定的布局下依赖于position属性。同时，理解定位(positioning)也能够帮助你理解正常布局流(normal flow)，理解把一个元素移出正常布局流(normal flow)是怎么一回事。

有五种主要的定位类型需要我们了解：

静态定位(Static positioning)是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
相对定位(Relative positioning)允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。
绝对定位(Absolute positioning)将元素完全从页面的正常布局流(normal layout flow)中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 元素边缘固定，或者相对于该元素的最近被定位祖先元素(nearest positioned ancestor element)。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。
固定定位(Fixed positioning)与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。 这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
粘性定位(Sticky positioning)是一种新的定位方式，它会让元素先保持和position: static一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像position: fixed一样定位。

相对定位

相对定位(relative positioning)让你能够把一个正常布局流(normal flow)中的元素从它的默认位置按坐标进行相对移动。比如将一个图标往下调一点，以便放置文字. 我们可以通过下面的规则添加相对定位来实现效果:

兄弟定位

.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}

绝对定位

绝对定位用于将元素移出正常布局流(normal flow)，以坐标的形式相对于它的容器定位到web页面的任何位置，以创建复杂的布局。有趣的是，它经常被用于与相对定位和浮动的协同工作。

与父容器的距离

.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}

固定定位

固定定位(fixed positioning)同绝对定位(absolute positioning)一样，将元素从文档流(document flow)当中移出了。但是，定位的坐标不会应用于"容器"边框来计算元素的位置，而是会应用于视口(viewport)边框。利用这一特性，我们可以轻松搞出一个固定位置的菜单，而不受底下的页面滚动的影响。

.positioned {
    position: fixed;
    top: 30px;
    left: 30px;
}

粘性定位

粘性定位(sticky positioning)是最后一种我们能够使用的定位方式。它将默认的静态定位(static positioning)和固定定位(fixed positioning)相混合。当一个元素被指定了position: sticky时，它会在正常布局流中滚动，直到它出现在了我们给它设定的相对于容器的位置，这时候它就会停止随滚动移动，就像它被应用了position: fixed一样。

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}