2019-04-25--复习

作者: 大庆无疆 | 来源:发表于2019-04-26 13:01 被阅读0次

1.img和input等行内块元素默认会和块级元素的基线对齐，所以底部会有空隙，可使用vertical-align: top 消除

2.模式转换： absolute定位和fixed定位还有浮动的元素会自动转换为行内块元素

HTML

web标准：结构，样式，行为方面

<html>
<head>
    <title>html复习之旅</title>
</head>
<body>
</body>
</html>

标签有“双标签”和“单标签”

<!DOCTYPE html>  ---->告诉浏览器我们使用的版本是html5
<meta charset="UTF8"/>  --->告诉浏览器我们使用的字符集

学习标签

(1)排版标签
      标题标签：<h1> </h1>-<h6> </h6>  --->h1尽量少用，一般给页面的logo使用
      段落标签：<p> </p>
      水平线标签：<hr />
      换行标签：<br />
      div span标签（没有语义，纯为排版）

（2）文本格式化标签
      加粗：<s> </s>、<strong> </strong>
      倾斜：<i> </i>、<em> </em>
      删除：<b> </b>、<del> </del>
      下划线：<u> </u>、<ins> </ins>
（3）图像标签
       <img src="" alt="图片迷路啦" title="这是庆哥的美图"/>
（4）链接标签
      <a href="https://www.baidu.com" target="_blank"> </a>
      <a href="#id名">锚点</a>
        与a标签相关的标签 <base target="_blank" /> --->在head标签之间书写，统一设置a标签的属性
（5）注释标签
        <!-- 注释内容 -->

特殊字符：
 、&gt、&lt、 &copy、&reg
相对路径和绝对路径
列表

（1）无序列表
    <ul>
        <li></li>
        <li></li>
    </ul>

（2）有序标签
    <ol>
        <li></li>
        <li></li>
    </ol>

（3）自定义列表
<dl>
    <dt>定义标题</dt>
    <dd>定义描述项</dd>
    <dd>定义描述项</dd>
</dl>

表格标签

标签：<table>、<tr>、<td>、<th>、<thead>、<tbody>、<tfoot>、<caption>
属性： 
cellspacing --- 修改单元格之间的距离
cellpadding --- 修改单元格与内容之间的距离 
colspan -- 横向合并
rowspan -- 纵向合并

<table border="1"  cellpadding="9" cellspacing="11" width="233" height="200px">
     <caption>表格标题</caption>

     <thead>
         <tr>
            <th>列标题</th>
            <th>列标题</th>
         </tr>
     </thead>

    <tr>
        <td colspan="2">单元格</td>
    </tr>

    <tr>
        <td>单元格</td>
        <td rowspan="2">单元格</td>
    </tr>

    <tr>
        <td>单元格</td>
    </tr>
</table>

表单标签 --- > 收集用户信息

<form action="xxx.php" method="post"> </form>
用户名:  <input  type="text" value="派克钢笔" />
密　码:  <input  type="password" maxlength="6" />
性　别:　<input  type="radio" name="sex"  /> 女  <input  type="radio" name="sex" /> 男
爱　好:<input type="checkbox" name="hobby" checked="checked" /> 足球 <input type="checkbox" name="hobby"/> 篮球  
<input type="button" value="搜索啥"/>
<input type="submit" value="提交表单" />
<input type="reset" value="重置表单" />
<input type="image" src="im.jpg" /> --- 也是可以提交数据
<input type="file" /> -- 文件按钮
<textarea> 请输入留言 </textarea>
<select>
    <option>选项</option>
    <option>选项</option>
    <option>选项</option>
</select>

有一个合作伙伴：label标签  -- 使用label的for属性绑定控件的id，实现点击label的内容相当于点击了该控件
<label for="tag">  输入账号:<input type="text"  id="tag"/></label>

新增标签及属性

html5新增标签
<header></header>
<footer></footer>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<datalist></datalist> -- 和表单控件一起使用，把表单控件的list属性绑定datalist的id
<fieldset></fieldset> -- 与legend搭配使用
表单控件新增的type属性值
email、tel、number、url、color、search、range、time、date、datetime、month、week

新增的属性：
placeholder -- 提示语
multiple -- 多选
autofocus -- 自动获取焦点
autocomplete -- 记录提交过的文本信息，还需要设置name属性
required -- 文本不能为空
accesskey -- 按下规定的键使元素获得焦点 例如：accesskey = "s"   获取该元素焦点可按 alt + s 键

<input type="text" name="u" list="dlt">
<datalist id="dlt">
    <option>数据项</option>
    <option>数据项</option>
    <option>数据项</option>
</datalist>

<form action="http://www.baidu.com" method="post">
    <fieldset>
        <legend>用户登录</legend>
        用户名:<input type="text" name="user">
        密码:<input type="password" name="pword">
    </fieldset>
