周记（7.13-18）

最新推荐文章于 2024-08-03 23:03:36 发布

小周凉茶

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量363

点赞数

本文链接：https://blog.csdn.net/qq_51893876/article/details/118881570

版权

周记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本周任务：

复习html、css及css3知识，了解flex布局
精仿星巴克官网
巩固C语言知识，每天写两道题

复习前端知识

HTML知识点

1. html 结构

<html>
	<head>
	</head>
	<body>
	</body>
</html>

2. head 标签

能在head部分使用的标签有：

<meta>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
<!--设置字符集统一为UTF-8-->
<meta name="keywords" content="新浪,新浪网,SINA,sina,sina.com.cn,新浪首页,门户,资讯">
<!--设置关键字name="keywords"-->
<meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等。">
<!--设置网站描述name="discriptions"-->

<title></title>：设置网站标签上的标题
<link>

<!--link 链接 引入css文件或者网站标题前面的logo-->
<link rel="stylesheet" href="index.css" />	<!--引入CSS文件-->
<link rel="shortcut icon" href="favicon.ico">	<!--引入logo图片-->

<style></style>

<style>
	嵌入CSS样式
</style>

<script></script>

<script>
	嵌入JavaScript代码
</script>

3. body标签

基本标签：

文本标题标签 : 从<h1></h1> 到 <h6></h6> 字体大小递减,重要性依次减少,h1整个页面只能有1个;
段落标签<p></p> : 可以自动换行，并且有默认的字体和行高，需要单独设置字体和行高;
换行标签 : <br/>不需要闭合标签，直接添加在需要换行的地方；
横线标签：<hr/>标签的在浏览器中的默认样式线条比较粗，颜色为灰色；
字体样式标签：<b></b>和<strong></strong>标签都可使字体加粗，<em></em>和<i></i>标签使字体显示为斜体；

图像标签

<!--img标签的 alt图片不加载时显示的文字 title鼠标移入时显示的提示性文字-->
<img src="http://n.sinaimg.cn/news/20170310/Dxru-fychhvn8123135.jpg" alt="图片" title="这是一张图片" />

超链接标签

<!--超链接可以链接其他页面，也可以链接本页面，还可以上一次操作,点击后默认替换本网址-->
<a target="_blank" href="index.html" />		<!--_blank（新打开一个浏览器）,_self（在当前窗口打开一个链接,这个是默认情况）-->
<a href="#main" /></a>						<!--链接到本页面某个id选择器名为main的元素位置处-->
<a href="javascript:void(0)"></a>
<a href="javascript:history.back();"></a>	<!--链接到对应的JavaScript函数，以实现相应效果-->

列表标签

有序列表
ol-li在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始

<ol>
	<li>信息</li>
	<li>信息</li>
</ol>

无序列表
ul-li是没有前后顺序的信息列表。默认效果是用小圆点区分每个列表项
语法：

<ul>
	<li>信息</li>
	<li>信息</li>
</ul>

表格标签
创建表格的五个元素：table、tbody、tr、th、td

<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。（这个标签基本上不怎么用了）
<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
<td>…</td>：表格的一个单元格，一行中包含几对…，说明一行中就有几列。
<th>…</th>：表格的头部的一个单元格，表格表头。
表格中列的个数，取决于一行中数据单元格的个数。
<caption>标题文本</caption>为表格添加标题

内联元素

表单元素

form元素：
把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form method="传送方式" action="服务器文件">

form标签内部可使用的表单元素如下：

文本输入框

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。

name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)

文本域 : 支持多行文本输入

<textarea  rows="行数" cols="列数">文本</textarea>
<!--这两个属性可用css样式的width和height来代替：col用width、row用height来代替-->

单选框、复选框

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

type:
当 type=“radio” 时，控件为单选框
当 type=“checkbox” 时，控件为复选框

value：提交数据到服务器的值（后台程序PHP使用）

name：为控件命名，以备后台程序 ASP、PHP 使用

checked：当设置 checked=“checked” 时，该选项被默认选中

注意：同一组的单选按钮，name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。

下拉列表框
例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="select">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
</body>
</html>

selected=“selected”：设置selected="selected"属性，则该选项就被默认选中。
这个则为使用下拉列表框进行多选。

提交按钮

<input   type="submit"   value="提交">

type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字

重置按钮，重置表单信息

<input type="reset" value="重置">

label标签

<label for="控件id名称">
<!--标签的 for 属性中的值应当与相关控件的 id 属性值相同-->

CSS知识点

1. CSS 样式分类

内联式css样式：把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>
<!--css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。-->

嵌入式css样式：把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：

