![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+CSS
文章平均质量分 50
面试八股文
每天都在掉头发
这个作者很懒,什么都没留下…
展开
-
响应式布局
em:根据其父元素font-size进行计算rem:根据根元素(html)的font-size进行计算vm:根据可视化区域宽度和高度最小的计算,1vm=1%width||1%heightvw:根据可视化区域宽度计算,1vm=1%widthvh:根据可视化区域高度计算,1vm=1%height...原创 2021-07-21 16:56:00 · 84 阅读 · 0 评论 -
浏览器兼容性问题
HTML+CSS1.各浏览器标签的margin和padding的默认数值不同利用css对标签默认值进行统一2.块级元素float布局和margin一同使用时,margin的值比实际大一点(IE6)在float的标签样式控制中加入 display:inline;3.行内元素display:block,再使用float和margin,margin的值比实际大一点(IE6)在float的标签样式控制中加入 display:inline;4.透明度不兼容添加兼容性语句,每个浏览器单.原创 2021-07-19 13:39:58 · 332 阅读 · 1 评论 -
meta属性
简介meta标签主要用于定义页面的基础信息分类1.charset:编码类型<meta charset="utf-8" />2.name:信息名称3.http-equiv:信息名称,可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容4.content:信息内容name1.Keywords(关键字) 2.description(网站内容描述)3.author(作者)4.viewport(视口)5.copyright(版权信息)原创 2021-07-06 15:22:51 · 184 阅读 · 0 评论 -
CSS3动画
分类1.transition过渡2.transform转化3.animation动画transitiontransition能够实现一个状态到另一个状态的平滑过渡transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;transition: all 3s linear 0s;后两个属性可以省略过渡属性:all,none,weigth、height、color、background、border、margin、padding、top、left、ri原创 2021-06-28 10:53:36 · 212 阅读 · 0 评论 -
CSS效果实现
全屏滚动主体内容竖直向下排列,只展示100%的大小,设置overflow:hidden控制滚动的时候可以通过CSS3translation动画,maigin-top,position:absolute实现给内容添加一个事件,事件触发时页面的top值改变视差滚动效果页面向下滚动时,背景滚动速度比内容滚动速度慢1.CSS3方法background-attachment-- 定义背景图片随滚动轴的移动方式2.纯JS方法利用JS获取Top值,当页面滚动时,背景移动的距离是主.原创 2021-06-27 15:02:48 · 103 阅读 · 0 评论 -
CSS垂直居中
1.表格布局#wrapper { display: table; } #cell { display: table-cell; vertical-align: middle; }原创 2021-06-19 22:51:44 · 76 阅读 · 0 评论 -
CSS水平居中
行内元素div{ text-align:center; height:30px; line-height:30px}原创 2021-06-19 22:38:30 · 78 阅读 · 0 评论 -
三栏布局,两边固定,中间自适应
1.浮动 <style> .float .left{ float: left; width: 18.75rem; background: red; } .float .right{ float: right; width: 18.75rem.原创 2021-06-19 22:04:33 · 143 阅读 · 0 评论 -
Flex布局
容器属性:flex-direction主轴方向flex-wrap主轴换行flex-flow 方向和换行的缩写justify-content:主轴对齐方式align-items:交叉轴对齐方式align-content:多轴线对齐方式项目属性:order :项目排列顺序flex-grow:有多余空间时项目放大比例flex-shrink:有多余空间时项目缩小比例flex-basis:项目占据空间flex:放大、缩小、占据空间的缩写align-self:单独某个转载 2021-06-19 13:19:41 · 204 阅读 · 0 评论 -
BFC基本概念
BFC叫做块级格式化上下文,本质是在一个独立的渲染区域,单独规定区域内部的渲染规则。BFC的布局规则内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器,容器里面的.原创 2021-06-19 11:53:26 · 157 阅读 · 0 评论 -
HTML5新特性
(一) 语义标签(二)增强型表单/表单2.01)新的input type2)新的表单元素<input><textarea><select><option>....<datalist>:数据列表,为input提供输入建议列表<progress>:进度条,展示连接...原创 2021-06-18 16:03:32 · 111 阅读 · 1 评论 -
CSS3新特性
1.CSS3的选择器1)E:last-child 匹配父元素的最后一个子元素E。2)E:nth-child(n)匹配父元素的第n个子元素E。3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。2. @Font-face 特性Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。3. 边框圆角:border-radius边框颜色:border-color边框图片:border-原创 2021-06-18 14:58:34 · 167 阅读 · 0 评论 -
shadow
box-shadow属性向box添加一个或多个阴影。语法:box-shadow: offset-x offset-y blur spread color inset;1ox-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];1词解释:blur:模糊 spread:伸展 inset:内凹参数解释:offset-x:必需,取值正负都可。offset-x水平阴影的位置。offset-y:必需,取值正负都可。offset-y垂直阴影的位置。原创 2021-06-18 14:30:09 · 123 阅读 · 0 评论 -
background属性
background-color:背景色background-image:背景图片background-size:背景图片尺寸background-repeat:背景图片重复(repeat,repeat-x,repeat-y,no-repeat)background-position:背景图片位置background-attachment:背景图片是否固定不动background-clip:背景覆盖区background-origin:背景图片覆盖区...原创 2021-06-18 14:11:52 · 391 阅读 · 0 评论 -
清除浮动方法
1.父亲高度法(不推荐)给父盒子设置一个高度,这种方法不能进行页面的自适应2.额外标签法(不推荐)原创 2021-06-18 14:00:29 · 60 阅读 · 0 评论 -
HTML、CSS基本概念
1.行内元素和块元素行内元素:在同一行,宽高依据内容大小span原创 2021-06-16 15:35:32 · 173 阅读 · 0 评论