HTML&CSS Favorite

1.基础知识

1.HTML

1.1基本结构标签

1.骨架
<html><head><meta charset="UTF-8"><title></title></head>    <body></body>
</html>2.排版标签
标题标签   <h1> 标题文本 </h1>h1>  h1~h6
段落标签   <p> 段落文本内容 </p>
水平线标签  <hr/>   水平线
换行标签    <br/>  换行
布局标签    <div> 这是一个区域 </div>   division<span> 今日价格 </span>   3.文本格式化标签
文字粗体     <b></b> <strong>粗体字</strong>
文字斜体     <i></i> <em>斜体字</em>
文字加删除线  <s></s> <del>加删除线</del>
文字加下划线  <u></u> <ins>加下划线</ins>4.标签属性
<标签名 属性1=“属性值1” 属性2="属性值2">内容</标签名>5.图像标签
<img  src=" " alt=" " title=" " width=" " height=" " border=" " />src="URL" 图形的路径，必填
alt="文本" 图像不能显示时的替换文本
title="文本" 鼠标悬停时显示的内容
width/height="数字"  设置图像的宽高
border="数字"  边框的厚度6.链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>href="外部链接/内部链接/空连接/超链接"
<a href="http://www.baidu.com"></a>
<a href="index.html"></a>
<a href="#"></a> <a href=""></a>
<a href="http://www.baidu.com"><img src="banner.jpg"/></a>target="self/blank/"  self为默认值，blank为新窗口打开
<base  target="_blank" />   把所有的连接都默认添加target,写在<head>里text-decoration: none;7.注释标签
<!-- 我是注释 -->8.锚点<h3 id="two">第二集</h3>        创建链接锚点<a href="#two">跳转到第二集</a>   跳转接口

1.2进阶组件标签

1.表格 --多用来展示数据
<table></table>
tr - th
tr - td
tr - td<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="1 0"><caption>表格顶部大标题</caption><thead class="表格的头部"><tr class="表格的标题行"><th>标题行01</th><th>标题行02</th><th>标题行03</th></tr></thead><tbody class="表格的主体行"><tr class="表格第一行"><td>第一行单元格01</td><td>第一行单元格02</td><td rowspan="2">第一行单元格03,跨行合并下边一格</td></tr><tr class="表格第二行"> <td>第二行单元格01</td><td>第二行单元格02</td><td>第二行单元格03，被跨行合并应删除</td></tr><tr class="表格第三行"> <td>第三行单元格01</td><td>第三行单元格02</td><td>第三行单元格03</td></tr></tbody><tfoot class="表格的底部行"><tr class="表格底部"> <td>底部单元格01</td><td>底部单元格02</td><td>底部单元格03</td></tr></tfoot>
</table> border 设置表格的边框，默认border="0"无边框
align  设置表格在网页中的水平对齐方式，left center right
cellspacing  设置单元格与单元格边框之间的空白距离
cellpadding 设置单元格内容与单元格边框之间的空白距离rowspan  跨行合并，合并上下 rowspan="合并单元格的个数"
colspan  跨列合并，合并左右 colspan="合并单元格的个数"2.列表 --多用来布局
ul - li    /无序列表
ol - li    /顺序列表
dl - dt    /标题列表- dd<ul class="无序列表"><li>列表项01</li>    * 无序列表列表项01<li>列表项01</li>    * 无序列表列表项01<li>列表项01</li>   * 无序列表列表项01
</ul> <ol class="有序列表"><li>列表项01</li>    1.有序列表列表行项01<li>列表项01</li>   2.有序列表列表行项01<li>列表项01</li>      3.有序列表列表行项01
</ol><dl class="自定义列表"><dt>中国</dt><dd>北京</dd><dd>上海</dd><dd>深圳</dd>
</dl>list-style:none; //取消列表样式3.表单<form action="URl地址" method="提交方式" name="表单名称"></form>action 用于指定接收并处理表单数据的服务器程序的url地址
method 用于设置表单数据的提交方式，其取值为get或post
name 用于指定表单的名称，以区分同一个页面中的多个表单4.input控件
<input type="属性值" value="控件内显示的默认文本" /><form action="URl地址" method="提交方式" name="表单名称"><input type="属性值" value="控件内显示的默认文本" name="控件名称"size="空间在页面内显示的宽度" checked="checked定义默认选中的项" maxlength="允许输入最多的字符数" placeholder="First name"/>
</form>男 <input type="radio" checked="checked" name="sex"/>
女 <input type="radio" name="sex" />type="text/password/radio/checkbox/button/submit/reset/image/file"5.label标签
作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
-用法一，label直接包含表单
<label> 用户名：<input type="text" /> </label>
-用法二，通过for 和 id来控制
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">6.textares文本域控件
<textares cols="每行中的字符数" rows="显示的行数">
文本内容
</textares>7.下拉菜单列表
请选择：
<select><option selected="selected默认选中">选项1</option><option>选项2</option><option>选项3</option><option>选项4</option>
</select>

1.3 HTML用例

//字体布局
<p>JavaScript,CSS, <em class="加效果">HTML</em>,Java,C##,<strong>Android</strong>,
</p><p><del class="删除线">￥5800</del> <strong>￥4900</strong>
</p>

1.4 Emmet快捷键语法

1. div+tab键
2. div*3
3. ul>li
4. div+p
5. .className
6. #idName
7. .className$*3   //生成有顺序的自增的类名

1.5 HTML5新增

1. 新增语义化标签
<header>头部</header>
<nav>导航</nav>
<article>内容标签</article>
<section>块级标签</section>
<aside>侧边栏标签</aside>
<footer>底部</footer>2. 新增多媒体标签
<audio/video controls loop > <source src="" type="video/mp4" >  <source src="" type="audio/ogg" >
</audio>
-src:播放文件的路径
-controls:音频播放器的控制器面板
-autoplay:自动播放
-loop:循环播放
-poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面
-width:视频的宽度3. 新增input表单属性
<input type="text" list="subjects" placeholder="提示文字" autofocus="autofocus" required="required" accesskey="" multiple="multiple" autocomplete="on/off"><datalist id="subjects"><option value="前端与移动开发" label="javascript"/>
</datalist><output>总金额：￥100.00</output>4. 新增type属性
- type=  text/password/email/tel/url/number/range/color/time/date/
datetime-local/month/week-常用 type= 'email/url/date/time/number/tel/search/color'5. 进度条
<progress max="100" value="100"></progress>
<meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>6. 内嵌入边框线的文字
<fieldset><legend>内嵌入边框线的文字</legend>
</fieldset>

2.CSS

2.1 CSS基础

