span{ color:red;}
*{ font-family:"楷体";line-height:2em; font-size:18px;}

盒模型

CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间,即都包含边界、边框、补白、内容区域

网页中的大部分对象,实际呈现形式都是一个个盒子形状对象,页面都是由一个个盒子形状的区域拼合而成的。

盒模型关系到网页设计中排版、布局、定位等操作,任何元素都必须遵循盒模型规则。

包含:margin border padding content(内容)

![](https://img2018.cnblogs.com/blog/1481359/201912/1481359-20191203084842171-1368111860.png)

padding(内边距)

设定页面中一个元素内容到元素边缘(边框)之间的距离

规定了内容到达元素边缘的位置关系

规定了子元素与父元素的位置关系

注* Padding是添加在原有的大小之上的,若想保持元素大小不变,需从元素的原有大小上减去后添加的padding值

border(边框属性)

语法:border:边框宽度 边框风格 边框颜色

border-style:设定边框风格 border-style:none(无)/solid(实现)/dotted(点划线)/dashed(虚线)/double(双线)

border-width:设定边框宽度 border-width:数值 单位px

border-color:设定边框颜色 border-color:颜色

边框类型:(不常用属性值)groove定义3D凹槽边框 ridge定义3D垄状边框 inset outset定义3D边框(都取决于边框颜色)

margin(外边距,外补丁)

设定一个元素所占空间的边缘(边框)到相邻元素边框的距离

四个值:上 右 下 左

三个值:上 左右 下

两个值:上下 左右

一个值:四个方向

margin-top解决办法(三种)

给父元素添加overflow:hidden;

给父元素添加盒模型相关属性(border)

给其中一个元素添加浮动

补充说明

margin总是透明的,padding也是透明的,但padding受背景影响,能够显示背景色或背景图。

margin可以定义负值,但border和padding不支持负值。

如果需要,每一条可见边框都可以定义不同的宽度,但前提是要定义border-style属性为可见样式。

每一个盒子所占页面区域的宽度和高度等于margin外沿的宽度和高度。

浏览器窗口是所有元素的根元素,也就是说html是最大的盒子,也有浏览器把body看作是最大的盒子。

盒模型尺寸

盒子的实际大小(公式)

    宽:左右margin+左右border+左右padding+width
高:上下margin+上下border+上下padding+height

CSS权重

    类型选择符的权重为:0001
类(CLASS)选择符的权重为:0010
ID选择符的权重为:0100
子选择符(E>F)的权重为:0000
属性选择符的权重为:0010
伪类选择符的权重为:0010
伪元素选择符的权重为:0001
包含选择符的权重为:包含的选择符权重值之和
内联样式的权重为:1000
继承的样式的权重为:0000

CSS层叠

css层叠指的是样式的优先级,当产生冲突时以优先级高的为准。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

!important作用是提高指定CSS样式规则的应用优先权

层叠与权重的关系:

层叠是css的一个特性,如果两个相同的属性作用于同一标签,它们会发生层叠。

如果多个复合选择器,同时作用于我们的同一标签,优先级就不好计算了,就要计算权重,通过比较权重,来先出优先级最高的选择器

盒模型 | CSS权重 | CSS层叠的更多相关文章

  1. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  2. 关于ie中实现弹性盒模型-我的css

    css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...

  3. CSS:权重和层叠规则决定了其优先级

    首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...

  4. 盒模型的垂直居中css

    https://www.cnblogs.com/zhouhuan/p/vertical_center.html

  5. 每日分享!介绍Css 盒模型!

    如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...

  6. 面试汇总——说一下CSS盒模型

    本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...

  7. CSS概念 - 可视化格式模型(一) 盒模型与外边距叠加

    可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...

  8. CSS弹性盒模型flex概念

    盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...

  9. CSS入门之盒模型(六分之四)

    盒模型要点知识 务必注意看,这可是前端面试 必定会遇到 的问题. box-sizing 盒模型的主要CSS属性,除继承外有两个值: content-box 这里不再细说历史原因,只说其作用. cont ...

随机推荐

  1. rem辅助式响应布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. dom 创建时间

    下面讲述如何在页面生成一个装有日期的盒子 首先写出一个日期的函数进行赋值使用document.createElement创建一个文档节点div,然后将时间函数输出在div之中,利用document.b ...

  3. 【xinsir】函数库,持续更新

    1.遍历文件-node // 递归遍历目录下的文件 function readDirSync (path) { var pa = fs.readdirSync(path); pa.forEach(fu ...

  4. 《Effective Java》 读书笔记(八)避免使用Finalizer和Cleaner机制

    Finalizer和Cleaner并不等同于C++中的析构函数,是不确定多久会被调用的,甚至有时候可能不会被调用,因此除了作为一个安全网或者终止非关键的本地资源,不应该在Finalizer或Clean ...

  5. 关于路由器漏洞利用,qemu环境搭建,网络配置的总结

    FAT 搭建的坑 1 先按照官方步骤进行,完成后进行如下步骤 2 修改 move /firmadyne into /firmware-analysis-toolkit navigate to the ...

  6. 长寿花:dp

    当然可以打组合数+CRT什么的,但是其实不必那么麻烦. 先讲那个思路,再转化过来吧. 首先可以发现的一个问题:所有颜色之间是没有区别的,所以我们其实并不在意到底是哪几种,我们只需要知道有几种就可以了. ...

  7. Feign设置assessToken

    import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.an ...

  8. csps模拟测试70

    又炸了,T1没开$long long$,炸掉$50pts$,昨天因为SB错误挂掉$100pts$. 我kuku了,以后细心点吧.

  9. P3043 [USACO12JAN]牛联盟Bovine Alliance——并查集

    题目描述 给出n个点m条边的图,现把点和边分组,每条边只能和相邻两点之一分在一组,点可以单独一组,问分组方案数. (友情提示:每个点只能分到一条边,中文翻译有问题,英文原版有这样一句:The cows ...

  10. windows使用docker运行mysql等工具(一)windows安装docker

    由于我本地的mysql版本比较低,最近想着要升级一下mysql版本,鉴于docker容器的火热,就想着在本地装个docker环境,然后下载最新版的mysql镜像,完成mysql8.0的安装.电脑是wi ...