CSS
关注
分享
扫一扫
文章平均质量分 86
小火柴FE
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS实现全屏“品”字布局
1.grid布局实现 这种方式不容易想到，但是现在主流浏览器已经支持grid布局了，所以以后可以考虑考虑。 实现思路： 给容器设置等宽两列，根据grid默认布局“先行后列”特点，此时会展示成这样： 接下来只要让第一个项目/元素（item）占满一列就可以了，设置垂直网格线的起始位置就可以了（两列在垂直方向上有3条网格线）。 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset原创 2021-09-13 21:51:04 · 708 阅读 · 0 评论 -
offset、client、scroll、screen、page五大系列的区别（三）
接上两篇文章，前面已经讲了offset系列和client系列，这篇文章主要讲scroll系列 scroll系列 ①scrollWidth / scrollHeight 元素内容实际宽度 / 高度（不包括border） 分两种情况： 这个元素内容的宽度 or 高度 没有超过这个元素的宽 or 高，那么scrollWidth / scrollHeight指的就是这个元素的width + pad...原创 2019-06-12 22:19:42 · 855 阅读 · 1 评论 -
css三栏布局中常用的方法
css页面布局几种常用的方法介绍 题目介绍：假设高度已知，请写出三栏布局，其中左栏和右栏的宽度是300px，中间自适应 题目来自慕课网课程《前端跳槽面试必备技巧》，代码大致结构并未大幅改动，以下是我的总结。 ①浮动 方案：左边盒子左浮动，右边盒子右浮动，设置宽度 页面结构：可以作为后面例子的结构，只需把h1标签中文字改成对应的解决方案即可 <section class="layout...原创 2019-06-13 09:13:58 · 235 阅读 · 0 评论 -
css盒模型(BFC)
css盒模型 来源于慕课网课程《前端跳槽面试必备技巧》的笔记总结，若有错误，欢迎指正。 基本概念：标准模型 + IE模型 标准模型：width / height 指的是content的宽 / 高，不包括padding和border IE模型：width / height 指的是 padding + content + border css如何设置这两种模型 可以通过css3的box-si...原创 2019-06-13 11:28:19 · 209 阅读 · 0 评论 -
offset、client、scroll、screen、page五大系列的区别（一）
offset、client、scroll、screen的区别 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); ...原创 2019-06-08 21:15:39 · 3108 阅读 · 0 评论 -
offset、client、scroll、screen、page五大系列的区别（二）
上一篇主要讲述了offset系列，篇幅过长，所以每个系列单独放一篇文章吧，css代码和上一章节是一样的 client系列 ①clientX和clientY 获取鼠标指针位置相对于可视区域的 x 坐标和y坐标，也就是说是相对于浏览器的距离，跟触发事件的对象没关系 代码如下： div1.onclick = function (e) { e = window.event || e; //...原创 2019-06-08 21:57:04 · 970 阅读 · 0 评论 -
CSS中的占位布局
前言 占位布局大部分应用到移动端中，因为移动设备屏幕各有所异，所以需要自适应布局，自适应布局有很多种，今天就讲讲占位布局 业务场景 比如在一个vue项目中，我需要做一个类似于去哪儿APP的图标导航以及轮播图，如下： 那么有两个问题： 1.如果网速过慢上面的轮播图没有加载出来，那么如何保证后面的元素不往前靠，防止抖动？ 2.如何保证移动端不同屏幕的自适应？ 解决方案 留个“坑”，设置比例就可以了 ...原创 2019-07-07 10:03:49 · 1233 阅读 · 0 评论 -
纯CSS实现选项卡
这款选项卡是没有任何JS的，而是通过锚点以及伪类来实现。 HTML： <div class="news-btn"> <a href="#news1">news1</a> <a href="#news2">news2</a> <a href="#news3">news3</a&g...原创 2019-09-14 17:45:02 · 274 阅读 · 0 评论 -
CSS声明的优先级
前言 看到网上大部分文章讲的是CSS选择器优先级，其实并不准确。应该称之为CSS声明的优先级，请听我道来。 在此之前先题个问题：CSS是又什么组成的？ 很多人会觉得这个问题很简单经常被忽略，包括我自己。大部分人应该知道它的引入方法和写法，不就是写样式吗？ 基本概念 其实CSS是由一系列的规则组成，规则又由选择器和声明块来组成，再细化就是，声明块就是我们平时所写的属性和值所构成的声明组成的。总结如下...原创 2019-09-16 17:39:25 · 190 阅读 · 0 评论