2.1.0 CSS基础

  1. 建议书写顺序：定位/盒子/文本

  2. 文本：(颜色，水平位置，垂直位置，首行缩进，下划线)

  3. 字体：(大小，字体，粗细，倾斜)

  4. 背景：(背景颜色，背景图片，背景透明，背景平铺，背景位置，背景滚动)

  5. 盒子模型：(宽高，边框线，外边距，内边距)

  6. 定位与浮动

  7. 显示与隐藏

    1.文本：(颜色，水平位置，垂直位置，首行缩进，下划线)
    color: black //前景色（文字颜色）
    text-align:center;/left;right;center;justify; //设置文本内容水平对齐方式

    height: 50px; //搭配使用,行高等于高度，垂直居中
    line-height: 50px/24px;//行高，设置文本的最小行高,元素中每一行文字所占据的高度,两行文字基线（baseline）之间的间距

    vertical-align: middle;//设置元素的垂直对齐方式,只针对行内元素或行内块元素(img)
    baseline;bottom;text-bottom;top;

    text-indent: 2em; //首行缩进，设置第一行内容的缩进，1em就是一个汉字的宽度
    text-decoration:none;underline;overline;line-through //设置文字的装饰线

    text-shadow: //给文字添加阴影效果

    direction:
    letter-spacing
    word-spacing:
    text-transform:
    white-space:

    2.字体：(大小，字体，粗细，倾斜)
    font: font-style font-variant font-weight font-size/line-height font-family

    font-size: 16px;2em(200%) //文字大小，16px为默认
    font-family: “宋体”;/Arial,“Microsoft YaHei”,“黑体”; // 设置字体，多个字体
    font-weight:normal(400);bold(700) //用于设置文字的粗细（重量）
    font-style: normal;italic;oblique //设置文字的常规、斜体显示
    font-variant: normal;small-caps; //影响小写字母的显示形式.small-caps将小写字母替换为缩小过的大写字母

    3.背景：(背景颜色，背景图片，背景透明，背景平铺，背景位置，背景滚动)
    background: url(“images/beer.png”) center center/150px 250px no-repeat #f00
    image position/size repeat attachment color
    background: rgba(0,0,0,0.3) //背景半透明，最后一个参数Alpha透明度，取值0~1之间
    background-color: #000000;transparent;//透明色
    background-image: url(“bg001.png”);
    background-repeat: repeat;no-repeat;repeat-x;repeat-y; //设置背景图片是否要平铺
    background-size: auto;cover;contain;150px 180px; //设置背景图片的大小
    background-attachment: scroll;fixed; //背景图片跟随元素关系，滚动/固定
    background-position: 60px 80px; //设置背景图片在水平、垂直方向上的具体位置
    : left;center;right;
    : top;center;bottom;
    : center top; //常用定位

    background: linear-gradient(起始方向，颜色1，颜色2, …);
    background: linear-gradient(left,red,blue); //背景颜色线性渐变
    background: -webkit-linear-gradient(left,red,blue);

    cursor:auto;default;pointer;text;none; //设置鼠标指针（光标）在元素上面时的显示样式
    opacity: 0.2; /盒子半透明/

    4.盒子模型：(宽高，边框线，外边距，内边距)
    width: min-width;max-width;
    height: min-height;max-height;

    border: 1px solid #f00;1px solid transparent; //透明边框
    border-width：1px;
    border-style：none;dotted;dashed;soild;double;groove;ridge;inset;outset;
    border-color: #fff;

    border-radius: 50%; // 缩写属性,50%一个圆
    border-radius: 15px 0 0 15px; //左上角 右上角 右下角 左下角
    border-top-left-radius: 20px; //上左
    border-top-right-radius: 20px; //上右
    border-bottom-right-radius: 20px; //底右
    border-bottom-left-radius: 20px; //底左

    border-collapse:collapse; //相邻边框合并在一起

    margin: //外边距, margin一般是用来设置兄弟元素之间的间距，左右外边距
    padding: //内边距, padding一般是用来设置父子元素之间的间距

    margin: 0 auto; //块级盒子水平居中，盒子须有宽度
    text-align: center; //文字，行内元素，行内块水平居中

    box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset //可以设置一个或者多个阴影
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);

    box-sizing: //用来设置盒子模型中宽高的行为
    content-box; //padding、border都布置在width、height外边，以往标准盒模型
    border-box; //padding、border都布置在width、height里边.不撑开盒子,内减

    outline: none; //表示元素的外轮廓,不占用空间,默认显示在border的外面
    outline-width:
    outline-style:
    outline-color:

    5.定位与浮动：
    –浮动-- (脱标，无位，类行内块)

    1. 可以让块盒子水平排列成一行，脱离标准流，不占位置，且相当于inline-block
    2. 需要给浮动的元素添加一个标准流的父亲，父给高度，子浮动
    3. 父无法确定高度。父清除浮动，子浮动给高度，父盒子自动检测高度
    4. 一个行内元素的盒子()，如果加了浮动，固定定位和绝对定位，不用转换，就可以给盒子直接设置宽度和高度
    5. 浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并问题。

    float: none;left;right; //浮动,文字四周环绕图片，不能与行内级内容层叠,浮动元素之间不能层叠

    clear: //一般就只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠，清除浮动
    left //要求元素的顶部低于之前生成的所有左浮动元素的底部
    right //要求元素的顶部低于之前生成的所有右浮动元素的底部
    both //要求元素的顶部低于之前生成的所有浮动元素的底部
    none //默认值，无特殊要求

    –定位–

    1. 可以让盒子定在某个位置，自由漂浮在其他盒子上面.
    2. 定位 = 定位模式 + 边偏移量
    3. 子绝absolute, 父相relative
      position: static;
      relative; //相对定位,不脱离标准流,保留位置，定位参照对象是元素自己原来的位置
      absolute; //绝对定位,脱离标准流、不保留位置、且相当于inline-block
      fixed; //固定定位,脱离标准流、不保留位置，依可视窗口定位，且相当于inline-block
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;

    z-index: 10; //用来设置定位元素的层叠顺序

2.1.0 CSS基础

  1. 列表
  2. 表格
  3. 显示与隐藏
  4. 选择器
6.列表：
list-style: none; outside url("images/dot.png");  //缩写属性
list-style-type: none;disc;circle;square;decimal;lower-roman;upper-roman;lower-alpha;upper-alpha;  //设置li元素前面标记的样式
list-style-image:  //设置某张图片为li元素前面的标记，会覆盖list-style-type的设置
list-style-position: outside;inside;  //设置li元素前面标记的位置7.表格：
border-collapse:collapse;
border-spacing:10px 20px;0; //设置单元格之间的水平、垂直间距8.显示与隐藏：
display: block;  //让元素显示为块级元素inline;  //让元素显示为行内级元素,不会占着任何位置none;    //隐藏元素，不占位子inline-block;   //让元素同时具备行内级、块级元素的特征// 让a、span能够随时设置宽高,让div、p能够跟其他元素在同一行显示visibility:visible;hidden;  //能控制元素的可见性,还会占着原来的位置overflow:visible;hidden;scroll;auto; //控制内容溢出时的行为,设置overflow为auto触发BFCresize: none; //禁止缩放
resize: horizontal;  //水平缩放
resize: vertical;  //垂直缩放
resize: both;  //水平垂直缩放opacity
ilter9.选择器a:link  //未访问的链接
a:visited  //已访问的链接
a:hover  //鼠标移动到链接上
a:active  //选定的链接 a:link {color: #333;text-decoration: none;
}.nav a:hover {color: red; //鼠标放到nav里边的链接才会变色
}

2.1.1 知识基础

//块级元素
<div> <ul> <ol> <li>  <h1> ~ <h6>//行级元素
<span> <a> <strong> <em> <del> <i> <s> <u>//行内块元素
<img/> <input/> <td> //适用
normal flow（标准流）: 垂直布局
float（浮动）：水平布局
absolute positioning（绝对定位) : 层叠布局//CSS 建议书写顺序  (定位/盒子/文本)
1. 布局定位属性： display/position/float/clear/visibility
2. 自身属性： width/height/margin/padding/border/background
3. 文本属性： color/font/text-decoration/text-align/line-height/vertical-align/white-space/break-word
4. 其他属性： content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient// Class名字
-hd / -bd
nav /header /banner /center /bottom /copyright /links /footer
logo /search /fixedbar// 使盒子居中对齐-标准流居中
{margin: 0 auto;
}
-绝对定位居中
{left: 50%;  //让盒子的左侧移动到父级元素的水平中心位置margin-left: -100px;  //让盒子向左移动自身宽度的一半
}
-绝对定位居中
{transform: translateX(-50%)  //移动平移,(x,y)水平方向和垂直方向同时移动left: 50%;
}

