前端重点复习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复习</title>
<style type="text/css">
/* 样式引入: 行间 内联 外联 */
/* 语法: 选择器 {样式块} */
/* 选择器: * div .d #d !important */
/* 优先级: id>class>标签; 权值大小(!important>id>class=:伪类>标签>通配) */
/* 群组: div,p{} */
/* 后代: .p .b{} | .p > .b{} */
/* 兄弟: .p + .b{} | .p ~ .b{} */
/* 交叉: div.p.b{} 类为p和b的div(多类名) */
/* 属性选择器: [属性] | [属性=值] | [属性^$*=值] */
/* 伪类选择器: :伪类名 */
/* :hover :active :nth-child() :nth-of-type() :not() :focus :before :after*/
/* 重要的css */
div {
background: url() no-repeat center center red;
background-size: auto;
font: normal 20px/30px 'STSong', 'Arial';
color: red;
text-align: center;
vertical-align: middle;
/*划线*/
text-decoration: none;
/*字间距*/
letter-spacing: .2em;
/*首行缩进*/
text-indent: 2em;
border: 1px solid black;
/*清指定方位边框*/
border-bottom: none;
border-radius: 50%;
/*默认阴影和盒子等大: x偏移 y偏移 虚化长度 阴影外延宽度*/
box-shadow: 0 0 0 0 red;
/*第一状态到第二状态动画切换*/
transition: .2s;
/*定位的显示层次*/
z-index: 10;
/*形变*/
transform: translate(10px) rotate(45deg) scale(.5);
/*隐藏*/
display: none;
/*可以用来做动画*/
opacity: .5;
/*超出内容显示方式*/
overflow: scroll | auto | hidden;
}
p {
width: 200px;
height: 200px;
background: orange;
/*box-shadow: 1px 0px 0 0 red;*/
/*box-shadow: 210px 0px 20px 0 red;*/
box-shadow: 210px 0px 0px -10px red, 0 210px 0 0 pink;
}
</style>
</head>
<body>
<p></p>
<!-- 分析架构: 结构|布局|文本 -->
<!-- 布局方式: 盒模型|浮动|定位|(流式布局,响应式,flex) -->
<!-- 盒模型: display | margin -->
<!-- block: 支持宽高,支持所有css样式 -->
<!-- inline: 不支持宽高,margin上下不起作用 -->
<!-- table-cell: 默认文本垂直居中 -->
<!-- 浮动: float | 清浮动 -->
<!-- left|right: 决定排列的方向,依赖父级宽度 -->
<!-- 浮动的元素不完全脱离文档流,可以清浮动(让父级获得合适高度) -->
<!-- 浮动的元素宽度适应内容或子级 -->
<!-- 定位: reletive absolute fixed -->
<!-- reletive: 辅助于absolute定位 -->
<!-- absolute: 参考最近的定位父级,完成上下左右布局 -->
<!-- fixed: 相对于窗口进行定位 -->
<!-- 采用任何方式布局之后,依旧可以采用盒模型布局进行调整 -->
<!-- 标签: html body h1~h6 div p span i img a ul>li form -->
</body>
</html>
网友评论