随笔分类 - CSS
摘要：简述 弹性布局是css3新引入的布局模式，英文是flexbox，他决定了元素如何在页面上排列，使他们能在在不同的屏幕尺寸和设备下可预测地展现出来。 本质就是一个盒子，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间 核心概念 大的容器盒子叫 flex container ，被包裹在
阅读全文
摘要：简述 SASS是一种CSS扩展语言，可以将SASS编译成css代码，使用sass能令CSS代码的编写过程更加便捷和模块化。 sass的本质可以说就是进一步模块化css，减少编写重复的css代码 sass的中文官网：https://www.sass.hk/ 使用变量 在sass中我们可以把反复使用的c
阅读全文
摘要：简述 在使用定位布局时，可能会出现盒子重叠的情况。 此时就可以使用z-index来控制盒子的前后次序(z轴)。 语法：选择器 { z-index: 1;} 数值可以是正整数、负整数或0，默认是auto，数值越大盒子越靠上 如果数值相同，则后来者居上，需要特别注意的是只有定位的盒子才有z-index属
阅读全文
摘要：简述 如果我们想让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置并且压住盒子的话，我们就需要定位了。 定位的本质也还是摆盒子，只不过按照定位的方式摆盒子。 定位 = 定位模式 + 边偏移 定位模式 定位模式决定了元素的定位方式，通过CSS的position属性值设置，值可以分为四个： 边偏
阅读全文
摘要：简述 如果有一个父盒子，里面有非常非常多的小盒子，多到页面要拉很下才看得到底，且每天都要往父盒子里塞新的小盒子，那么父盒子就不方便指定高度了。 如果一个父盒子分为左右两部分，但做优两部分实际内容不一样高，那么这个父盒子的高度就不容易给了。 所以我们渴求一种理想中的情况，不给父盒子高度，让盒子撑开父亲
阅读全文
摘要：浮动元素要和标准流的父盒子搭配 浮动元素多数情况是摆在父盒子里面的，不然就会以浏览器页面为基准浮动。 一个元素浮动了，理论上其他兄弟也要浮动 如果不浮动就不在同一行，或者被占据位置。 浮动的盒子不会影响前面的盒子，会影响后面的标准流盒子。
阅读全文
摘要：如果我们想要做这样的布局，该怎么做捏？ 和往常一样，我们先整个标准流的父盒子，然后在父盒子里划分成两块，用两个盒子填充 我们设计一个大盒子里面套两个小盒子，给他们设置宽高和背景色，给两个小盒子设置左浮动 这是效果图，我们可以知道左青龙只需放张图片即可，右白虎需要放很多小盒子 我们给right盒子里面
阅读全文
摘要：我们来看小米的大型导航栏模块 这个案例明显可以用浮动来做，整一个大的父类元素，然后分成左边和右边，左右没有间隙故可以设置为浮动 我们先写个标准流的父类盒子，设置宽高，背景色和居中 然后我们给左右盒子合理地划分空间，让他们的宽度加起来等于大盒子的宽度，之后将他们加上浮动 我们就可以看到大盒子的左右两部
阅读全文
摘要：浮动的特性 加了浮动的元素，会具有很多特性 1.浮动元素会脱离标准流(脱标) 2.浮动的元素会一行内显示并且元素顶部对齐 3.浮动的元素会具有行内块元素的特性 脱标 脱标最大特点就是浮动的盒子不再保留原来的位置 假设我们有两个盒子，现在把上面的盒子设置为浮动的 这样上面的盒子就不再保留原来的位置，下
阅读全文
摘要：简述 网页布局的本质——用CSS来拜访盒子，把盒子拜访到相应位置。 CSS提供了三种传统布局方式：普通流、浮动、定位。 我们还可以通过弹性盒子、网格改变CSS的布局。 标准流 标准流就是标签按照规定好默认方式排列。 1.块级元素会独占一行，从上到下排列 2.行内元素会按照顺序，从左到右顺序排列，碰到
阅读全文
摘要：在一些常见的网站，我们把鼠标移动到盒子，盒子下方就会浮现阴影 在CSS3中，我们可以使用box-shadow属性为盒子增加阴影 属性值如下： 我们实操一下，首先先准备一个盒子 首先是前两个参数，代表阴影在xy轴的位置，我们先看 0 0会是什么效果 可以看到阴影整齐地出现在盒子的外围，通过调整第一第二
阅读全文
摘要：在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角的了。 语法： 例如我现在有一个300*150 现在我们加入这句语法，指定圆半径为10px、 我们的边框就变成圆角的了 其原理就是在矩形的四个角放一个半径为你指定的圆，让矩形的边框沿着圆的边框走 如果是正方形，想要设置成一个圆，把数值修改
阅读全文
摘要：简述 如果我们要做一个前端的快报模块，我们该怎么设计呢？ 步骤 首先我们分析一下它的构成，我们可以划分为三个部分，一个超大的盒子，还有上下两个小部分 第一步我们设计我们的大盒子，我们起名叫box，设置它的宽度和高度，设置边框样式，然后让他水平居中 然后我们设计快报的头部，我们采用一个只有下边框的盒子
阅读全文
摘要：简述 如果我们想实现这样一个小米盒子案例，我们应该怎么做呢？ 首先我们来了解一下它的结构 它首先肯定是由一个大盒子包含起来的，这里用div实现，我们起名叫box 然后我们准备一张图片放在盒子上方，使用img标签即可 图片下面有一个文字评论，我们这里用段落标签即可，起名叫review 文字评价下面还有
阅读全文
摘要：简述 CSS的盒子模型本质上就是一个用于装html元素的盒子，它包括：边框、外边距、内边距和实际内容。content就是我们实际内容的html元素，border就是盒模型的边框，在边框内的距离就是内边距，在边框外的距离就是外边距。 如果你给盒子设置宽和高，设置的是content的宽和高，整个盒子的宽
阅读全文
摘要：简述 CSS有三个非常重要的特性：层叠性、继承性、优先级。 层叠性 相同选择器选择相同样式时，此时一个样式就会覆盖另一个冲突的样式。 层叠性主要解决样式冲突的问题。 层叠性原则： •样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。 •样式不冲突，不会层叠。 像这样红色就会被粉色覆盖。 继承
阅读全文
摘要：简述 通过CSS背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 背景颜色 background-color可以设置背景颜色值。属性值为transparent代表是透明，也可以设置其他格式的颜色。 背景图片 background-i
阅读全文
摘要：非常遗憾的是，CSS并没有提供文字垂直居中的代码。 但我们可以通过一个小技巧来实现——让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中 例如我们现在有个div宽为400，高为40 现在的效果是这样的，如果我们想要它居中 我们就让div文字的行高等于div的高度40，这样文字就垂直居中了
阅读全文
摘要：现在我们想做一个简单的小米商城侧边栏的效果，要求实现鼠标停放在每个矩形栏上就会变颜色，且可以访问链接 首先我们把7个链接写好 核心步骤可以分为两步，第一步我们可以把a标签转为块级元素，这样链接就可以独占一行，并且拥有宽度和高度。 第二部我们就可以给a标签设置背景颜色,这样就实现了目标效果
阅读全文
摘要：元素的显示模式 元素的显示模式就是元素以什么方式进行显示，比如div自己占一行，一行可以放多个span 我们可以把html标签分为两大类：块元素、行内元素 块元素 常见的块元素标签有h、p、div、ul、ol等，div是最常见的块元素 块元素的特点： •自己独占一行 •高度、宽度、外边距和内边距都可
阅读全文
