CSS继承性+层叠性+盒子+浮动
CSS继承性
层叠性
2.1
- 如果元素被选中了,那么就可以使用权重公式来计算大小,大的将被使用。如果一样大小,则谁写在了后面就使用谁。
- 如果元素没有被选中,则通过继承的方式传递样式,这时权重可以看做为0. 这种情况下我们使用就近原则,就近原则:谁靠着该元素近那么就选谁。
- 如果元素没有被选中,并且距离元素都一样近,这时我们又可以使用权重计算公式。 如果权重一样大小,则谁写在了后面就使用谁。
2.2
2.3
- 它只针对于属性有效,需要注意正确的书写方式,写在分号内。
- 它无法提升继承性的选择器权重(也就是未选中该属性的选择器),该是0还是0
- 它不影响就近原则。
盒子模型
3.1盒子
3.2padding内边距
- padding:20px; 代表上右下左四个方向都是20像素的边距
- Padding:20px 30px;第一个数字是上下方向的大小,第二个数字是左右方向的大小
- Padding:20px 30px 40px;第一个数字是上方向的大小,第二个数字是左右方向上的大小,第三个是下反向的边距大小
- Padding:10px 20px 30px 40px;这分别是四个方向上的边距大小。
3.3border边框
标准文档流
4.1
- 排布的顺序为从左到右,从上到下。
- 空白折叠现象,如果html语言中有换行或者空格、缩进都会替换为空格在网页中显示。
- 在同一行中,底部基线对齐。
- 文本自动换行。
4.2
浮动
- 脱离标准文档流被叫做脱流,同时会出现字围现象。我是老二没有被盖住!!
- 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一个元素会紧靠前一个元素。如果父容器空间不够大,那么元素会找上级的上级去紧靠,如果还找不到则继续找上级紧靠,没有了上级可靠那就靠边。
- 浮动的元素不分块级和行内类别,也就是说都可以设置宽高可边距。
- 浮动以后,同一行内的元素以顶边作为基线对齐。
CSS继承性+层叠性+盒子+浮动的更多相关文章
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- 【CSS】我的颜色到底听谁的?—— css的层叠性
我们之前学了很多个选择器,都可以帮我们定位到具体标签上,然后我们在设置样式.但这也不可避免会产生一个问题:如果多个选择器同时指向同一个标签,那么到底该听谁的??? css一定有自己的机制来处理这个问题 ...
- 关于css中层叠性的一点理解
关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...
- css的层叠性+继承性+优先级+权重
一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继 ...
- python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809
---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...
- CSS样式----CSS的继承性和层叠性(图文详解)
CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...
- CSS样式----CSS样式表的继承性和层叠性(图文详解)
本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...
- css 05-CSS样式表的继承性和层叠性
05-CSS样式表的继承性和层叠性 #本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签,携带了多个类名 !important标记 ...
- 前端----css的继承性和层叠性
css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是 有一些属性是可以继承下来的: color , font ...
随机推荐
- [Usaco2007 Jan]Running贝茜的晨练计划[一般DP]
Description 奶牛们打算通过锻炼来培养自己的运动细胞,作为其中的一员,贝茜选择的运动方式是每天进行N(1 <= N <= 10,000)分钟的晨跑.在每分钟的开始,贝茜会选择下一 ...
- vj1011:记忆化搜索
vj1011:记忆化搜索 这题就是很简单的记忆化搜索即可,和经典题目滑雪简直一模一样 对于记忆化搜索,我也是暑假看了ccy大神的题解才有所领悟的 其实也就是DFS+mark 主要的部分 int sea ...
- JS函数实现金额小写转大写
///<summery>小写金额转化大写金额</summery> function AmountLtoU(amount) { if (isNaN(amount) || amou ...
- PureMVC(JS版)源码解析
PureMVC(JS版)源码解析:总结 PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写 ...
- .net postsharp编译时生成的代码?
使用PostSharp进行AOP框架设计:一个简单的原型 AOP已经不是一个什么新名词了,在博客园使用关键字搜索可以查出n多条关于AOP的介绍,这里就不再赘述了. 在Bruce Zhang's B ...
- 简单的HTTP过滤模块
简单的HTTP过滤模块 一.Nginx的HTTP过滤模块特征 一个请求可以被任意个HTTP模块处理: 在普通HTTP模块处理请求完毕并调用ngx_http_send_header()发送HTTP头部或 ...
- Entity Framework实体模型 入门视频教程
Entity Framework实体模型 入门视频教程 恢复内容开始--- 第一步 创建一个 控制台应用程序 第二步 创建一个ADO.NET 数据实体模型 DbModel.edmx 需要跟数据库进行连 ...
- 前端基于easyui的mvc扩展(续)
前端基于easyui的mvc扩展(续) 回顾及遗留问题 上一篇讲解了基于easyui的mvc扩展的基本实现,已经降低了在mvc内使用easyui的难度,但是仍然还有一些问题: 当我们要给生成的控件设置 ...
- Ubuntu12.04 Eclipse 提示框背景色修改
I had to edit these files: /usr/share/themes/Ambiance/gtk-3.0/settings.ini /usr/share/themes/Ambianc ...
- struts2标签库使用小结
之前的demo中用了一些struts2标签,用的是struts2.2.1.1. Struts2的标签常常和OGNL(图对象导航语言)一起使用.有几点总结如下: [引用请注明出处:http://blog ...