WEB

「已注销」

于 2020-10-13 15:34:06 发布

阅读量250

点赞数

分类专栏： HTML&CSS

本文链接：https://blog.csdn.net/qq51370/article/details/109052238

版权

HTML&CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

常用浏览器中英文名及内核

// IE Trident IE、猎豹安全、360急速浏览器、百度浏览器
// firefox Gecko 火狐浏览器内核
// Safari Webkit 苹果浏览器内核
// chrome/Opera Blink chrome/opera浏览器内核、Blink属于Webkit分支

网页基本结构

// <!DOCTYPE> 文档类型声明 告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>

    <body>
    </body>

</html>

lang语言种类，设置不同语言种类触发浏览器不同语言翻译

// en/英语
// zh-CN/中文
// fr/法语

字符集

// charset字符编码方式 UTF-8万国码
<meta charset="UTF-8">

vs code段落自动换行

// 查看 => 切换自动换行

a标签

// 锚点
<a href="#{id}}">锚点</a>

<div id="id">定位元素</div>

// 电话
<a href="tel:12345678910"></a>

// 邮箱
<a href="mailto:mail@mail.com"></a>

特殊格式字符

// 空格
&nbsp;

// 左尖括号
&lt;

// 右尖括号
&gt;

表格table

// 行合并
rowspan="{number}"

// 列合并
colspan="{number}"

// 标准采用tbody（定义表格的主体）、thead（用于定义表格的头部）
<table>
    <thead>
        <th></th>
        ...
    </thead>
    <tbody>
        <tr>
            <td></td>
            ...
        </tr>
        ...
    </tbody>
</table>

自定义列表dl

<dl>
    <dd></dd>
    <dt></dt>
    <dt></dt>
    ...
</dl>

input类型

// 按钮
<input type="button" />

// 单选
<input type="radio" />

// 文件
<input type="file" />

// 隐藏
<input type="hidden" />

// 图像形式提交按钮
<input type="image" />

// 表单域重置
<input type="reset" />

// 密码
<input type="password" />

// 表单域提交
<input type="submit" />

// 多选
<input type="checkbox" />

// 文本
<input type="text" />

单选/多选

// 默认选中
<input type="radio" checked />选项

<input type="checkbox" checked />选项

label标签

// 点击label标签内的文本浏览器就会自动将焦点转到或者选择对应的表单元素上
<label for="{id}">选项</label>
<input id="id"/>

下拉表单select

// 默认选中
<select>
    <option selected>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

文本域textarea

// 禁止拉伸
resize: none;

装饰文本

text-decoration: value
// 没有装饰线
none

// 下划线
underline

// 上划线
overline

// 删除/贯穿线
line-through

文本缩进

// em是一个相对单位，当前元素（font-size) 1 个文字的大小
// 如果当前元素没有设置大小，则会按照父元素的1 个文字大小
text-indent: 2em

行间距

// 含上下间距、文本高度
line-height: 26px

加粗

font-weight:400 //font-weight: normal

伪类选择器

div:hover
input:focus

块级元素

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

行内元素

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

背景图像固定

background-attachment: scroll | fixed

盒子模型

// 包括边框、外边距、内边距、和实际内容

table边框重叠合并

border-collapse:collapse;

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

// h-shadow水平阴影位置
// v-shadow垂直阴影位置
// blur模糊距离
// spread阴影尺寸
// color阴影颜色
// inset内部阴影

文字阴影

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

// h-shadow水平阴影位置
// v-shadow垂直阴影位置
// blur模糊距离
// color阴影颜色

浮动（原用于文字环绕）

// 脱离标准普通流的控制移动到指定位置，迎面浮动，俗称脱离文档流
// 浮动的盒子不再保留原先的位置
// 元素浮动脱离文档流后，同级兄弟（后面）元素受影响，元素内文字呈现环绕

清除浮动

// 浮动元素父级末尾新块级元素
div {
    clear: both;
}

// 父级添加overflow: hidden

// 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;
}

emmet语法

.nav
<div class="nav"></div>

ul>li
<ul>
   <li></li>
</ul>

input:button
<input type="button" />

div*2
<div></div>
<div></div>

p.nav*2
<p class="nav"></p>
<p class="nav"></p>

div*2{$}
<div>1</div>
<div>2</div>

div*2{内容}
<div>内容</div>
<div>内容</div>

table>tr*2>td*2
<table>
   <tr>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
   </tr>
</table>

属性选择器

E[att] 具有att属性的E元素
E[att="val"] 具有att属性且属性值等于val的E元素
E[att^="val"] 具有att属性、且值以val开头的E元素 
E[att$="val"] 具有att属性、且值以val结尾的E元素 
E[att*="val"] 具有att属性、且值中含有val的E元素

伪类选择器

E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素 
E:nth-child(n)匹配父元素中的第n个子元素E 
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n

// 奇数odd 偶数even
// 匹配父元素中的前m个子元素E
E:nth-child(m-n)

伪元素

// before/after
// 须具有content 属性
// before在内容的前面，after在内容的后面
// before和after创建一个元素，但是属于行内元素
// 刚才创建的元素dom不可见，故称为伪元素
// 常用于文本前后图标、部分dom悬浮显隐

