css（菜鸡视角） -凯发k8官方网
要修改颜色，需要在style选项里更改=“color：你要的颜色；”
catphotoapp
🐖：颜色后别忘了加冒号；
更清晰的方法可以像label一样把所需的style声明单独提出，创建一个 css selector
还可以用十六进制hex表示：#000000，可简写为三位的数字
🐖： 0表示暗，f表示亮
rgb 值与我们之前学到的十六进制编码不同。rgb 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
body {background-color: rgb(255, 165, 0); }🐖： 你需要确保所有样式规则位于{花括号}之间，并且每条样式规则都以分号；结束。
在style样式声明中，可以创建class类，🐖：名称以句点 . 开始
在html元素中调用时 ,名称不用句点.
font-size
同样在style中设置字体大小
h1 {font-size: 30px; }font_family
族名同理可设置
🐖：字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来
🐖：可以排列多个字体，用”，“隔开，以便作为没字体的备选方案
css 边框具有 style、color、width 、radius（圆角）属性。
.green-background {background-color: green; }创建背景颜色的类
除了 class 属性，每一个 html 元素都有一个 id 属性。
使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。
🐖：如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。
#cat-photo-element {background-color: green; }注意在 style 标签里，声明 class 的时候必须在名字前插入 . 符号。 同样，在声明 id 的时候，也必须在名字前插入 # 符号。
所有的 html 元素都是以矩形为基础。
由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。
padding
用来控制着元素内容与 border 之间的空隙大小。
padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。偷懒可以直接按顺时针方向声明
padding: 10px 20px 10px 20px;margin
用来控制元素的边框与其他元素之间的 border 距离。
如果你把元素的 margin 设置为负值，元素会变得占用更多空间。
margin也有四向值，也可简写
[attr=value] 属性选择器来修改 catphotoapp 中复选框的样式。
下面的代码会改变所有 type 为 radio 的元素的外边距。
[type='radio'] {margin: 20px 0px 20px 0px; }单位长度的类型可以分成 2 种：相对和绝对。 绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。
相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。 如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。
important 的优先级最高,
color: red !important;行内内联样式的优先级高于 id 选择器
为创建一个 css 变量，你只需要在变量名前添加两个连字符号，并为其赋值即可，例子如下：
--penguin-skin: gray;创建变量后，css 属性可以通过调用变量名来使用它对应的值。
background: var(--penguin-skin，备用值);🐖：为了防止使用的浏览器不支持css，最好添加一个普通的方法
css 变量经常会定义在 :root 元素内，这样就可被所有选择器继承,作用于所有部分。:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。
媒体查询）声明的 :root 选择器里，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。
只要在一个元素的 css 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页
只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。 创建一行将使子项水平对齐，创建一列将使子项垂直对齐。其他可选值还有 row-reverse 和 column-reverse
justify-content
- flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 justify-content 的值，那么这就是默认值。
- flex-end：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。
- space-between：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
- space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
- space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
- justify-content: center;：即 flex 子元素在 flex 容器中居中排列
aligh-items
flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。css 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。
- flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
- flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
- center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
- stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。
- baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。
flex-wrap
css flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。 默认情况下，flex 容器会调整项目大小，把它们都塞到一起。 对于行来说，所有项目都会在一条直线上。
不过，使用 flex-wrap 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。
- nowrap：默认值，不换行。
- wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
- wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。
flex-shrink(grow)
首先介绍的是 flex-shrink 属性。 使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。
子元素的 flex-shrink 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。 比如，一个项目的 flex-shrink 属性值为 1，另一个项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩。
flex-basis
flex-basis 属性定义了在使用 css 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。
flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。 如果值为 auto，则项目的尺寸随内容调整。
flex短方法
flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。
order
der 属性告诉 css flex 容器里子元素的顺序。 默认情况下，项目排列顺序与源 html 文件中顺序相同。 这个属性接受数字作为参数，可以使用负数。
align-self
这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。 因为 float、clear 和 vertical-align 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。
align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值。
总结
- 上一篇：
- 下一篇：