阳光下的冷静的博客

网格布局详解

Transition过渡：CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标点击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。如何创建过渡transitionCSS3过渡与元素上的常规样式一起声明。只要目标属性改变，浏览器就会应用过渡，可以通过一些伪类来触发，如:hover，:focus，:active，:tar...

关于图片格式，类型的详解

前端的性能优化主要分为三部分： HTML优化避免 HTML 中书写 CSS 代码，因为这样难以维护。使用Viewport加速页面的渲染。使用语义化标签，减少 CSS 代码，增加可读性和 SEO。减少标签的使用，DOM解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数。避免 src、href等的值为空，因为即时它们为空，浏览器也会发起 HTTP 请求。...

CSS常见的属性前缀

双边距BUG float引起的 使用display 像素问题 使用float引起的 使用dislpay:inline -3px 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active z-index问题 给父级添加position:relative Png 透明 使用js代码 Min-height 最小高度 ！Important 解决’ s...

https://blog.csdn.net/github_34514750/article/details/51065282

HTML5新增的标签：article : 文章 caption ：表头文字 video ： 视频 header：头部 footer ： 底部 section ：区域 nav：导航 aside：侧边栏 progress：进度条 audio：音频 mark:页面突出部分 canvas:' 图形 command：命令按钮 time： 时间 content: 内容注：H5...

https://blog.csdn.net/qq_40072782/article/details/82927573

https://blog.csdn.net/WinstonLau/article/details/88409967?tdsourcetag=s_pcqq_aiomsg

一，不能继承的属性display：规定元素应该生成的框的类型 文本属性 vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向盒子模型的属性：width、height、margin 、...

为什么要引入伪类与伪元素？css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。什么是伪类，伪元素？伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以...

移动端布局分类移动端的布局主要分为四类，分别是流式布局，rem布局，响应式布局和弹性布局。 流式布局（百分百布局）：定义：使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固 定像素的限制，内容向两侧填充。优点：px(绝对单位)做css单位,这样的布局可以适配移动端不同的分辨率设备，在大屏小屏自动适应,特别适合于电商...

在CSS中盒模型被分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width，height，padding，和border以及元素实际尺寸的计算关系，不同之处是两者的计算方式不一样。 W3C的标准盒模型外盒尺寸计算(元素空间尺寸)element 空间高度 = 内容高度 + 内距 + 边框 + 外距element 空间宽度...

盒模型问题在IE5.x以及IE6~7的怪异(Quirks)模式下，边框和内距都包含在宽度或高度以内。而在标准的浏览器中，宽度和高度仅仅包含内容的高度或者宽度，除去了边框和内距两个区域，这样势必给Web设计师处理效果增添了很多的麻烦box-sizing属性为了解决上述的问题，CSS3添加了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。 语法： box-sizing:...

一行css代码搞定响应式布局

相对定位之后的行内元素是依然不可以设置宽高的，需要加display:block设置；但是绝对定位后的行内元素就可以直接设置了。（这里说的设置是指width生效，而不是单纯的写上了而已）注：html中有一类元素比较特殊，虽然他们属于行内元素，但是他们是可以设置宽高的，如img|input|select|textarea|button|label等，他们被称为可置换元素（Replacedelem...

css3动画与js动画的区别

隐藏一个元素可通过css属性设置，有三种不同的方法，每一种方法之间有不同的区别，如下：opacity:0：隐藏元素，但是不会改变布局，即元素还是会占位置；相应的在该元素上绑定的事件还是会触发visibility:hidden：隐藏元素，但是不会改变布局，即元素还是会占位置；相应的绑定的事件不会触发display:none：隐藏元素，但改变了布局，元素不占位置，相当于删除了元素...

display这个属性主要可以取三个不同的值，分别为：block, inline , inline-block 分别对应着块级元素，行内元素和内联元素。三种不同的元素的区别如下：block ：前后有换行符；可设置宽高 margin padding,但即使设置了宽高，仍然是独占一行inline：设置宽高无效，宽高主要根据内容决定；margin padding在竖直方向无效，但在水平方向有效；前...

前端最全面经

相邻的两个inline-block节点之间的间隔问题解决方法

2019CSS经典面试题