<style type="text/css">
span{
	color:red;	<!--把<span>标签中的文字设置为红色-->
}
</style>

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

外部式css样式：外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内使用标签将css样式文件链接到HTML文件内

<link href="base.css" rel="stylesheet" type="text/css" />

1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css"是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。

2. css注释语句：

使用/*注释内容*/来标明

3. CSS样式优先级

就近原则（离被设置元素越近优先级别越高）。

4. 选择器

每一条css样式声明（定义）由两部分组成，形式如下：

选择器名{
样式;
}

基本选择器

标签选择器

p{font-size:12px;line-height:1.6em;}
/*为p标签设置12px字号，行间距设置1.6em的样式。*/

类选择器

.stress{color:red;}
/*类前面要加入一个英文圆点*/

<span class="stress">胆小如鼠</span>

ID选择器

#setGreen{
    color:green;
    /*id前面要加入一个＃*/
}

<span id="setGreen">绿色的字体</span>

类选择器和ID选择器的区别

相同点：可以应用于任何元素

不同点：

ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

层次选择器

后代选择器：标签a 标签b{}
用于指定某个标签后面的所有标签的变化形式。就像名字说的后代，只要标签a的后代里面出现了标签b，那么标签b就会发生变化
子选择器：标签a > 标签b{}
与后代选择器不同，子选择器的控制范围只有一代。即标签a的子代出现了标签b才会变化，其他代不影响。
相邻兄弟选择器：标签a + 标签b{}
以标签a为主导，如果标签a的同级标签下含有标签b，那么这个标签b就会发生对象的变化，不过只有第一个兄弟才会变化，其他的无效。
通用选择器：标签a ~ 标签b{}
以标签a为主导，如果标签a的同级标签下含有标签b，那么这个标签b就会发生对象的变化不过。通用选择器更像是对相邻兄弟选择器的一个扩充，因为它将相邻兄弟选择器中的不相邻的那些兄弟也带了进来。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child

注意：

为了确保生效，应按照顺序声明 :link（未点击时）－:visited（点击后访问过）－:hover（鼠标放上去时）－:active（鼠标按住不放时）；
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

通用选择器（通配符选择器）

通用选择器是功能最强大的选择器，使用一个（*）号指定，匹配html中所有标签元素

* {color:red;}
/* *使html中任意标签元素字体颜色全部设置为红色*/

分组选择符

h1,span{color:red;}

它相当于下面两行代码：

h1{color:red;}
span{color:red;}

5. 选择器权重

权值计算规则如下：

最高：加了 !important 的选择器
第一等：内联样式，权值最高，记为1000；
第二等：ID选择器，记权值为0100；
第三等：类选择器、伪类选择器、属性选择器，记权值为0010；
第四等：元素选择器、伪元素选择器，记权值为0001；
其他：通配符选择器、子元素选择器、相邻兄弟选择器，记权值为0000；

6. 网页美化

文本阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow：水平阴影的位置，可取负值。
v-shadow：垂直阴影的位置。可取负值。
blur：模糊的距离。
color：阴影的颜色。

背景图片

background-image:URL;设置背景图片
background-repeat 属性设置是否及如何重复背景图像。
其属性值有：

repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。

background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。

background-position设置背景图像的开始位置。

top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right
如果仅规定了一个关键词，那么第二个值将是"center"。

x% y%
默认值：0% 0%。
第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。
如果仅规定了一个值，另一个值将是 50%。

xpos ypos
第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。

background-size:length/percentage/cover/contain 规定背景图像的尺寸。

length
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。

percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。

cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。测试

简写属性
在使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position

7. 盒模型

内容 - 框的内容，其中显示文本和图像。内边距padding - 清除内容周围的区域。内边距是透明的。边框border -
围绕内边距和内容的边框。外边距margin - 清除边界外的区域。外边距是透明的。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

重要提示：使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

元素的总宽度和总高度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

默认情况下，元素的实际宽度和高度是这样计算的：
width + padding + border = 元素的实际宽度
height + padding + border = 元素的实际高度

8. 行内元素和块级元素

行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：
相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：
链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

块级元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div>标签是最典型的块元素。

块级元素的特点：
独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意：
文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>。

9. display

display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block（如块级元素）或 inline（如行内元素）。

display: none;
display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。
默认情况下，<script>元素使用 display: none;。

display:none;和visibility:hidden;

通过 display:none 隐藏元素。该元素将被隐藏，且不会再影响布局。页面将显示为好像该元素不在其中。
通过visibility:hidden; 隐藏元素,该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局。

覆盖默认display值
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