</form>

多媒体标签

（音频文件有三种格式：ogg, mp3, wav）
<audio controls="controls" autoplay="autoplay" loop="-1">
  <source src="song.ogg" />
  <source src="song.mp3" />
</audio>
loop:表示循环播放次数，为 -1 等于无限循环

(视频文件有:ogg, mp4, webm)
<video width="320" height="240" controls="controls" >
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>
 属性：
src: 告诉video标签需要播放的视频地址
controls: 告诉video标签是否需要显示控制条
autoplay: 告诉video标签是否需要自动播放视频
poster: 告诉video标签视频没有播放之前显示的占位图片
loop: 告诉video标签循环播放视频次数，（无限循环为-1）. 一般用于做广告视频
preload: 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:告诉video标签视频静音
width/height: 和img标签中的一模一样

CSS

字体默认是16px,一般网页的字体大小在14px比较合适

字体样式

font-size: 44px;
font-family: \5B8B\4F53; /*多个字体之间使用逗号隔开，字体 的表示可以是中文，英文或者是Unicode字体*/
font-style: italic;
font-weight: 900;
font简写 --> font: 风格 粗细 大小 字体;

选择器

（1）标签选择器
（2）类选择器 ---> 类名不可以以数字开头，多个单词用-隔开
（3）多类名选择器
（4）id选择器
（5）通配符选择器
（6）伪类选择器
          I：链接伪类选择器
              :link
              :visited
              :hover
              :active
          II：序选择器
              li:first-child 
              :last-child 
              :nth-child(3) 
              :nth-child(even) 
              :nth-child(odd) 
              :nth-child(3n) 
          II：目标选择器
              :target
li:target {
    font-size: 30px;
    background: red;
}

<a href="#m">点击</a>
<ul>
    <li>abc</li>
    <li id="m">abc</li>
    <li>abc</li>
</ul>
点击链接，选中的锚点的文字会变成30px背景色变红

CSS外观属性

（1）color --文本颜色
      取值：预定颜色值：red、 十六进制:#FF00FF、 rgb()、 rgba() 

（2）line-height -- 行高 --->行高一般比字体大8像素看起来比较舒服
（3）text-align -- 水平对齐方式
（4）text-indent -- 首行缩进
       1em 就是一个字符的宽度
（5）letter-spacing -- 字间距
（6）word-spacing -- 单词间距
（7）word-break -- 自动换行
          normal: 使用浏览器默认的换行规则
          break-all: 允许在单词内换行
          keep-all: 只能在半角空格或连字符处换行
（8）文字阴影
        text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色

标签的显示模式

（1）块级元素
（2）行内元素
        行内元素不能存放块级元素（a标签除外）
        行内元素无法设置宽高，但是水平方向的padding和margin可以，垂直不行
（3）行内块元素 ---> <img /> 、<input />、 <td> </td>

注意：a标签里面不能套a标签
      h1~h6、p、dt 标签里面不能放块级元素

5、复合选择器
交集选择器，并集选择器，后代选择器，子元素选择器，属性选择器, 伪元素选择器

属性选择器：
input[type], input[type=button], input[type^=butt], input[type$=tton], input[type*=but]

伪元素选择器：
::first-letter, ::first-line, ::selection, ::after, ::before

背景（background）

background-color
background-image: url(地址)
background-repeat: no-repeat
background-position: 水平 垂直
background-attachment: fixed   设置背景是否随滚动条的滚动而滚动

简写：background -- 顺序没有严格要求，建议如下方式
background: 颜色 图片 平铺 滚动 位置

背景缩放：
background-size: cover（宽高占满容器为止）
background-size:contain（宽或高有一个占满容器即止）
background-size:具体像素或百分比

CSS三大特性

（1）层叠性
（2）继承性 -- 对字体，文本相关（ text-, font-, line-, color）的可以使用继承 
（3）优先级  
      标签< 类（伪类） = 属性 = 伪元素 < id < 行内 < !important

盒子模型（边框，内边距，外边距）

（1）边框
      border: 宽度 样式 颜色 （样式：solid, dashed, dotted, double）
      border-radius: 左上 右上 右下 左下 （顺时针）

（2）内边距
      padding: 上 右 下 左 （顺时针）

（3）外边距
      margin:上 右 下 左   （顺时针）
块级元素居中：margin: 0 auto;

两个盒子的垂直方向的外边距合并问题，最好的解决方案就是避开这种情况

子元素在父元素中使用margin-top引起高度塌陷：
I：给父盒子添加border-top
II：给父盒子添加padding-top
III：给父盒子使用over-flow:hidden

盒子的空间大小：content + padding + border + margin
盒子的可视区大小：content + padding + border