// 特殊操作方式
<div data-content='content...' />

div:hover::after {
    content: attr(data-content) // div自定义属性data-content
}

选择器样式权重

// !important > 行内 > id > 类/属性/伪类 > 标签 > 通配
color: red!important;
<div style="color:red"></div>
#id {
    color:red;
}
.class {
    color:red
}
div[class] {
    color:red
}
div:first-child {
    color:red
}
div {
    color:red
}
* {
    color:red
}

定位

// 相对定位relative
// 相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
// 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它

// 绝对定位absolute
// 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位位（Document 文档）
// 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
// 绝对定位不再占有原先的位置（脱离文档流）

// 固定定位fixed
// 以浏览器的可视窗口为参照点移动元素
// 跟父元素没有任何关系
// 不随滚动条滚动

// 粘性定位sticky
// 以浏览器的可视窗口为参照点移动元素（固定定位特点）
// 粘性定位占有原先的位置（相对定位特点）
// 添加top 、left、right、bottom其中一个才有效

轮廓线

input {
    outline: none; 
}

图片旁文字垂直居中

// 用于设置一个元素的垂直对齐方式
// 只针对于行内元素或者行内块元素有效
vertical-align: baseline | top | middle | bottom

// 文字行高含上下间距与文本高度
// 文本含顶线、中线、基线、底线
// 默认vertical-align 是基线对齐，图片会剩余底线与基线部分白边

单行文本…

// 文字单行显示
// 文字用省略号替代超出的部分
// 超出的部分隐藏

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

多行文本…

// 文字用省略号替代超出的部分
// 超出的部分隐藏
// 弹性伸缩盒子模型显示
// 限制在一个块元素显示的文本的行数
// 设置或检索伸缩盒对象的子元素的排列方式

text-overflow:ellipsis;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

三角强化

// 斜三角
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

2D转换

// transform均不影响其他元素

// translate平移
// translate中的百分比单位是相对于自身元素的 
// translate(50%,50%) 

// rotate角度
// rotate里面 跟度数， 单位是deg
//  rotate(45deg)

// 缩放scale
// x/y宽高比例
// scale(x,y)

// 旋转三角
p::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(45deg);
}

// 转换中心点 transform-origin
// x/y默认转换的中心点是元素的中心点(50%,50%)
// 可以给x/y设置像素或者方位名词（top、bottom、left、right、center）
transform-origin: x y;

动画

@keyframes name{
    0%{
        width:100px;
    }  
    100%{
        width:200px;
    }
}

animation: name animation-duration  animation-timing-function animation-delay animation-iteration-count infiniteanimation-direction
// 调用属性
// @keyframes规定动画名称
// animation所有动画属性的简写属性，除了animation-play-state属性
// animation-name规定@keyframes动画的名称
// animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0
// animation-timing-function规定动画的速度曲线，默认是“ease”
// animation-delay规定动画何时开始，默认是0
// animation-iteration-count规定动画被播放的次数，默认是1，还有infinite
// infiniteanimation-direction规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放
// animation-play-state规定动画是否正在运行或暂停。默认是"running",还有"paused"
// animation-fill-mode规定动画结束后状态，保持forwards回到起始backwards

3D转换

// translate3d
// translform:translateX(100px)：仅仅是在x轴上移动
// translform:translateY(100px)：仅仅是在Y轴上移动
// translform:translateZ(100px)：仅仅是在Z轴上移动（一般用px单位）
// transform:translate3d(x, y,z)：其中x/y/z分别指要移动的轴的方向的距离因为z轴是垂直屏幕，由里指向外面，默认是看不到元素在z轴的方向上移动

// 透视perspective
// 要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
 // 模拟人类的视觉位置，可认为安排一只眼睛去看
// 透视也称为视距，视距就是人的眼睛到屏幕的距离
// 距离视觉点越近的在电脑平面成像越大，越远成像越小
// 透视的单位是像素

// 3D旋转rotate3d
// 左手的手拇指指向x轴的正向
// 其余手指的弯曲方向就是该元素沿着x轴旋转的方向

// 呈现transfrom-style
// 控制子元素是否开启三维立体环境   
// transform-style: flat 子元素不开启3d立体空间 默认的
// transform-style: preserve-3d;子元素开启立体空间
// 代码写给父级，但是影响的是子盒子

浏览器私有前缀

// 前缀是为了兼容老版本的写法
// -moz-：firefox浏览器私有属性
// -ms-：ie浏览器私有属性
// -webkit-：safari、chrome私有属性
// -o-：Opera私有属性

动画示例附件

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB

常用浏览器中英文名及内核// IE Trident IE、猎豹安全、360急速浏览器、百度浏览器// firefox Gecko 火狐浏览器内核// Safari Webkit 苹果浏览器内核// chrome/Opera Blink chrome/opera浏览器内核、Blink属于Webkit分支网页基本结构// <!DOCTYPE> 文档类型声明告诉浏览器使用哪种HTML版本来显示网页<!DOCTYPE html><html lang="en">
复制链接

扫一扫