2.1.2 CSS用例

//盒子浮动使用
.one {float: left;width: 200px;height: 200px;background-color: red;
}//清除默认内外边距
* {margin:0;padding:0;
}// 导航栏布局
<div class="nav"><ul>  //块元素包裹行内元素<li><a href="#">首页 <span>加箭头图标</span> </a></li><li><a href="#">导航1 <span>加箭头图标</span> </a></li><li><a href="#">导航2 <span>加箭头图标</span> </a></li><li><a href="#">导航3 <span>加箭头图标</span> </a></li><li><a href="#">导航4 <span>加箭头图标</span> </a></li></ul>
</div>.nav { //父给宽高，子浮动width: 760px;height: 32px;margin: 0 auto;
}.nav ul li {float: left
}.nav ul li a{display: block;  width: 80px;  //给a宽高扩充点击范围height: 32px;line-height: 32px;text-align: center;font-size： 12px;  background: url(images/button1.jpg) no-repeat;
}
.nav ul li a：hover{background: url(images/button2.jpg) no-repeat;
}//文字省略处理
{white-space: nowrap;  //强制一行内显示文本overflow: hidden;   //超出的部分隐藏text-overflow: ellipsis;  //文字用省略号替代超出的部分
}//版心 (但子盒子可以比父盒子宽)
.w{width:1200px;margin: 0 auto;
} //去除图片底部的空白空隙
{vertical-align: middel;/top;/bottom;
}
// 盒子外边框重叠,压住盒子相邻边框
{float: leftmargin-left: -1px;margin-top: -1px;
}//CSS伪元素和边框造小三角图标
.more::after{content: "";position: absolute;top: 9px;right: 9px;width: 7px;height: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);
}

2.2 清除浮动

//after双伪元素法清除浮动,给父元素增加::after伪元素的方式清除浮动.clearfix::after{content: "";display: block;  /*能设宽高，看不见，高为零*/visibility: hidden; /* 兼容旧浏览 */height: 0;  /* 兼容旧浏览器 */clear: both;
}
.clearfix {*zoom: 1; /* 兼容IE6~7浏览 */
}//父元素添加overflow清除浮动
overflow: hidden

2.3. flex布局

  1. 使用Flex布局的优势

    • 可在不同方向排列元素
    • 控制元素排序的方向
    • 控制元素的对齐方式
    • 控制元素之间的等距
    • 控制单个元素放大与缩放比例、占比、对齐方式
  2. Flex布局常用术语
    • flex container : flex 容器
    • flex item : flex项目 (元素)
    • flex direction：布局方向
    • 主轴 — item排列的主方向
    • 交叉轴

2.3.1 Flex容器的属性

//使用  display: flex
//定方向  flex-direction
//主轴  justify-content
//交叉轴  align-items
//换行  flex-wrap
//方向XY行// flex-flow
// align-content//开启flex布局
display: flex,    块级元素，flex container以block-level的形式存在
display: inline-flex   行内元素，flex contaier以inline-level形式存在//设置容器内部元素的主轴排列方向
flex-direction: row   //水平排序，从左向右，主轴为横向row-reverse  //从右向左column  //垂直排序，从上到下，主轴为竖向column-reverse   //从下到上//设置使容器内的元素换行
flex-wrap: nowrap  // 元素不换行，元素会缩放wrap  // 换行，宽度不够自动换行至第二行wrap-reverse  // 逆向换行
补充：
white-space: nowrap;  /*规定段落中的文本不进行换行*/
text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本*/
overflow: hidden;//设置元素在主轴上的对齐方式，元素在主轴方向上如何排列以处理空白部分
justify-content: flex-start   //左对齐，空白在右flex-end  //右对齐，空白在左center    //居中，空白在两边space-between  //两端对齐，元素之间保留空白区间，空白间隔等比划分space-around //两边对齐，两端边上也保留空白，两边空白小于中间space-evenly  //两边对齐，中间和两边空白均分
//设置元素在交叉轴上的对齐方式
align-items: stretch  //当元素高度没有设置，则元素的高度会拉伸至容器高度一致flex-start //在交叉轴上向起点位置(向上/向左)对齐flex-end  //在交叉轴上向结束  位置(向下/向右)对齐center //在交叉轴上居中对齐baseline  // 基准线，保证元素中的文字在同一条基准// 是flex-direction方向 || flex-wrap换行 的简写
flex-flow: row npwrap,// 多行flex items在交叉轴上的对齐方式，用法与justify-content类似
align-content：

2.3.2 Flex 元素的属性

   // flex // flex-grow  放大元素，控制均分比例// flex-basis // flex-shrink   缩放元素，// order 控制元素顺序// align-self 重写self-align属性//flex 是flex-grow || flex-shrink || flex-basis 的简写，
//flex属性可以指定1个，2个或3个值flex: 1；  //占父元素的一份flex: 20%; //占父元素20%//控制元素顺序，设置flex容器内部的每个元素的
//排列顺序，默认是0,值越小排序越靠前order: 0/1/2/3// 用于设置元素的放大比例，默认为0，为0则不放大flex-grow：1// 所有元素都设置为1，则元素平分剩余空间，等分flex-grow：1 //用于定义属性的缩放比例,默认为1，为0则不缩放flex-shrink: 1//设置元素固定或自动空间的占比，优先级高于widthflex-basis: 300px补充： 决定flex items 最终 base size的因素，从优先级高到低max-width/max-height/min-width/min-heightflex-basis width/heightitem本身size//重写父元素align-items的属性self-align: autostretchflex-startflex-end center baseline