我们如果使用的是W3Cd的盒子模型，增加了padding,border使用影响到盒子的宽度和高度的。
padding特殊的地方，如果块级元素没有指定宽度和高度，那么设置盒子的padding-left/padding-right不会增加盒子的总宽度

盒子阴影：
box-shadow: 水平偏移 垂直偏移 模糊度 阴影拓展  阴影颜色 内外阴影
注意：外阴影不用设置，否则出错，内阴影设为 inset

浮动

（1）浮动的元素会飘在标准流中的元素上面  
（2）为了保证页面上布局不混乱，通常都给需要浮动的元素套一个div,保证标准流中的位置正常
（3）浮动元素会自动转成行内块元素
注意：浮动元素只会在父元素的内容区显示，不会压着padding区，定位的元素则不同，他可以压着padding区域，因为定位的元素的相对元素的左上角定位的

清除浮动

（1）额外标签法：在父元素内部的最后的浮动元素的后面添加一个div，使用clear:both
（2）给父元素添加overflow:hidden
（3）使用伪元素（::after）清除浮动
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {  --> 兼容IE6,7
  *zoom: 1;
}  
（4）双伪元素
.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

定位

static: 静态定位
relative：相对定位 -- 占有原先位置（不脱标），相对自己原先位置移动
absolute：绝对定位 -- 不占有原先位置（脱标），以最近的定位父元素左上角做参考点，否则以浏览器左上角为参考点
fixed：固定定位 -- 不占有原先位置（脱标），以浏览器左上角为参考点

z-index: 显示优先值

模式转换： absolute和fixed定位会使元素自动转换为行内块元素

元素的显示和隐藏

display: none;
visibility: hidden;
overflow: hidden;

CSS高级技巧

鼠标样式

默认：default
小手：pointer
移动：move
文本：text

轮廓：outline
通常都是去掉文本框的轮廓（获取焦点会显示）

outline: 0; 或 outline:none

防止拖拽文本域resize

防止 textarea文本域 的右下角被拖拽
resize: none;

垂直对齐vertical-align

只针对于行内元素或者行内块元素，通常用来控制图片和表单与文字的对齐

图片，表单元素 默认跟 文字 基线对齐，通过vertical-align:middle可以修改对齐方式

在有的浏览器里，图片等行内块元素会与父级盒子的基线对齐，这样会造成一个问题，就是图片底测会有一个空白间隙。
解决方法是给图片添加vertical-align: top 或middle

world-break：自动换行

world-break: normal | break-all | keep-all

white-space

white-space: nowrap 强制一行显示

text-overflow文字溢出

text-overflow: ellipsis | clip

不可以单独使用，需配合如下属性
white-space: nowrap;
overflow: hidden;

CSS精灵技术

减少服务器的请求次数
制作精灵图，保存图片格式可以为png8

字体图标

滑动门技术

:after, :before伪元素详解

:after, :before 伪元素也是一个元素，默认是行内元素，所以如果要对其设置宽高需要进行模式转换

注意：鼠标移到div上在div的前边添加元素，要这样写：div:hover::before  {样式}（中间没有空格）

过渡

过渡效果
transition-property
transition-duration
transition-timing-function
transition-delay
简写格式：变化属性属性 运动时长 运动曲线 等待时长
运动曲线取值：linear（匀速）, ease（逐渐慢下来）， ease-in（加速）, ease-out(减速)， ease-in-out(先加速后减速)
注意：时间要有单位（s）,否则不起效果

2D转换

（1）transform:
 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

（2）scale
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

（3）rotate
transform: rotateX(x);
transform: rotateY(y);

注意：单位是 deg

（4）改变形变中心点
transform-origin: left top ; -- 水平 垂直

3D转换

2d只有x和y轴， 3d有x, y, z轴

（1）透视
perspective: 1000px;  
视距 距离 眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显

（2）rotate
transform: rotateX(x);
transform: rotateY(y);
transform: rotateZ(z);

（3）translate3d
translateX();
translateY();
translateZ();
translate3d(x, y, z);

动画

BFC（块级格式化上下文）

BFC: 独立的渲染区域

具有BFC条件的元素：display属性的值为：block, list-item, table

触发BFC的条件：
（1）float属性的值不为none
（2）position 为 absolute 或 fixed
（3）overflow的值不为 visible
（4）display为inline-block, table-ell, table-caption, flex, inline-flex

BFC主要用途：
（1）清除浮动
（2）解决外边距合并（因为同处于一个BFC区域的盒子垂直外边距会重叠，所以只要让盒子不处于同一个BFC区域即可）
（3） 制作右侧自适应的盒子问题（原理是：BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。）

2019-04-25--复习

HTML

CSS

CSS高级技巧

CSS精灵技术

字体图标

滑动门技术

:after, :before伪元素详解

BFC（块级格式化上下文）

3d之：transform-style: preserve-3d

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读