随笔分类 - 前端学习
摘要：Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它没有去掉任何 CSS 的功能，而是在现有的语法上扩充了 CSS 语言，增添了许多额外的功能特性，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 1、引入less 方式一、 npm in
阅读全文
摘要：一、水平居中 1、行内元素 如果父元素是块级元素且里面包含行内元素，则直接给父元素设置 text-align: center。 .center{ text-align:center; } <div class="center">水平居中</div> 2、块级元素 2.1、定宽块级 给需要居中的块级元
阅读全文
摘要：<div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> </div> 最外层的<div>元素就是容器，内层的三个<div>元素就是项目。 设为网格布局以后，容器子元素（项目）的float、display: inline-bl
阅读全文
摘要：权值等级划分， 一般来说是划分4个等级： 第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0； 第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0； 第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:ta
阅读全文
摘要：一、原理与特点： 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 flex布局，子元素的float、clear和vertical-align属性将失效。 任何一个容器都可以被指定为flex布局。 flex 布局中不会出现外边距合并问题。 二、父项属性 1、flex-direction：
阅读全文
摘要：一、预备知识 定位=定位模式+偏移，可以让盒子自由在某个盒子内移动位置或固定在屏幕中某个位置，并且可以压住其他盒子。 static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。 二、相对定位 relative表示，相对于默认位置（即static时
阅读全文
摘要：一、浮动布局 1、浮动起初为文字环绕效果设计，会把文字挤出去。 2、浮动元素具有行内块元素特性，原本块级盒子未设置宽度默认和父级一样宽，但添加浮动后宽度由内容决定。 3、浮动盒子间没有缝隙，如果一行装不下，多出的会换行对齐。 4、浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。 <sty
阅读全文
摘要：一、传统盒子模型content-box 内容区域宽：width 内容区域高：height 如果内边距增大了，整个盒子也是增大的，那么要保持整个盒子不变大的话，就要减小宽读或者高度，即内容区的宽度或者高度。 二、CSS3盒子模型border-box 盒子的宽：width 盒子的高：height 指定w
阅读全文
摘要：一、块级元素 特征： 独占一行 高度，宽度，外边距及内边距可控制 宽度默认是父级的100% 里面可放行内或块级元素 注意：文字类元素内不能使用块级元素如<p></p> 二、行内元素 特征： 相邻行内元素在一行上，一行显示多个 高、宽直接设置无效 默认宽度即本身内容宽度 行内元素只能容纳文本或其他行内
阅读全文