2.4 CSS3新增

  • 新的选择器

  • 转换 transform

  • 动画 animation

  • 浏览器私有前缀

    1. 结构伪类选择器
      li:first-child
      li:last-child
      li:nth-child(3)
      li:nth-child(even)
      li:nth-child(odd)
      li:nth-child(2n)
      li:nth-child(2n+1)

    2. 属性选择器，权重为10
      div[class] { }
      div[class=demo] { }
      div[class^=test] { } // ^ 以test开头的类名
      div[class$=test] { } // $ 以test结尾的类名
      input[type=“text”]{ }
      button[disabled]

    3. 伪元素选择器,权重为1,必须有content属性
      p::first-letter { }
      p::first-line { }
      p::selection { }
      span::before { }
      span::after { }
      div::before{ } /是一个能插入元素的选择器/
      div::after { }

    4. 过渡
      transition: all 0.5s; /过渡写到本身上 谁做过渡动画，写到谁身上
      / :hover 指定过度后样式
      transition: width 0.5s ease 0s, height 0.3s; /多组属性用逗号分隔

    5. 变形-2D转换
      -位移
      transform:translate(100px,100px) /位移

    • transform: translate(x,y);
    • transform: translateX(n);
    • transform: translateY(n);
    • transform: translate(-50%, -50%); /让盒子水平居中和垂直居中，不会影响其他元素位置
      transform: translateY(-20px);

    -缩放/扩大
    transform: scale(0.8, 0.5); /缩放，宽度变为了原来的 80% 高度变为了原来的 50%
    transform: scale(2, 4); /不会影响其他的盒子，中心点默认是中心

    -旋转
    transform: rotate(360deg); /旋转
    - transform-origin: right bottom; /设置旋转/缩放中心点，写在旋转本体上/
    - transform-origin: 50px 50px;
    - transform-origin: 50% 50%;
    transform: rotateX(360deg); / 旋转
    transform: rotateY(360deg);
    - backface-visibility: hidden; / 定义当图片不面向屏幕时是否可见

    -综合
    transform: translate(100px, 100px) rotate(45deg) scale(0.3); /先位移后旋转缩放

    -变形-倾斜
    transform: skew(30deg); /变形-倾斜

    -阴影
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); / 鼠标经过显示阴影

    6.动画
    animation:名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
    animation: move 2s ease 0s infinite alternate forwards;
    animation: move 5s linear 2s infinite alternate forwards;

    @keyframs 规定动画
    animation 所有动画属性的简写属性，除了 animation-play-state 属性
    animation-name 规定@keyframes 动画的名称
    animation-duration 规定动画完成一个周期所花费的秒或毫秒
    animation-timing-function 规定动画的速度曲线，默认是‘ease’，
    linear匀速,ease-in低速开始 ease-out低速结束
    ease-in-out低速开始和结束 step()指定时间函数中的间隔数量(步长)，类进度条迟钝效果
    animation-delay 规定动画何时开始，默认是0
    animation-iteration-count 规定动画播放的次数，默认是1，还有 infinie无限重复
    animation-direction 规定动画是否在下一个周期逆向播放，默认是‘normal’，alternate逆播放动画
    animation-play-state 规定动画是否正在运行或暂停，默认是 running，还有pause
    animation-fill-mode 规定动画结束后的状态，保持forwards 回到起始 backwards

    1. 3D转换
      -X轴：水平向右，x右边是正值，左边是负值
      -y轴：垂直向下，y下边是正值，上边是负值
      -z轴：垂直屏幕，往外边是正值，往里边是负值，正值变大，负值变小

    -3D位移
    translate3d(x,y,x)

    transform: translateX(100px);
    transform: translateY(100px);
    transform: translateZ(100px);
    transform: translate3d(x,y,z);

    -3D旋转
    rotate3d(x,y,z)
    transform: rotateX(45deg); //沿着X轴正方向旋转45度
    transform: rotateY(45deg); //沿着Y轴正方向旋转45度
    transform: rotateZ(45deg); //沿着Z轴正方向旋转45度
    transform: rotate3d(x,y,z,deg); //沿着自定义轴正方向旋转n度
    transform: rotate3d(1,0,0,45deg) // xyz表示旋转的矢量，标示希望沿着该轴旋转，最后标识角度

    -透视
    -透视也称视距，就是人的眼睛到屏幕的距离，越近成像越大，越远成像越小
    -透视的单位是px
    perspective

    body:{
    perspective: 500px; //透视属性写在被观察元素的父盒子上面
    }

    -3D呈现
    transfrom-style
    -控制子元素是否开启三维立体环境, 该属性写给父级
    transform-style: flat; 子元素不开启3d立体空间，默认
    transform-style: preserve-3d; 子元素开启立体空间

2.4.1 CSS3实例