<div class="parent"> <div class="child"></div></div>方法1：div.parent { display: flex; justify-content: center; align-items: center;}方法2：div.parent { pos...

前端基础问题总结

CSS常见布局设计

Flex布局是什么？Flex是Flexible Box的缩写，意思是“弹性布局”，该布局是来为盒状模型提供最大的灵活性。使用Flex：任何一个容器都可以指定为Flex布局： display:flex 行内元素也可以使用Flex布局: display:inline-flex Webkit内核的浏览器，必须加上-webkit前缀： display: -webkit-flex...

什么是媒体查询？媒体查询是移动端和pc端共有的，一种针对响应式容器下，不同的屏幕区间设置不同布局和样式的技术使用媒体查询：使用媒体查询的目的是在不同大小屏设备下，设置不同的样式。主要是在css样式中设置代码：@media screen and (min-width: 最小宽度 ) and (max-width: 最大宽度){属性样式}媒体查询案例：案例要求：在超小屏...

流式布局概念：流式布局，顾名思义就是流动的布局，随着屏幕窗口的大小页面的内容像水一样的流动，但不影响整体的布局。简单的来说就是百分比布局，非固定像素，内容向两侧填充的一种布局。流式布局应用：流式布局的使用已盛行it界许久了,可谓随处可见,随时可见。常见的有淘宝网，慕课网等其他的学习网站都有，尤其是移动端，几乎每个移动端的项目都用到了流式布局。流式布局适配分析：流式布局的使用，主...

cursor属性:定义了鼠标指针放在一个元素边界范围内时所用的光标形状设置不同的属性值会出现不同的效果： 文本：例如一段文字，鼠标放上去，鼠标变成不同的形状cursor:default -->默认的是箭头的形状 cursor:move -->让鼠标样式变成移动的样式（十字架） cursor:text -->让鼠标样式变成选择(一个大...

为什么要清除浮动：清除浮动的本质主要是为了解决父级元素由于子级浮动引起内部高度为0 的情况例如下面代码，没有使用清除浮动的效果<div class="father clearfix"> <div class="big"></div> <div class="small"></div></div>&l...

CSS易忽略点：标准盒子模型：盒子的总宽度=左右margin+左右border+左右padding+width h1标签默认情况下，形成“加粗，大号文字”的效果 html5新增的标签：article caption video header footer section nav H5中场用到的新特行性有：canvas:用于定义图形（图表等），只是图形容器，必须使用脚本来绘制图形     ...

在一些大型的项目中，类似“微金所”等，在首页通常需要有一些属于自己的字体图标，这时需要在项目中创建fonts文件夹，放入几个必须的文件，如下图：想要下载fonts文件，点击字体图标文件fonts下载哦，取货码：uh3l。 将上面下载的fonts文件夹放在项目目录中，想要用到这个还需要在相应的样式文件中写入以下代码：/*1 通过@font-face定义自己的字体*/@font...

水平居中 情景1： 父元素和子元素都是块级元素，比如两个都是div，要求子元素处于水平居中 设置：都只需要在子元素的样式中添加代码： 方法&lt;1&gt;margin: 0 auto; 方法&lt;2&gt; position: relative; margin: auto; left: 0; right: 0; ...

为什么要使用定位：          使盒子可以在屏幕任何位置上动定位分类：                       定位主要包括定位模式和边偏移两部分，边偏移是告诉盒子该往哪边走（上下左右），定位模式是告诉盒子采用什                         么样的定位方式，相对 绝对 静态 固定等。定位模式：静态定位的唯一用处是用来取消定位； 相对定位是以自己的...

什么是CSS精灵技术：css精灵技术，是一种处理网页背景图片的方式,简单来说就是将很多的小图集中在一张大图上，当要使用每一张小图的时候，就直接将大图作为背景，截取小图的部分即可。CSS精灵技术作用：为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度(将若干个小图集中到一张大图上的过程，这样加载一张大图就加载了所有的小图，避免多次请求服务器)。CSS精灵技术应用场景：主要是做背景定...

滑动门技术：主要用来设计导航条，使它能够根据导航条菜单文本长度自动地调节宽度，这样可以用简单的背景小图来实现炫彩的导航条风格，大大减少网页的载入内容。如使用如下的图to.png：做一个小的导航条，代码如下：&lt;style type="text/css"&gt; a { text-decoration: none; margin: 100px; h...

文字溢出：有时候一个文本框中的文字太多，但文本框有设定的宽度，这是会出现文字溢出的现象，例如一个li中文本数量较多，但li有自己的宽度，就会导致下面的情景&lt;li&gt;文字内容文字内容文字内容文字内容文字内容文文字内容文字内容&lt;/li&gt;li{ list-style: none; width: 200px; height: 30px; line-height:...

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，为了兼容所有的浏览器，需要一些解决办法。最简单的办法：（不推荐使用）*{margin: 0;padding: 0;}...

页面布局的方式：双飞翼、多栏、弹性、流式、瀑布流、响应式布局 双飞翼布局  经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：三列布局，中间宽度自适应，两边定宽；  中间栏要在浏览器中优先展示渲染；  ...