这是复试任务的第五篇博客了，写到这里，我反思发现这十天以来，我学到了很多知识，也能运用各种知识去编写网页，提升了自己的学习能力。所以，在这里做一个总结。
平铺：background-image:url(../images/ntjh_bg.jpg); 横向平铺background-repeat:repeat-x; 纵向平铺 background-repeat:repeat-y; 拉伸：background-size:cover;可以使图片拉伸铺满背景。 使用margin，padding，border改变盒子的边距以及属性。 引入CSS： 行内样式，使用style引入CSS 内部样式，在head标签用style实现 外部样式，用link或者@important来实现 注释：Ctrl+？ （ /* */ ） 设置最小宽度：min-width;
1.后代选择器：可以选择作为某元素后代的元素。（ ） 2.子元素选择器：子元素选择器只能选择作为某元素子元素的元素。（>） 3.相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。(+/+ +)
不定宽度:transform:translateX(-50%) 元素垂直居中:transform: translateY(-50%) translateX(x) 定义转换，只是用 X 轴的值。 translateY(y)定义转换，只是用 Y 轴的值。 translateZ(z)定义 3D 转换，只是用 Z 轴的值。
单行的行内元素：只需设置单行行内元素的“行高等于盒子的高”。 多行的行内元素：给父元素设置display:table-cell和vertical-align:middle 单行的行内元素居中：line-height（行高) 只适用于文本元素 元素的垂直对齐:vertical-align 居中：margin: 0 auto;（行级元素上可以变成块级元素然后再居中）
hover 当鼠标悬浮在元素上方时，向元素添加样式。 link 向未被访问的链接添加样式。 visited 向已被访问的链接添加样式。 first-child 向元素的第一个子元素添加样式。
CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现。
区分： 伪元素使用2个冒号 ::before，::after，::first-line，::first-letter，::selection、::placeholder等； 伪类使用1个冒号 :hover，:link，:active，:target，:not()，:focus等。
继承：特定的CSS属性向下传递到子孙元素。 无继承的属性：display
文本属性： vertical-align 垂直文本对齐 text-decoration：文本修饰 text-shadow：阴影 white-space：空白符处理
内联元素可以继承的属性： 1.字体系列属性。(font) 2.除text-indent，text-align以外的文本系列属性。
规则： 1.继承发生样式冲突时，最近祖先获胜（就近原则） 2.直接指定的样式获胜（最直接原则） 3.样式权值高着获胜 4.权值相同时后者获胜。 5.！important样式不被覆盖（放在规则声明最后，在封号之前）
1.绝对定位：position:absolute 元素置到页面上的任何位置。将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素。
2.相对定位：position:relative 相对于一个元素的正常位置来对其定位，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
一般绝对元素和相对元素是一起使用来定义元素在页面上的位置，例如在盒子里先试用相对定位，再在盒子内使用绝对定位。如下图，
<div class="A"><input type="text" placeholder="评论"><i class="iconfont icon-zhaoxiangji"></i></div>top的父对象main设置了position的属性，且position属性值为absolute或者relative时，此时top以main为对象来定位。 top不存在一个有position属性的父对象，此时以body为定位对象，按照浏览器的窗口进行定位。
3.固定定位：position:fixed 元素相对于窗口固定位置。它直接以浏览器窗口作为参考进行定位，浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化。
flex为弹性布局，用来为盒状模型提供最大的灵活性且任何一个容器都可以指定为 Flex 布局。如下： 行内元素也可以使用 Flex 布局。display: inline-flex;
flex-direction决定主轴的方向 row（主轴为水平方向，起点在左端） | row-reverse（主轴为水平方向，起点在右端） | column（主轴为垂直方向，起点在上沿） | column-reverse（主轴为垂直方向，起点在下沿） flex-wrap换行 nowrap（不换行） | wrap （第一行在上方） wrap-reverse；（换行，第一行在下方） flex-flow flex-direction， flex-wrap justify-content项目在主轴上的对齐方式 flex-start（左对齐） flex-end（右对齐） |center（居中） | space-between （两端对齐，项目之间的间隔都相等）| space-around;（每个项目两侧的间隔相等） align-items交叉轴上对齐 flex-start（交叉轴的起点对齐） | flex-end（交叉轴的终点对齐） | center （交叉轴的中点对齐）| baseline（项目的第一行文字的基线对齐 stretch（默认值） align-content多根轴线的对齐方式 flex-start | flex-end | center | space-between | space-around | stretch;
order项目的排列顺序。数值越小，排列越靠前，默认为0 flex-grow放大比例，默认为0，即如果存在剩余空间，也不放大 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间 flexflex-grow, flex-shrink 和 flex-basis的简写 align-self属性允许单个项目有与其他项目不一样的对齐方式。
2.关于标签 元素： 块级元素：<p> <div> <h1-h6> <pre>等 能够识别宽高，对其设置的margin,padding都有效，自动换行。 行内元素：<span> <img> <a>等 设置的宽高无效，margin，padding设置仅仅左右有效，不能包括块级元素。
转换： inline:元素变成行级元素 block：元素变为块级元素 inline-block:对象呈现为inline对象，对象的内容作为block对象呈现
样式： 可选中默认值value 不可选中默认值placeholder 去除文本框textarea的属性：resize:none 一般去除a标签的默认样式：text-decoration:none 实线border solid; 虚线border dashed;
如果元素中的内容超出了给定的宽度和高度属性，overflow属性可以确定是否显示滚动条等行为。 line-height属性设置行间的距离。定义了该元素中基线之间的最小距离.
①让中间的盒子使用display: inline-block;使之变成行级元素。 ②在右边的盒子里设置“绝对定位”，让它放在页面的合适位置。
在盒子中使用相对定位，对图片使用绝对定位定在自己想要的位置上。 ①下载照片，使用<img> ②下载图标代码，在CSS里导入。
1.去掉HTML代码标签之间的空格。 2.使用margin负值。 3.不设置闭合标签。（例如让<li>后面没有</li>） 4.使用font-size:0; 可去掉水平方向的空白。（ 子元素若要显示文字可重新定义font-size属性即可） vertical-align属性可去掉元素垂直方向的多余空白。
在<div>中套<div>,
<div> <div></div> <div></div> <div></div> </div>然后设置
