随笔分类 - 前端技术栈 / CSS
摘要：pc端 高度自适应下，PC中html、body设置高位100%，则html、body的height为可视窗口高，随可视窗口高度变化而变化。 如果不设置100%，高度是内容高度和视窗高度较大的一方 移动端 移动端下html、body设置高为100%，则高为设备高（移动设备的视口高为定值） 如果不设置1
阅读全文
摘要：原因 主要原因是css像素与物理像素的区别 首先说一个概念：dpr dpr,即device pixel ratio,设备像素比 不同的设备具有不同的像素比，dpr决定了由设备的多少个物理像素显示web css的一个像素 比如dpr为2时，设备上由2个像素表现css上的一个像素 解决1px borde
阅读全文
摘要：vw css3新特性，100vm代表设备宽，1vm代表设备视窗宽度的1% 在实际应用中，一般以设备宽375为基准来设置（有的项目是750），算出100px所对应的vw值，一般取26.667vw.据此设置根元素的font-size，再根据rem去布局，完成不同设备的适配 //视图宽度375 1vw =
阅读全文
摘要：Flex 是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为Flex布局 Flex布局包括外容器属性和项目属性 设置Flex布局之后，子元素的float、clear和vertical-align属性将会失效 弹性容器外及弹性子元素内是正常渲染的
阅读全文
摘要：媒体查询，语法如下，示例：当屏幕大于600小于900时样式生效： @media screen and (min-width:600px) and (max-width:900px) { body { background-color: red; } } 文本和字体： @font-face{ font
阅读全文
摘要：色彩渐变 div{ width: 200px; height: 200px; border-radius: 50%; /* 色彩到色彩渐变,默认从上到下 */ background: linear-gradient(#ff0000,#ffff00); /* 色彩渐变到什么方向，从左至右 */ bac
阅读全文
摘要：Sass 基于ruby的一种将脚本解析成CSS的脚本语言。也可以说是一种预处理语言。 Sass在css的语法基础上增加了变量、嵌套、混合、继承、导入等高级功能。 使用Sass与Sass样式库(如compass)有助于更好地管理样式文件，更高效开发项目。 sass不适用花括号和分号，不被广为接受 而s
阅读全文
摘要：浮动：实现传统页面布局的一种方式 特性： 浮动元素只会父影响元素和后面的元素 加浮动的元素会脱离文档流，不占空间 浮动元素会沿着父元素靠左或右排列 浮动元素之间会在父元素里横向排列,排列不下时会换行排列 如果子元素浮动而父元素没有设置高度，会造成高度坍塌 浮动元素没有块级和行级之分，浮动元素的dis
阅读全文
摘要：CSS样式的引入： 内部样式： 内部样式：写在当前页面style标签中的样式 内联样式：写在style属性中的样式 外部样式： link标签引入的CSS文件 @import引入的CSS文件，需要写在css标签中，属于css2.1,只有IE5以上才能识别，不建议使用 <!-- rel用于指定资源和页面
阅读全文