10.溢出

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值： visible - 默认。溢出没有被剪裁。内容在元素框外渲染 hidden -
溢出被剪裁，其余内容将不可见 scroll - 溢出被剪裁，同时添加滚动条以查看其余内容 auto - 与 scroll
类似，但仅在必要时添加滚动条

注意：

overflow 属性仅适用于具有指定高度的块元素。
在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 “overflow:scroll”）。

11.浮动

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none -元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

清除浮动

额外标签法
在最后一个浮动的子元素后面添加一个额外的标签，添加清除浮动样式
父级添加overflow属性
给父级添加overflow属性，将其属性值设置为hidden、auto或scroll 【缺点：无法显示溢出部分】
父级添加after伪元素，例

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix { /*IE6、7专有*/
    *zoom: 1;
}

父级添加双伪元素，例：

.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

12.定位

相对定位 relative
相对于自己原本的位置来移动（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它（不脱标，继续保持原来的位置）
绝对定位 absolute
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位祖先元素为参考点移动位置
绝对定位不再占有原来的位置
固定定位 fixed
指元素固定于浏览器可视区的位置【浏览器页面滚动时元素的位置不会改变】
以浏览器的科室窗口为参照点移动元素
跟父元素没有任何关系
不随着滚动条滚动
不占有原先的位置（拖标）
粘性定位 sticky：相对定位和固定定位的混合
以浏览器的可视窗口为参照点移动元素（固定定位特点）
占有原先的位置（相对定位特点）
必须添加top、left、right、bottom其中一个才有效

13.层级`z-index`

控制盒子的前后次序，数值越大，盒子越靠上（默认 auto）
数字后不加单位，只有定位的盒子才有z-index属性

css3知识点

1. 盒子模型

在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致。

W3C标准盒模型

外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距

内盒尺寸计算（元素大小）
element高度＝内容高度＋内距＋边框（height为内容高度）
element宽度＝内容宽度＋内距＋边框（width为内容宽度）

IE传统下盒模型

外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）

内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

2.box-sizing属性

content-box
默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box
让元素维持IE传统的盒模型，即元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度-边框-内距）。

3.2D、3D转换

transform属性可实现移动、旋转、缩放和倾斜元素。

以下为2D转换的属性

matrix(n,n,n,n,n,n) 使用六个值的矩阵。
translate(x,y) 沿着 X 和 Y 轴移动元素。
translateX(n) 沿着 X 轴移动元素。
translateY(n) 沿着 Y 轴移动元素。
scale(x,y) 缩放转换，改变元素的宽度和高度。
scaleX(n) 缩放转换，改变元素的宽度。
scaleY(n) 缩放转换，改变元素的高度。
rotate(angle) 旋转，在参数中规定角度。
skew(x-angle,y-angle) 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 倾斜转换，沿着 X 轴。
skewY(angle) 倾斜转换，沿着 Y 轴。

3D：
属性transform-style: flat/preserve-3d;规定如何在 3D 空间中呈现被嵌套的元素：
flat 表示子元素将不保留其 3D 位置。
preserve-3d 表示子元素将保留其 3D 位置。
3D转换的属性与2D相同，只是需要加上z轴上的属性值。

4.过渡

transition可实现在给定的时间内平滑地改变属性值。

transition-delay 规定过渡效果的延迟（以秒计）。
transition-duration 规定过渡效果要持续多少秒或毫秒。
transition-property 规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function 规定过渡效果的速度曲线。可接受以下值：

ease ：规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear：规定从开始到结束具有相同速度的过渡效果
ease-in ：规定缓慢开始的过渡效果
ease-out ：规定缓慢结束的过渡效果
ease-in-out ：规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) ：允许您在三次贝塞尔函数中定义自己的值

transition 简写属性，用于将四个过渡属性设置为单一属性。
简写顺序如下：
transition:property/duration/timing-function/delay;

5.动画

实现动画效果需要的属性有：

@keyframes 规定动画模式。
@keyframes规则有两种写法

@keyframes example {
  from {动画过渡样式}
  to {动画过渡样式}
}

@keyframes example {
  0%   {动画过渡样式}
  25%  {动画过渡样式}
  50%  {动画过渡样式}
  100% {动画过渡样式动画过渡样式}
}

其中 example 为在animation-name属性中自定义的名称。

animation-delay 规定动画开始的延迟。可取负值，表示从动画的某一时间开始播放
animation-direction 定动画是向前播放、向后播放还是交替播放。属性值如下：

normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。

animation-duration 规定动画完成一个周期应花费的时间。
animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时），属性值如下：

none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用

animation-iteration-count 规定动画应播放的次数。属性值如下：

属性值为n时，定义动画播放次数的数值。
为infinite时，规定动画应该无限次播放。

