- 博客(45)
- 收藏
- 关注
RSS订阅原创 CSS常见面试题
CSS面试题1. 介绍一下标准的css的盒子模型？低版本IE的盒子模型有什么不同标准模型由四部分组成：内容区域: 可以放置元素的区域如文本,图像等，一般设置宽高指的是这个内容的宽高内边距的区域：内容与边框之间的距离边框区域: 边框外边框区域：由外边框限制，用空白区域扩展边框区域，开分开相邻的元素模型区分：标准表型指的是设置box-sizing为content-box的盒子模型，一般...
2020-04-06 14:14:46
449
原创 HTML常见面试题
HTML面试题主流浏览器内核私有属性css前缀：mozilla内核 (firefox,flock等) -mozwebkit内核(safari,chrome等) -webkitopera内核(opera浏览器) -otrident内核(ie浏览器) -ms默认情况下，使用h1标签会形成什么效果?加粗、大号文字。关于HTML语义化，你知道的都有哪些标签？header、article、...
2020-04-06 14:13:41
735
原创 白话详解双飞翼布局
双飞翼布局其实就是浮动之后使用margin负值改变盒子的位置。上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
2020-04-04 20:24:46
304
原创 动画animation(CSS3)
动画动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;@keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100%}@keyframes 动画名称 { 0%{ 开始位置 } ...
2020-04-02 22:43:01
152
原创 透视perspective(CSS3)
透视透视可以将一个2D平面，在转换的过程当中，呈现3D效果。透视原理： 近大远小 。浏览器透视：把近大远小的所有图像，透视在屏幕上。perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素。translateX(x)仅水平方向移动（X轴移动）translate...
2020-04-02 22:34:40
1051
原创 3D变形transform(CSS3)
3D变形3d x y z左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。x左边是负的，右边是正的y 上面是负的， 下面是正的z 里面是负的， 外面是正的rotateX()沿着 x 立体旋转。img { transition:all 0.5s ease 0s;...
2020-04-02 22:26:16
175
原创 2D变形transform(CSS3)
变形transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY(Y)仅垂直方向移动（Y轴移动） ...
2020-04-02 22:18:24
418
原创 过渡(CSS3)
过渡过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。语法格式:transition: 要过渡的属性 花费时间 运动曲线 何时开始;div { width: 200px; height: 100px; background-color:...
2020-04-02 21:58:31
147
原创 盒模型(CSS3)
CSS3盒模型CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型）可以分成两种情况：1、box-sizing: content-box 盒子大小为 width + padding + bor...
2020-04-02 21:52:01
125
原创 CSS3新增选择器
结构(位置)伪类选择器（CSS3):first-child :选取属于其父元素的首个子元素的指定选择器:last-child :选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n...
2020-04-02 21:33:52
169
原创 HTML5新标签与特性
HTML5新标签与特性文档类型设定<!DOCTYPE html>字符设定<!DOCTYPE html><meta charset="utf-8">常用新标签header：定义文档的页眉 头部nav：定义导航链接的部分footer：定义文档或节的页脚 底部article：定义文章section：定义文档中的节（sect...
2020-04-02 21:22:35
210
原创 背景渐变
背景渐变在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。兼容性问题很严重。background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)； <style> div { width: 1000px; ...
2020-04-02 21:06:58
148
原创 优雅降级和渐进增强
优雅降级和渐进增强渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别渐进增强是向上兼容，优雅降级是向下兼容。建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低...
2020-04-02 21:00:23
157
1
原创 BFC(块级格式化上下文)
BFC元素所具有的特性BFC布局规则特性：1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠。3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。BFC的区域不会与浮动盒子产生交集，而是...
2020-04-02 20:53:59
121
原创 网站优化三大标签
网站优化三大标签SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。网页title 标题title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。De...
2020-04-02 20:45:15
346
原创 站点引入ico图标
引入ico图标为了兼容性将favicon.ico 这个图标放到根目录下。 <link rel="shortcut icon" href="favicon.ico"/> 转换ico图标我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。http://www.bitbug.net/...
2020-04-02 20:38:54
443
原创 css字体图标
字体图标本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果。优点本身体积更小，但携带的信息并没有削减。几乎支持所有的浏览器。icomoon字库 http://www.iconfont.cn/阿里icon font字库http://www.iconfont.cn/fontellohttp://fontello.com/Font-Awesomehttp://fort...
2020-04-02 20:34:20
137
原创 CSS高级技巧
鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。<ul> <li style="cursor:default">我是小白</li> <li style="cursor:pointer">我是小手</li> <li style="cursor:move">我是移动</li&...
2020-04-02 20:13:42
185
原创 overflow溢出三件套
overflow 溢出检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。visible : 不剪切内容也不添加滚动条。auto : 超出自动显示滚动条，不超出不显示滚动条hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉scroll : 不管超出内容否，总是显示滚动条文本超出隐藏省略号三件套white-space: nowrap;overflow: hi...
2020-04-02 20:02:11
416
原创 元素的显示与隐藏
元素的显示与隐藏CSS中有三个显示和隐藏常见分别是 display visibility 和 overflow。display 显示display 设置或检索对象是否及如何显示。display : none 隐藏对象相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。特点： 隐藏之后，不再保留位置。visibility 可见性设置或检索是否显示对象...
2020-04-02 19:58:18
373
原创 定位(position)
为什么要用定位？用标准流或者浮动，实现盒子摆放会比较复杂或者难以实现，此时我们用定位来做。元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1、边偏移top 顶端偏移量，定义元素相对于其父元素上边线的距离bottom 底部偏移量，定义元素相对于其父元素下边线的距离left 左侧偏移量，定义元素相对于其父元素左边线的距离right 右侧偏移量，定义元素相对...
2020-04-02 19:43:06
1094
原创 清除浮动(float)
清除浮动由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。准确地说，并不是清除浮动，而是清除浮动后造成的影响清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动的方法闭合浮动或者清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。CSS中clear属...
2020-04-02 19:16:38
121
原创 版心和布局流程
版心和布局流程“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。布局流程1、确定页面的版心（可视区）。2、分析页面中的行模块，以及每个行模块中的列模块。3、制作HTML结构 。4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。一列固定宽...
2020-04-02 19:02:37
636
原创 浮动(float)
浮动(float)浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来发现浮动可以让任何盒子可以一行排列,因此就用浮动的特性来布局了。属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）什么是浮动？元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。<!DOCTYPE html...
2020-04-02 18:58:14
193
原创 盒子模型(Box Model）
盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。CSS就三个大模块： 盒子模型 、 浮动 、 定位所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。每个盒子除了有自己大小和...
2020-04-02 18:44:58
1350
原创 CSS背景(background)
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写（复合属性）background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置背...
2020-04-02 17:57:33
175
原创 CSS三大特性
层叠 继承 优先级CSS层叠性层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式...
2020-04-02 17:36:37
170
原创 CSS书写规范
空格规范【强制】 选择器 与 { 之间必须包含空格。示例： .selector { }【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。示例：font-size: 12px;选择器规范【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。/* good */.post,.page,.commen...
2020-04-02 17:26:51
117
原创 标签显示模式(display)
标签显示模式displayHTML标签一般分为块标签，行内标签和行内块标签三种类型，它们也称块元素，行内元素和行内块元素。块级元素(block-level)每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有h1~h6、p、div、ul、ol、li等，其中div标签是最典型的块元素。块级元素的特点：（1）总是从新...
2020-04-02 17:20:35
277
原创 CSS复合选择器
**复合选择器 **是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。<!DOCTYPE html><html lang="en"><head> <meta charset="U...
2020-04-02 17:10:14
204
原创 CSS外观属性
color:文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：1.预定义的颜色值，如red，green，blue等。2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。 div { col...
2020-04-02 16:56:06
180
原创 CSS字体样式属性
font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。p { font-family:"微软雅黑"; }现在网页中普遍使用14px+。尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。各...
2020-04-02 16:44:51
248
原创 CSS基础选择器
标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。<head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
2020-04-02 16:34:11
180
原创 CSS初识
CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。引入CSS样式表内联样...
2020-04-02 16:20:28
154
原创 form表单标签及控件
form标签定义及用法在html中，标签是使用来创建供用户输入的html表单，在网页中很常见，比如：注册和登录页面就是用表单实现的。一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。form标签中通常会有很多子元素，用来定义各种交互控件（文本字段、复选框、单选框、提交按钮等等），比如< input>、< button>、< sele...
2020-04-02 16:10:37
2938
1
原创 表格 table使用
表格 table表格是现在基本不常用的一种标签，前端行业前几年常用table来布局，处理、显示表格式数据。这不得不提起当年因为页面标准化启用DIV+CSS布局而造成各大页面重构的血雨腥风，感兴趣的同学自行百度。创建表格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...
2020-04-02 15:49:20
2006
原创 开发中的列表标签
列表标签容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是 整齐 、整洁、 有序无序列表 ul<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
2020-04-02 15:14:15
147
原创 开发中常用标签
段落标签把文字有条理地显示出来。<p> 文本内容 </p>换行标签某段文本强制换行显示，就需要使用换行标签。<br />div span标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
2020-04-02 14:49:25
244
原创 HTML文档类型及相关
文档类型<!DOCTYPE><!DOCTYPE html> /* 声明文档类型 */这是一个HTML5文档,而且HTML5的文档类型兼容很好(向下兼容的原则)html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。HTML标签的语义化标签语义化，就是指标签的含义。好处:1.去掉或样式丢失的时候能让页面呈现清晰的结构。2.屏幕阅读器（如果访客有视障）...
2020-04-02 14:00:01
274
原创 HTML标签分类及关系
HTML标签分类在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。1.双标签<body>我是文字</body>2.单标...
2020-04-02 13:45:00
1088
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人