//案例，小三角
div{width: 249px;height: 35px;border: 1px solid #000;
}
div::after{content:'';position: absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom: 1px solid #000;transform: rotate(45deg);transition: all 0.6s;   //动画的过渡
}
//鼠标经过div，里面的三角旋转
div:hover::after{transform: rotate(225deg);
}//hover旋转体动画案例
div{overflow: hidden;width: 200px;height: 200px;border: 1px solid #black;
}
div::before{content: '旋转体';display: block;width: 100%;height: 100%;background-color: #000;transform: rotate(180deg);transform-origin: left bottom;transition: all 0.4s;
}
div:hover::before{transform: rotate(0deg);
}//hover放大案例
div{float: left;margin: 10px;overflow:hidden;
}div img {transition: all 0.4s;
}div img:hover{transform: scale(1.2);
}//并排按钮hover放大
li {float: left;width: 30px;height: 30px;line-height: 30px;border: 1px solid #fff;margin: 10px;text-align: center;list-style: none;border-radious: 50%;cursor: pointer;transition: all .4s;
}li:hover{transform: scale(1.2)
}//动画基本使用
//一个盒子从左边走到右边
1. 定义动画
@keyframes move{/* 开始状态 */0%{transform: translateX(0px);}/* 结束状态 */100%{transform: translateX(1000px);}
}div{width: 200px;height: 200px;background-color: black;/* 2.使用动画 */animation-name: move;animation-duration: 2s; //持续时间
}//动画序列
@keyframs sround{0% {transform: translate(0,0);}25% {transform: translate(1000px,0);}50% {transform: translate(1000px,500px);}75% {transform: translate(0,500px);}100% {transform: translate(0,0);}
}div{width: 200px;height: 200px;background-color: black;animation-name: sround;animation-duration: 10s; //持续时间animation: move 5s linear 2s infinite alternate; //属性简写
}
div:hover {/* 鼠标经过div 让div停止动画，鼠标离开就继续动画*/animation-play-state: paused;
}//热点图
//背景地图为一张中国地图
<body><div class='map'><div class='city'><div class="dotted"></div>  /*中间小点*/<div class="pulse1"></div>  /*小圆圈*/<div class="pulse2"></div>  <div class="pulse3"></div>  </div></div>
</body>body{background-color: #333;
}
.map {position: relative;width: 747px;height: 616px;background: url(media/map.png) no-repeat;marin: 0 auto;
}
.city{position: absolute;top: 227px;  //定位到北京right: 196px;color: #fff;
}
.dotted{ height: 8px;width: 8px;background-color: #09f;border-radius: 50%;
}.city div[class^='pause']{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 8px;height: 8px;box-shadow: 0 0  12px #009dfd;border-radius: 50%;animation: pause 1.2s linear infinite;
}.pause2{animation-delay: 0.4s !important;
}
.pause3{animation-delay: 0.8s !important;
}@keyframs pause {0%{}70%{/*transform: scale(5) 不用scale，会让阴影变大 */width: 40px;hight: 40px;opacity: 1;}100%{width: 70px;height: 70px;opacity: 0;}
}//奔跑的动画效果 step()
//背景图片是8个奔跑动作串<div></div>div{position: absolute;width: 200px;height: 200px;background: url(media/bear.bng) no-repeat;animation：bear 1s step(8) infinite,move 3s forwards;//添加两个动画，用逗号隔开。第二个动画控制跑到位置后的定位
}@keyframs bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;        }
}
@keyframs move {0% {left: 0;}100% {left: 50%;     transform: translate(-50%);}
}//hover两面翻转的盒子
<div class='box'><div class='front'>后面</div><div class='back'>前面</div>
</div>.box{width: 300px;height: 300px;margin: 100px auto;transition: all .4s;transform-style: preserve-3d;
}
.box:hover{transform: rotateY(180deg);
}
.front .back{position: absolute;top:0;left; 0;width: 100%;height: 100%;border-radius: 50%;font-size: 30px;text-align: center;line-height: 300px;
}.front {background-color: black;z-index: 1;
}
.back {background-color: #fff;transform: ratateY(180deg);
}//hover 翻转导航栏
<ul><li><div class='box'><div class='front'>A面</div><div class='bottom'>B面</div></div></li><li><div class='box'><div class='front'>A面</div><div class='bottom'>B面</div></div></li><li><div class='box'><div class='front'>A面</div><div class='bottom'>B面</div></div></li>
</ul>* {margin: 0;padding: 0;
}
ul {margin: 100px;
}ul li {width: 120px;height: 35px;list-style: none;perspective: 500px;  //需要给box旋转}
.box{position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all .3s;
}
.box:hover{transform: rotateX(90deg);
}.front,.bottom {position: absolute;left: 0;top: 0;
}.front{backround-color: black;z-index: 1;transform: translateZ(17.5px);
}
.bottom{backround-color: #fff;//反向旋转,向下移动transform: translate(17.5px) ratateX(-90deg)   }//旋转木马<section><div><div>    <div><div><div><div><div><div>  <div><div><div><div>
<section>body{perspective: 1000px;
}section {position: relative;width: 300px;height: 200px;margin: 50px auto;transform-style: preserve-3d;animation: rotate 10s linear infinite;background: url(media/pig) no-repeat;
}section:hover{/*鼠标放入section 停止动画*/animation-play-state: paused;
} @keyframes rotate {0% {transform: rotateY(0);}100%{transform: rotateY(360deg);}
}section div{position: absolute;top:0;left:0;width: 100%;height: 100%;background: url(media/dog.jpg) no-repeat;
}section div:nth-child(1) {transform: translateZ(300px);
}section div:nth-child(2) {//先旋转，后移动transform: rotateY(60deg) translateZ(300px);
}section div:nth-child(3) {//先旋转，后移动transform: rotateY(120deg) translateZ(300px);
}section div:nth-child(4) {//先旋转，后移动transform: rotateY(180deg) translateZ(300px);
}section div:nth-child(5) {//先旋转，后移动transform: rotateY(240deg) translateZ(300px);
}section div:nth-child(6) {//先旋转，后移动transform: rotateY(300deg) translateZ(300px);
}

2.5 私有浏览器前缀

-浏览器私有前缀是为了兼容老版本的写法，新版本浏览器无需添加-moz-   代表 firefox 浏览器私有属性
-ms-    代表 ie 浏览器的私有前缀
-webkit- 代表 safari chrome 私有属性
-o-  代表Opera 私有属性//提倡的写法
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;

3.常用CSS

3.1移动端常用

//一级容器
.container {//在container中定/方向/给宽高 width > padding > margindisplay: flex-direction: justify-content: align-items:height: 100rpx; 100%/50px;120rpx  ipone6: 375*667width: 690rpx; 48%/345px; 750rpxmargin: padding:    margin-right:margin-top:border: border-top: 1px solid black;border-radius:50px; 50%;box-shadow: 2px 2px 3px #e3e3e3;box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); background-color: }//二级容器
.container {position: relative; //(脱标)absolute;fixedtop:bottom: right: left:    height: 80%;width: 48%;
}//组件
.plus{}//文字
.text{font-size: 38rpx;line-height: 38rpx;font-weight: 600;text-indent: 2em;}//图片
.image {width: 32rpx;160rpx;height: 28rpx;160rpx;
}

4.在页面使用字体图标

1. 下载图标，将挑选的代码添加至项目，下载至本地
2. 将解压文件夹中iconfont.css文件复制到项目css文件夹中（待定）
3. 这4个图标文件.eot/.svg/.ttf/.woff复制到项目fonts文件夹中
4. 在css中声明并定义
@font-face {font-family: 'iconfont';src: url("../fonts/iconfont.eot");src: url("../fonts/iconfont.eot?#iefix") format('embedded-opentype'),            url("../fonts/iconfont.woff") format('woff'), url("../fonts/iconfont.ttf") format('truetype'), url("../fonts/iconfont.svg#iconfont") format('svg');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;
}5. 使用时引入，打开demo_index.html网页文件，复制代码使用
<i class="iconfont icon">&#xe65f</i>

  1. 移动端开发

    1. 视口 viewport (理想视口)

    width=device-width -宽度设置的是viewport宽度，可以设置device-width特殊值
    initial-scale=1.0 -初始缩放比，大于零的数字
    maximum-scale=1.0 -最大缩放比，大于零的数字
    minimum-scale=1.0 -最小缩放比，大于零的数字
    user-scalable=no -用户是否可以缩放，yes或no(1或0)

    1. 二倍图
      -插入图片
      准备的图为100*100 使用时设置为 image{width:50px;height:50px;}

    -背景图片
    background-size: 50px,50px;

    1. 内减盒子模型
      box-sizing: border-box;

    2. 特殊样式
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -webkit-tap-highlight-color: transparent; /清除点击高亮，设置为transparent透明/
      -webkit-appearance: none; /在IOS上加上该属性才能给按钮和输入框自定义样式/
      img,a{ -webkit-touch-callout: none;} /禁用长按页面时的弹出菜单/

    3. 技术选型
      -1. 单独制作移动端页面(主流)
      -流式布局
      -flex弹性布局
      -less+rem+媒体查询布局
      -flexible.js + rem 混合布局 (较方便)

    -2. 响应式页面兼容移动端
    -媒体查询 + bootstarp

    总结
    flex弹性布局 (推荐)
    rem适配布局 (推荐) flexible.js + rem

5.6 流式布局(百分比布局)

* 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。
* max-width 最大宽度 (max-height 最大高度)
* min-width 最小宽度 (min-height 最小高度)-常用初始化样式
body {width:100%;  /*页面布局中行内子的宽度都为百分比，高度为确定值*/min-width: 320px;max-width: 640px;  margin: 0 auto;background: #fff;font-size: 14px;font-family: -apple-system, Helvetica, sans-serid;line-height: 1.5;color: #666;  /*灰色*/
}

5.8 rem适配布局

1. rem适配基础
* rem（root em）是一个相对单位，基准是相对与html元素的字体大小
* rem可以通过修改html里面的文字大小来改变页面中元素的大小，进行整体控制2. 媒体查询
* 语法规范
@media mediatype and|not|only (media feature){CSS-Code;
}
* mediatype 媒体类型  all print scree
* media feature 媒体特性  width min-width max-width*媒体查询根据不同的屏幕尺寸改变不同的样式
<style>
@media screen and (max-width: 539px) {   /*小于540px*/body{background-color: black;}
}
@media screen and (max-width: 540px) and (max-width: 969px) {body{                          /*大于540px 小于970px*/background-color: pruple;}
}
@media screen and (min-width: 970px)  {   /*大于970px */body{                         background-color: red;}
}</style>3. 媒体查询+rem实现元素变化<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">4. rem适配方案
* 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
* 使用媒体查询根据不同的设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小发生变化元素尺寸也发生变化，从而达到等比例缩放的适配。
* 按照设计稿与设备的宽度比例，动态计算并设置html根标签的font-size大小；
* CSS 中，设计稿元素的宽，高相对位置的取值，按照同等比例换算为rem为单位的值；5. 实际适配方案
* 方案一
less + mediatype + rem
* 设计稿宽度基本以750px
* 页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
* 或者：页面元素的rem值 = 页面元素在750像素下的px值 / html font-size字体大小-常用初始化样式
<style>
.common.less/index.less@baseFont: 50;
body min-width: 320px;//width: 750px;  //width: 15rem;  //设计稿宽度为750px，750/50=15;width: 750rem / @baseFont;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, sans-serif;background: #f2f2f2;
}
.search-content {width: 15rem;height:88rem / @baseFont;   //设计稿高度为88px
}
</style>* 方案二 （较方便）
flexible.js + rem -安装
npm i -S amfe-flexible
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>-常用初始化样式
<style>
@media screen and (min-width: 750px){html {font-size: 75px!important;   //在大屏幕上，不让页面超过750px；}
}//@baseFont: 750/10=75;  flexible 划分为10等份
body {min-width: 320px;max-width: 750px;width: 10rem； //750rem / @baseFont; margin: 0 auto;//line-height: 1rem;font-family: Arial, Helvetica, sans-serif;background: #f2f2f2;
} </style>-插件vscode里边cssrem插件自动转换
并修改设置为75 Cssrem: Root Font Size

5.8 Less

1. Less介绍
Less 是一门CSS预处理语言，它扩展了CSS的动态特性。2. 安装
npm install -g less
lessc -v 3.使用
<style>
@color: dark;
@font14: 14px;
body {      background-color: @color;
}
div {color: @color;font-size: @font14;
}
a {font-size: @font14;
}
</style>4.嵌套
<body><div class="header"><a href="#">Text</a></div><div class="nav"><div class="logo" >Text and image</div>    </div></body>
<style>
.header{width: 200px;height: 200px;background-color: dark;a {color: red;}
}.nav {.logo {color: green;  /*子元素的样式直接写到父元素里边*/}&::before {  /*伪类，交集选择器，伪元素选择器要在内层选择器的前面加 &*/content: "";}
}</style>5. 运算
@border: 5px + 5;
div {width: 200px - 50; /*运算符左右需要有空格 */height: 200px * 2;border: @border solid red;
}
img {width: 82 / 50rem;height: 82 / 50rem;
}

5.9 响应式布局

1. 响应式开发设备划分
超小屏幕(手机)        <768px                设置宽度为100%
小屏设备(平板)        >=768px ~ 992px        设置宽度为750px
中等屏幕(桌面显示器)   >= 992px ~ 1200px  设置宽度为970px
宽屏设备(大桌面显示器) >= 1200px              设置宽度为1170px  2. 原理
* 在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
<style>
//超小屏幕下，小于768 布局容器宽度为100%
@media screen and (max-width: 767){.container {width: 100%}
}
//小屏幕下，大于等于768 布局容器改为750px
@media screen and (min-width: 768px) {.container {width: 750px;}
}
//中等屏幕下，大于等于992px 布局容器改为 970px
@media screen and (min-width: 992px){,container{width: 970px;}
}
//大屏幕，大于等于1200 布局容器改为 1170px
@media screen and (min-width: 1200px){.container {width: 1170px;}
}</style>3. 使用bootstrap开发
* 创建文件夹结构
* 创建html骨架结构
* 引入样式类文件
* 书写内容4. 使用策略
* 先布局md以上的pc端布局，然后再根据实际需求修改小屏幕和超小屏幕的特殊布局样式//媒体查询用例
/*当进入小屏幕和超小屏幕时，让nav里边的里浮动起来，且宽度为20% */@media screen and (max-width: 991px){.nav li {float: left;width: 20%;}
}
/* 当进入超小屏幕时，nav里边的文字会变成14px */@media screen and (max-width: 767px){.nav li a {font-size: 14px;}
}

5.10 Bootstrap

1.基础CSS样式 (class = "")- 预置排版样式- 统一预制标签样式- lead - text-left text-center text-right text-justify text-nowrap- text-lowercase text-uppercase text-capitalize- attribute- container-fluid  自适应屏幕宽度，即满屏显示100% 宽度的布局，占据全部视口- container  响应式布局容器，固定宽度- 按钮样式- btn btn-default btn-primary btn-success btn-info btn-warning btn-danger    btn-link- btn-lg btn-default btn-sm btn-xs - btn-block - 表格样式- table table-striped table-bordered table-hover table-condensed - active success warning danger info- table-responsive - 表单样式- form-group form-inline - form-horizontal - form-control form-control-static - has-success has-warning has-error - has-feedback- form-group-lg form-group-sm - 图片样式- img-responsive  - img-rounded img-circle img-thumbnail - 辅助工具类- text-muted text-primary text-success text-info text-warning text-danger - bg-primary bg-success bg-info bg-warning bg-danger  - type="button" class="close" aria-label="Close"  关闭按钮- caret   <!-- 三角符号 -->- pull-left pull-right    快速浮动- center-block     让内容块居中- clearfix    清除浮动- show hidden sr-only- text-hide   图片替换- 栅格系统- xs : 超小屏幕 手机 (<768px)  - sm : 小屏幕 平板 (≥768px) - md : 中等屏幕 桌面显示器 (≥992px) - lg : 大屏幕 大桌面显示器 (≥1200px)- col-xs-4- col-xs-12 col-sm-6 col-md-8- col-lg-3 col-md-4 col-sm-6 col-xs-12- col-md-offset-2 列偏移- col-md-push-* col-md-pull-*  列排序，推拉 - 如果份数小于12，则占不满整个container- 如果份数大于12，则多余的会另起一行
<script>// lg 3/12 4个  md 4/12 3个  sm 6/12 2个  xs 12/12 1个<div class="container"><div class="row"><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div></div>//列嵌套，最好加一个行row， 可以取消父元素的padding值，高度自自动同父<div class="col-md-4"><div class="row"><div class="col-md-6">a</div><div class="col-md-6">b</div></div></div></div>
</script>- 响应式工具类- hidden-xx : 在某种屏幕下隐藏 - visible-xx : 在某种屏幕尺寸下显示- hidden-xs /hidden-sm /hidden-md /hidden-lg2.预置界面组件- 导航- nav nav-tabs nav-pills - nav-justified nav-stacked- tab-content - tab-pane - 导航条- navbar navbar-default - navbar-header   navbar-toggle collapsed- navbar-brand - navbar-nav navbar-form - navber-left navber-right - navber-fixed-top navber-fixed-bottom nav-bar-static-top - navbar-inverse - navbar-btn navber-text navbar-link- - 面包屑导航
- 下拉菜单- dropdown drop-menu dropdown-menu-right - dropdown-header sparator -- 按钮式下拉菜单- btn btn-default dropdown-toggle- 按钮组- btn-group btn-group-lg btn-group-sm btn-group-xs - btn-toolbar - btn-group-vertical  btn-group-justified- btn-lg btn-sm- 输入框组- input-group - input-group-addon - 警告框
- 页头
- 分页
- 列表组
- 面板- panel panel-default  - panel-body panel-heading panel-title panel-footer-- 媒体对象- media media-left media-middle media-heading media-object media-body - 进度条
- Glyphicons
- 标签- label - 徽章- badge - 缩略图
- 大屏幕
- 嵌入内容
- 内嵌3.JavaScript插件- data-toggle  modal,popover,tooltips,collapse，dropdown  //指以什么事件触发
- data-target #id  //触发的事件的目标
- aria-controls
- role
- data-title - 内置组件- 模态对话框- modal fade - modal-dialog- modal-content- modal-header modal-body modal-footer- data-target=".bs-example-modal-lg- data-target=".bs-example-modal-sm- 下拉菜单
- 滚动监听
- 标签页
- 工具提示- tooltip- 弹出框
- 警告框
- 按钮
- 折叠面板
- 轮播图- carousel slide- 吸顶效果- data-spy="affix"- data-offset-top="什么位置出现 60"- data-offset-bottom="什么位置消失 200 "4. 自定义 Bootstrap- 自定义navbar-mybar- 在源码里复制出navbar-default到main.css中- 修改源码里所有的 navbar-default 为 navbar-mybar- 修改详细样式5.  --Tips-- section nav - container- row - col-xx-x - a -i span img p div h4- #header>#header>.topbar>.container - #header .mobile-link- #header a
  1. 经典布局代码

2.1 圣杯布局

//圣杯布局  --两端固定图标，中间可长度伸缩，多用作中间搜索框
<body><div class="search-wrap"><div class="search-left"></div><div class="search"></div><div class="search-right"></div>
</div></body><style>
.search-wrap{position: relative;height: 44px;
}
.search-wrap{ /*父设置为固定定位,必须给宽度*/position: fixed;height: 44px;  width: 100%min-width: 320px;max-width: 640px;
}.search-left{position: absolute;top: 0;left: 0;width: 40px;height: 44px;background-color: blue;
}
.search-right{position: absolute;top: 0;left: 0;width: 40px;height: 44px;background-color: red;
}
.search{height: 44px; /*只给高度，长度自适应*/margin: 0 50px; /*左右外边距*/border-radius: 16px;background-color: yellow;
}

2.2 两栏布局

//两栏布局,垂直两栏，左边固定右边自适应
<body><!-- 左右两栏，左边固定，右边自适应 --><div class="outer outer1"><div class="left">1-left</div><div class="right">1-right</div></div><div class="outer outer2"><div class="left">2-left</div><div class="right">2-right</div></div><div class="outer outer3"><div class="left">3-left</div><div class="right">3-right</div></div><div class="outer outer4"><div class="left">4-left</div><div class="right">4-right</div></div>   </body>
/*通配*/
.outer{height: 100px;margin-bottom: 10px;
}
.left {background: tomato;height: 100px;
}
.right {background: gold;height: 100px;
}
/* Method One float*/
.outer1 .left{width: 200px;float: left;
}
.outer1 .right {width: auto;margin-left: 200px;
}
/* Method Two flex*/
.outer2{display: flex;
}
.outer2 .left{flex-grow: 0; /*用于设置元素的放大比例，默认为0，为0则不放大*/flex-shrink: 0; /*用于定义属性的缩放比例,默认为1，为0则不缩放*/flex-basis: 200px;
}
.outer2 .right{flex: auto; /*当 flex 取值为 auto，则计算值为 1 1 auto*//*flex-grow: 1;  可放大flex-shrink: 1; flex-basis: auto;*/
}/*Method three position*/
.outer3 {position: relative;
}
.outer3 .left {position: absolute;width: 200px;
}
.outer3 .right {/*块级元素的宽度，不设置宽度时的值为auto，默认宽度是父元素的宽度,不给宽度也能auto*/margin-left: 200px;
}
/*Method four position*/
.outer4{position: relative;
}
.outer4 .left{width: 200px;
}
.outer4 .right{position: absolute;top: 0;left: 200px;right: 0; /*上0右0*/
}

2.3 三栏布局

//垂直三栏布局，左右两栏宽度固定，中间自适应
<body>
<!-- 三栏布局 左右固定 中间自适应 --><div class="outer outer1"><div class="left">1-left</div><div class="middle">1-middle</div><div class="right">1-right</div></div><div class="outer outer2"><div class="left">2-left</div><div class="middle">2-middle</div><div class="right">2-right</div></div><div class="outer outer3"><div class="left">3-left</div><div class="right">3-right</div><div class="middle">3-middle</div></div>
</body>
/*通配*/
.outer, .left, .middle, .right{height: 100px;margin-bottom: 5px;
}
.left {background: tomato;
}
.middle {background: lightgreen;
}
.right {background: gold;
}
/*Method one*/
/* 左右分别设置绝对定位 中间设置外边距 */
.outer1 {position: relative;
}
.outer1 .left {position: absolute;width: 100px;
}
.outer1 .right {position: absolute;width: 200px;top: 0;right: 0;
}
.outer1 .middle{margin: 0 200px 0 100px;
}/*method two*/
.outer2 {display: flex;
}
.outer2 .left {flex: 0 0 100px;
}
.outer2 right {flex: 0 0 200px;
}
.outer2 .middle {flex: auto;
}
/*浮动布局 但是 html 中 middle要放到最后*/
.outer3 .left {float: left;width: 100px;
}
.outer3 .right {float: right;width: 200px;
}
.outer3 .middle {margin: 0 200px 0 100px;
}

2.4 圣杯布局 和 双飞翼布局

//和三栏布局要求相同，不过中间列要写在前面保证优先渲染
<!-- 三栏布局 左右固定 中间自适应 -->
<body><!-- 圣杯布局 middle 最先 --><div class="outer outer1"><div class="middle">圣杯-middle</div><div class="left">圣杯-left</div><div class="right">圣杯-right</div></div><!-- 双飞翼布局 middle 最先 多一层 div --><div class="outer outer2"><div class="middle-wrapper"><div class="middle">双飞翼布局-middle</div></div><div class="left">双飞翼布局-left</div><div class="right">双飞翼布局-right</div></div>
</body>.outer, .left, .middle, .right {height: 100px;margin-bottom: 5px;
}
.left {background: tomato;
}
.middle {background: lightgreen;
}
.right {background: gold;
}
/* 圣杯布局 通过浮动和负边距实现 */
.outer1 {padding: 0 200px 0 100px;
}
.outer1 .middle {width: 100%;float: left;
}
.outer1 .left{width: 100px;float: left;margin-left: -100%;position: relative;left: -100px;
}
.outer1 .right{width: 200px;float: left;margin-left: -200px;position: relative;left: 200px;
}
/* 双飞翼布局 */
.outer2 .middle-wrapper {width: 100%;float: left;
}
.outer2 .middle{margin: 0 200px 0 200px;
}
.outer2 .left{width: 100px;float: left;margin-left: -100%;
}
.outer2 .right{width: 200px;float: left;margin-left: -200px;
}

2.5 图形(三角形,正方形, 扇形)

//实现一个三角形
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>
</body>.box1, .box2, .box3, .box4{height: 0px;width: 0px;float: left;border-style: soild;margin: 10px;
}.box1 { /* 等腰直角 */border-width: 100px;border-color: tomato transparent transparent transparent;
}
.box2 { /* 等边 */border-width: 100px 173px;border-color: trnasparent transparent transparent;
}
.box3 { /* 等腰 */border-width: 100px 80px;border-color: transparent transparent tomato transparent;
}
.box4 {  /* 其他 */border-width: 100px 90px 80px 70px;border-color: transparent transparent transparent tomato;
}//正方形
// css 实现一个宽高自适应的正方形
<!-- 画一个正方形 -->
<body><div class="square1"></div><div class="square2"></div><div class="square3"></div>
</body>/* 都是像对于屏幕宽度的比例 */
.square1 {width: 10%;height: 10vw;background: red;
}
/* margin/padding 百分比是相对父元素 width 的 */
.square2 {width: 20%;height: 0;padding-top: 20%;background: orange;
}
/* 通过子元素 margin */
.square3 {width: 30%;overflow: hidden; /* 触发 BFC */background: yellow;
}
.square3::after{content: '';display: block;margin-top: 100%; /* 高度相对于 square3 的 width */
}//扇形
//实现一个 1/4 圆、任意弧度的扇形
<body><div style="display: flex; justify-content: space-around;"><div class="sector1"></div><div class="sector2"></div><div class="sector3"></div><div class="sector4"></div><div class="sector5"></div></div>
</body>/* 通过 border 和 border-radius 实现 1/4 圆 */.sector1 {height: 0;width: 0;border: 100px solid;border-radius: 50%;border-color: turquoise tomato tan thistle;}/* 类似三角形的做法加上父元素 overflow: hidden; 也可以实现任意弧度圆 */.sector2 {height: 100px;width: 200px;border-radius: 100px 100px 0 0;overflow: hidden;}.sector2::after {content: '';display: block;height: 0;width: 0;border-style: solid;border-width: 100px 58px 0;border-color: tomato transparent;transform: translate(42px,0);}/* 通过子元素 rotateZ 和父元素 overflow: hidden 实现任意弧度扇形（此处是60°） */.sector3 {height: 100px;width: 100px;border-top-right-radius: 100px;overflow: hidden;/* background: gold; */}.sector3::after {content: '';display: block;height: 100px;width: 100px;background: tomato;transform: rotateZ(-30deg);transform-origin: left bottom;}/* 通过 skewY 实现一个60°的扇形 */.sector4 {height: 100px;width: 100px;border-top-right-radius: 100px;overflow: hidden;}.sector4::after {content: '';display: block;height: 100px;width: 100px;background: tomato;transform: skewY(-30deg);transform-origin: left bottom;}/* 通过渐变设置60°扇形 */.sector5 {height: 200px;width: 200px;background: tomato;border-radius: 50%;background-image: linear-gradient(150deg, transparent 50%, #fff 50%),linear-gradient(90deg, #fff 50%, transparent 50%);}

2.6 水平垂直居中

//实现子元素的水平垂直居中
<body><div class="outer outer1"><div class="inner inner1"></div></div><div class="outer outer2"><div class="inner inner2"></div></div><div class="outer outer3"><div class="inner inner3"></div></div><div class="outer outer4"><div class="inner inner4"></div></div>
</body>.outer {height: 200px;width: 200px;background: tomato;margin: 10px;float: left;position: relative;
}.inner {height: 100px;width: 100px;background: black;
}
/** 通过 position 和 margin 居中* 缺点：需要知道 inner 的长宽*/
.inner {position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
}/** 通过 position 和 margin 居中 */
.inner {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;
}/** 通过 flex 进行居中*/
.outer3 {display: flex;justify-content; center;align-items: center;
}
/*** 通过 position 和 transform 居中*/
.inner4 {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}

2.7 弹出框

//使用 CSS 写一个弹出框效果
<body><div class="bg">页面内容</div><div class="dialog"><div class="content">弹出框</div></div>
</body>.bg {height: 666px;width: 100%;font-size: 60px;text-align: center;
}
.dialog {z-index: 999;position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0, 0.5);
}
.dialog .content {min-height: 300px;width: 600px;background: #fff;border-radius: 5px;border: 1px solid #ebeef5;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}

2.8 导航栏

// 一个 div 内部放很多水平 div ，并可以横向滚动
<!-- 水平滚动导航栏 -->
<body><div class="nav"><div class="item">item1</div><div class="item">item2</div><div class="item">item3</div><div class="item">item4</div><div class="item">item5</div><div class="item">item6</div><div class="item">item7</div><div class="item">item8</div><div class="item">item9</div></div>
</body>body, html {margin: 0;padding: 0;
}
/* flex 实现 */
.nav {display: flex;height: 30px;border: 1px solid #000;padding: 3px;overflow-x: auto;
}
.nav::-webkit-scrollbar {display: none;
}
.item{flex: 0 0 200px;height: 30px;margin-right: 5px;background: gray;
}
/* inline-block 和 white-space: nowrap; 实现 */
.nav {height: 30px;padding: 3px;border: 1px solid #000;overflow: auto;white-space: nowrap;
}
.nav::-webkit-scrollbar {display: none;
}.item {display: inline-block;width: 200px;height: 30px;margin-right: 5px;background: gray;
}

-1. HTMLCSS 基础总结相关推荐

  1. HTML-CSS基础笔记

    HTML-CSS基础笔记 文章目录 HTML-CSS基础笔记 一.html的发展历程 二.常用声明方式 三. HTML的注释 四. 常用的标签 4.1.img标签 4.2. a标签 4.3. em标签 ...

  2. html标签体,HTMLCSS基础-html标签的实体

    HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 尹正杰的网页 我的博客地址:https://www.cnblog ...

  3. HtmlCSS 基础知识

    Html 基础知识Html 基础知识Html 基础知识Html 基础知识Html 基础知识Html 基础知识Html 基础知识Html 基础知识Html 基础知识Html 基础知识Html 基础知识H ...

  4. HTML-CSS基础上的小特别总结（1）

    1.浏览器内核的了解 浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎. 渲染引擎 它负责取得网页的内容(HTML.XML. ...

  5. 天涯htmlcss基础框架

    html申明 对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位. ...

  6. html和css有序列表,HTMLCSS基础学习笔记14—有序列表及列表嵌套

    我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去 ...

  7. htmlcss基础知识点表单

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  8. css html基础书,htmlcss基础知识汇总，新人必看！

    html的基本标签 1. 标题标签 n表示不同大小的字体,n取值1-6 2. 水平线标签 创建一个水平分割线,用于定义内容主题的变化 size属性: 水平线的高度,单位像素(px) noshade属性 ...

  9. HTMLCSS基础篇之十一：字体与颜色样式

    代码 body {font-family: Verdana, Geneva, Arial, sans-serif;font-size: small; }h1, h2 {font-weight: nor ...

最新文章

  1. Tomcat手动配置简述【查询留存】
  2. GitHub因“纳粹”评论遭解雇的犹太员工被复职，CEO公开致歉，开除他的HR走人...
  3. linux内存显示3.54g,为什么WDCP/linux服务器内存一直显示几乎用完了
  4. 知道python不_为什么自学Python看不进去？
  5. PHP企业网站源码-稻草人PHP系统源码v1.0.3
  6. rz/sz命令参数解释
  7. HBase集群环境部署
  8. python添加lxml库_Python lxml库简介
  9. oracle建表 和 设置主键自增
  10. 什么是WAF（lua+nginx）
  11. 踏实学习前端，学技术，必有高薪，好的人生，学习量大能力要求高就对了
  12. 随书光盘资源下载/提取码（二）
  13. msm8937 bootloader流程分析
  14. 如何高效学习一门新技术
  15. 神经网络模型分类总结
  16. 洋洋背古诗——寒假版
  17. 智联招聘 'python数据分析'职位分析第一篇
  18. 苹果内购开发总结（含掉单问题优化）
  19. 手撕HashMap（原理）
  20. 根据阿里GeoJSON格式生成全国Shp矢量边界

热门文章

  1. Linux 常用排查问题命令
  2. [Excel] 用sumproduct函数实现数据透视表功能
  3. UNICODE编码转换为ASCII编码
  4. mac时间机器占用大量系统盘空间且在访达中无法找到
  5. ubuntu10.10+双显卡I卡N卡+bumbleb…
  6. 台湾评论大陆量子计算机,台湾媒体盛赞大陆工业科研水平 称台湾人对大陆懵懂无知...
  7. 使用FTP上传数据到云服务器 CuteFTP和LeapFTP软件使用教程
  8. 进阶篇：3.9）3d打印件设计
  9. Java异常处理——日志打印
  10. 第四章 MPT 现代组合理论