MR_JIABing的博客

原创 2D 转换综合写法以及顺序问题

同时使用多个转换，其格式为 transform: translate() rotate() scale()顺序会影响到转换的效果(先旋转会改变坐标轴方向)但我们同时有位置或者其他属性的时候，要将位移放到最前面

原创 2D转换

2D 转换是改变标签在二维平面上的位置和形状移动： translate旋转： rotate缩放： scale

原创 . nth-child 详解

注意：本质上就是选中第几个子元素n 可以是数字、关键字、公式n 如果是数字，就是选中第几个常见的关键字有 even 偶数、odd 奇数常见的公式如下(如果 n 是公式，则从 0 开始计算)但是第 0 个元素或者超出了元素的个数会被忽略...

原创 伪元素选择器注意事项

before 和 after 必须有 content 属性before 在内容前面，after 在内容后面before 和 after 创建的是一个元素，但是属于行内元素创建出来的元素在 Dom 中查找不到，所以称为伪元素伪元素和标签选择器一样，权重为 1...

原创 多媒体标签总结

音频标签与视频标签使用基本一致多媒体标签在不同浏览器下情况不同，存在兼容性问题谷歌浏览器把音频和视频标签的自动播放都禁止了谷歌浏览器中视频添加 muted 标签可以自己播放

原创 audio 标签说明

可以在不使用插件的情况下，也能够原生的支持音频格式文件的播放，但是：播放格式是有限的

原创 HTML5新增的语义化标签

header — 头部标签nav — 导航标签article — 内容标签section — 块级标签aside — 侧边栏标签footer — 尾部标签

原创 HTML5 拓展了哪些内容

语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成

原创 HTML5 的概念与定义

定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5...

原创 HTML5 的概念与定

定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5...

原创 css精灵图概念

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

原创 text-overflow 文字溢出

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出text-overflow : clip ；不显示省略标记（…），而是简单的裁切text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（…）

原创 white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容white-space:normal ；默认处理方式white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...

原创 vertical-align 垂直对齐

有宽度的块级元素居中对齐，是margin: 0 auto;让文字居中对齐，是 text-align: center;

原创 用户界面样式总结

属性 用途 用途鼠标样式 更改鼠标样式cursor 样式很多，重点记住 pointer轮廓线 表单默认outline outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用防止拖拽 主要针对文本域resize 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none...

原创 display 显示

display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。

原创 显示与隐藏总结

属性 区别 用途display隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛visibility隐藏对象，保留位置使用较少overflow只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围...

原创 overflow 溢出

visible 不剪切内容也不添加滚动条hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉scroll 不管超出内容否，总是显示滚动条auto 超出自动显示滚动条，不超出不显示滚动条

原创 圆角矩形设置4个角

border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;

原创 显示与隐藏总结

属性 区别 用途display隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛visibility隐藏对象，保留位置使用较少overflow只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围...

原创 overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。属性值 描述visible 不剪切内容也不添加滚动条hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉scroll 不管超出内容否，总是显示滚动条auto 超出自动显示滚动条，不超出不显示滚动条...

原创 visibility 可见性

visibility：visible ; 对象可视visibility：hidden; 对象隐藏

原创 display 设置或检索对象是否及如何显示

display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。

原创 css定位

可以用inline-block 转换为行内块可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。同时注意：浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。...

原创 堆叠顺序

在使用定位布局时，可能会出现盒子重叠的情况。加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

原创 固定定位

完全脱标 —— 完全不占位置；只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；跟父元素没有任何关系；单独使用的不随滚动条滚动。

原创 子绝父相

绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置不保留原来的位置，完全是脱标的。因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。子级是绝对定位，父级要用相对定位。...

原创 绝对定位

绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）完全脱标 —— 完全不占位置；父元素没有定位，则以浏览器为准定位（Document 文档）。

原创 相对定位的特点

相对于 自己原来在标准流中位置来移动的原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

原创 静态定位

原创 定位模式

原创 边偏移

原创 浮动

原创 盒子阴影

原创 3 种机制设置盒子的摆放位置，

普通流（标准流）块级元素会独占一行，从上向下顺序排列；常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em等浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。定位将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。...

原创 CSS文字文本样式.

原创 块级元素的特点

（1）比较霸道，自己独占一行（2）高度，宽度、外边距以及内边距都可以控制。（3）宽度默认是容器（父级宽度）的100%（4）是一个容器及盒子，里面可以放行内或者块级元素。注意：只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。...

原创 css复合选择器

原创 css基础概念

CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。...

原创 input控件属性