文档章节

前端的一些雕虫小技,从100%和滚动条说起

wphmoon
 wphmoon
发布于 11/17 12:13
字数 681
阅读 22
收藏 0

1、100%和滚动条

当我们在css中把html和body同时设为100%时,会出现滚动条

        html,
        body {
            width: 100%;
            height: 100%;
        }

原因是html和body之间有8px的margin,这个margin怎么来的呢,我们在chrome中用F12看一下

这个8px的margin来自于user agent stylesheet,那这个user agent stylesheet又是啥玩意呢,在mdn上面,我们可以看到

这里面说的用户代理样式就是user agent stylesheet,可见这是浏览器内定的样式,这个8px的margin就是流量拿起自己内定的。在css里面是有个内定的层叠顺序的,层叠顺序越大,级别越高,user agent stylesheet是属于最低级的样式,用户如果修改了margin,那么user agent stylesheet就无效了,这个顺序说明如下:

因为body设置成了widht和height都是100%,再加上margin的8px,这样它的上级容器html的width和height各加上了16px,就超出了100%,所以就出现了滚动条。

解决这个问题很简单,把这个8px的margin设置成0就行了

        body {
           margin: 0px;
        }

由于我们自定义的css的层叠级别比user agent stylesheet高,所以margin被设置成了0px,滚动条也就消失了

2、同级别的样式一决高下

如果是同一级别的样式,一般都是内联的样式要高于外嵌的样式,比如下面的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
           margin: 0px;
        }
    </style>
</head>

<body>

</body>

</html>

style.css的代码

body {
    margin: 1px !important;
 }

在页面和外部的css里面都设置了body的margin,但因为层叠优先级的问题,body的margin还是0。

如果我们想要改变这个顺序呢,如果大家仔细看上面出现过的这张图,就有答案了

使用!important就可以让外部css的优先级排到内联css前面,我们修改style.css试一下

body {
    margin: 1px !important;
 }

看下页面的情况

现在生效的已经是style.css里面配置的margin了。

那么什么情况下应该使用!important呢?

!important就像一种特殊手段,更像一种标识,表示这条css的配置很重要,不应该被其他css覆盖掉,所以切记不要随便用,只有必要时采用。下面是MDN总结的一些规则:

 

© 著作权归作者所有

wphmoon
粉丝 12
博文 37
码字总数 66394
作品 0
广州
高级程序员
私信 提问
从零开始学 Web 之 移动Web(四)实现JD分类页面

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/11
0
0
一些有趣的 CSS 魔法和布局(上)

前言 布局和样式,是每个前端的必修课。在日常的工作中,也会碰到一些特定场景的布局需求,配合上样式,就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局,以及浏览各大网站时碰巧...

Micherwa
03/25
0
0
用套路写页面(第二节)不定高边栏,子元素高度动态且相邻联动

目录: 5、左侧边栏(难度:3.5颗星) 5.1、原型分析 套路5:当高度/宽度为动态获取,且相邻联动的两个区域 5.2、左边栏上下区域划分 套路6:无痕滚动 5.3、按钮的 CSS 5.4、历史记录 5.5、总...

qq20004604
08/08
0
0
终于学会怎么写后台侧列表(隐藏滚动条)

终于学会怎么写后台侧列表(隐藏滚动条) 首先一个标准后台程序有三部分组成: 顶部条 左侧列表 右侧正文内容 现在要求如下: 左侧列表可以滑动,但不可见滚动条 左侧列表滑动时,顶部条不能...

sizeof
2016/06/17
236
0
vue-router 源码:路由模式

前言 前端的路由模式包括了 Hash 模式和 History 模式。 vue-router 在初始化的时候,会根据 来判断使用不同的路由模式,从而 new 出了不同的对象实例。例如 history 模式就用 ,hash 模式就...

cobish
2018/08/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 不要在领导修风扇的时候打开电扇

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :《Whats Up》 主唱妹子 Lina Perry 的嗓音实在太有力了,收放自如的自信才能唱出这么优秀的歌吧!#今日歌曲推荐# 《Whats Up》-...

小小编辑
今天
11
0
SpringBoot集成Elasticsearch并进行增删改查操作

一、创建工程 使用IntelliJ创建SpringBoot工程 SpringBoot版本为2.0.4 ElasticSearch为5.6.10 删掉蓝框中的文件(如上) 最后我们的目录结构(如下) 下面pom文件主要修改的是把spring boot从Int...

一字见心
今天
5
0
x001-版本介绍

python版本介绍 目前有2 和 3 有很多企业用的代码是2版本,随着技术的发展,以后用3的会成为大趋势 python3的安装 yum -y install wget gcc zlib-devel bzip2-devel openssl-devel ncurses-d...

侠客行之石头
今天
5
0
聊聊rocketmq的TransientStorePool

序 本文主要研究一下rocketmq的TransientStorePool TransientStorePool rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/TransientStorePool.java publi......

go4it
昨天
6
0
笔记

场外借贷, 质押 ,托管, 永续合约. 场外借贷,n签合同. 新功能 证券交易组负责中信证券机构及个人投资交易相关系统,服务机构及个人投资客户, 涉及到两融、期权、 期货、做市等境内境外创新业...

MtrS
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部