盒模型 | CSS权重 | CSS层叠
span{ color:red;}
*{ font-family:"楷体";line-height:2em; font-size:18px;}
盒模型
CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间,即都包含边界、边框、补白、内容区域
网页中的大部分对象,实际呈现形式都是一个个盒子形状对象,页面都是由一个个盒子形状的区域拼合而成的。
盒模型关系到网页设计中排版、布局、定位等操作,任何元素都必须遵循盒模型规则。
包含:margin border padding content(内容)
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层叠的更多相关文章
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- 关于ie中实现弹性盒模型-我的css
css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...
- CSS:权重和层叠规则决定了其优先级
首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...
- 盒模型的垂直居中css
https://www.cnblogs.com/zhouhuan/p/vertical_center.html
- 每日分享!介绍Css 盒模型!
如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...
- 面试汇总——说一下CSS盒模型
本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...
- CSS概念 - 可视化格式模型(一) 盒模型与外边距叠加
可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...
- CSS弹性盒模型flex概念
盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...
- CSS入门之盒模型(六分之四)
盒模型要点知识 务必注意看,这可是前端面试 必定会遇到 的问题. box-sizing 盒模型的主要CSS属性,除继承外有两个值: content-box 这里不再细说历史原因,只说其作用. cont ...
随机推荐
- rem辅助式响应布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- dom 创建时间
下面讲述如何在页面生成一个装有日期的盒子 首先写出一个日期的函数进行赋值使用document.createElement创建一个文档节点div,然后将时间函数输出在div之中,利用document.b ...
- 【xinsir】函数库,持续更新
1.遍历文件-node // 递归遍历目录下的文件 function readDirSync (path) { var pa = fs.readdirSync(path); pa.forEach(fu ...
- 《Effective Java》 读书笔记(八)避免使用Finalizer和Cleaner机制
Finalizer和Cleaner并不等同于C++中的析构函数,是不确定多久会被调用的,甚至有时候可能不会被调用,因此除了作为一个安全网或者终止非关键的本地资源,不应该在Finalizer或Clean ...
- 关于路由器漏洞利用,qemu环境搭建,网络配置的总结
FAT 搭建的坑 1 先按照官方步骤进行,完成后进行如下步骤 2 修改 move /firmadyne into /firmware-analysis-toolkit navigate to the ...
- 长寿花:dp
当然可以打组合数+CRT什么的,但是其实不必那么麻烦. 先讲那个思路,再转化过来吧. 首先可以发现的一个问题:所有颜色之间是没有区别的,所以我们其实并不在意到底是哪几种,我们只需要知道有几种就可以了. ...
- Feign设置assessToken
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.an ...
- csps模拟测试70
又炸了,T1没开$long long$,炸掉$50pts$,昨天因为SB错误挂掉$100pts$. 我kuku了,以后细心点吧.
- P3043 [USACO12JAN]牛联盟Bovine Alliance——并查集
题目描述 给出n个点m条边的图,现把点和边分组,每条边只能和相邻两点之一分在一组,点可以单独一组,问分组方案数. (友情提示:每个点只能分到一条边,中文翻译有问题,英文原版有这样一句:The cows ...
- windows使用docker运行mysql等工具(一)windows安装docker
由于我本地的mysql版本比较低,最近想着要升级一下mysql版本,鉴于docker容器的火热,就想着在本地装个docker环境,然后下载最新版的mysql镜像,完成mysql8.0的安装.电脑是wi ...