animation-name 规定 @keyframes 动画的名称。
animation-play-state 规定动画是运行还是暂停。
animation-timing-function 规定动画的速度曲线。属性值如下：

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation 设置所有动画属性的简写属性。
语法：animation: name duration timing-function delay iteration-count direction;
其中duration必须设置，才能播放动画。

6.媒体查询

语法：@media 媒体类型and （媒体特性）{样式}

最大宽度：max-width，媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .box {
   display:none;	/*当屏幕小于或等于480px时,页面中的（.box）都将被隐藏。*/
  }
}

最小宽度：min-width，媒体类型大于或等于指定宽度时，样式生效。如：

@media screen and (min-width:900px){
.wrapper{width: 980px;}	/*当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。*/
}

not关键词
使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。即，not关键词表示对后面的表达式执行取反操作。如：

@media not print and (max-width: 1200px){样式代码}
/*样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。*/

only关键词##
only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：
    支持媒体特性的设备，正常调用样式；
    表示不支持媒体特性但又支持媒体类型的设备，不读样式，会先读取only而不是screen；
    不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如：

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

1.容器

父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。

2.父容器

设置子容器沿主轴排列：justify-content
justify-content 属性用于定义如何沿着主轴方向排列子容器。

flex-start：起始端对齐
flex-end：末尾段对齐
center：居中对齐
space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。
space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。

设置子容器如何沿交叉轴排列：align-items
align-items 属性用于定义如何沿着交叉轴方向分配子容器的间距。

flex-start：起始端对齐
flex-end：末尾段对齐
center：居中对齐
baseline：基线对齐，这里的 baseline 默认是指首行文字，即 first
baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。
stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

设置换行方式：flex-wrap
决定子容器是否换行排列，不但可以顺序换行而且支持逆序换行。

nowrap：不换行
wrap：换行
wrap-reverse：逆序换行，即沿着交叉轴的反方向换行。

轴向与换行组合设置：flex-flow
flow 即流向，也就是子容器沿着哪个方向流动，流动到终点是否允许换行，比如 flex-flow: row wrap，flex-flow 是一个复合属性，相当于 flex-direction 与 flex-wrap 的组合，可选的取值如下：

row、column 等，可单独设置主轴方向

wrap、nowrap 等，可单独设置换行方式

row nowrap、column wrap 等，也可两者同时设置

多行沿交叉轴对齐：align-content
当子容器多行排列时，设置行与行之间的对齐方式。

flex-start：起始端对齐
flex-end：末尾段对齐
center：居中对齐
space-around：等边距均匀分布
space-between：等间距均匀分布
stretch：拉伸对齐

轴：flex-direction
在 flex 布局中，flex-direction 属性决定主轴的方向，交叉轴的方向由主轴确定。

主轴
主轴的起始端由 flex-start 表示，末尾段由 flex-end 表示。不同的主轴方向对应的起始端、末尾段的位置也不相同。

向右：flex-direction: row
向下：flex-direction: column
向左：flex-direction:row-reverse
向上：flex-direction: column-reverse

交叉轴
主轴沿逆时针方向旋转 90° 就得到了交叉轴，交叉轴的起始端和末尾段也由 flex-start 和flex-end 表示。
上面介绍的几项属性是 flex 布局中最常用到的部分，一般来说可以满足大多数需求，如果实现复杂的布局还需要深入了解更多的属性。

3.子容器

在主轴上如何伸缩：flex
子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由 flex 属性确定。
flex 的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为none 则不伸缩。
虽然 flex 是多个属性的缩写，允许 1 - 3 个值连用，但通常用 1 个值就可以满足需求。
单独设置子容器如何沿交叉轴排列：align-self
每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器 align-items 属性完全一致，如果两者同时设置则以子容器的 align-self 属性为准。

flex-start：起始端对齐
flex-end：末尾段对齐
center：居中对齐
baseline：基线对齐
stretch：拉伸对齐

设置基准大小：flex-basis
flex-basis 表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度。
设置扩展比例：flex-grow
子容器弹性伸展的比例。
设置收缩比例：flex-shrink
子容器弹性收缩的比例。
设置排列顺序：order
改变子容器的排列顺序，覆盖 HTML 代码中的顺序，默认值为 0，可以为负值，数值越小排列越靠前。

小周凉茶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
周记（7.13-18）

文章目录复习前端知识HTML知识点本周任务：复习html、css及css3知识，了解flex布局精仿星巴克官网巩固C语言知识，每天写两道题复习前端知识HTML知识点html 结构<html> <head> </head> <body> </body></html>head 标签能在head部分使用的标签有：<meta><meta http-equiv="Content
复制链接

扫一扫