CSS继承性+层叠性+盒子+浮动
  1. CSS继承性

<style>
        div{
            color: pink;
            font-size: 30px;
            width: 500px;
            background: green;
            padding: 100px;
            
        }
        p{
            color: red;
        }
    </style>
<div>
        <p>我们都是好孩子</p>
        <ul>
            <li>
                <p>我们都是栋梁之才</p>
            </li>
        </ul>
    </div>
通过以上的代码。,我们可以看到p标签继承了div设置的样式。
继承不仅仅是子代,可以是子代的子代。可以一直延续。
继承是有原则的:一般是color、text—、font-、line- 这些属性。
  1. 层叠性

2.1

在css中有许多的重叠样式,在众多的样式中选择元素需要的那一个。那么该如何去选择呢? 在浏览器的内核中有着严谨的权重计算公式,通过权重计算公式去选择需要的样式。
权重公式:id选择器,类选择器,标签选择器  优先级依次减小。
  1. 如果元素被选中了,那么就可以使用权重公式来计算大小,大的将被使用。如果一样大小,则谁写在了后面就使用谁。
  2. 如果元素没有被选中,则通过继承的方式传递样式,这时权重可以看做为0. 这种情况下我们使用就近原则,就近原则:谁靠着该元素近那么就选谁。
  3. 如果元素没有被选中,并且距离元素都一样近,这时我们又可以使用权重计算公式。    如果权重一样大小,则谁写在了后面就使用谁。

2.2

.two{
            color: green;
        }
        .one{
            color: red;
        }
<p class="one two" id="haha">我们都在学习H5</p>
以上这种情况,是按照样式的先后去选择。与html中元素设置的class属性名字前后顺序无关。

2.3

!Important :提升属性的优先级。
#haha{
            color: orange;
            font-size: 20px;
        }
        p{
            color: blue !important; 提升属性的优先级
            color: blue; !important;
            font-size: 14px;
        }
/*不影响就近原则*/
        .heiheihei{
            color:yellow !important;
        }
        .xixi{
            color: skyblue;
        }
需要注意三点:
  1. 它只针对于属性有效,需要注意正确的书写方式,写在分号内。
  2. 它无法提升继承性的选择器权重(也就是未选中该属性的选择器),该是0还是0
  3. 它不影响就近原则。
  1. 盒子模型

3.1盒子

盒子包含5个元素:width、height、padding、border、margin

Width:一定要注意width是内容的宽度。
Height:注意height是内容的高度。
Padding:内边距,内容与边框之间的间隙
Border:边框
Margin:外边距,相对于内边距记忆。边框外部的间隙

3.2padding内边距

Padding有四种书写方式:
  1. padding:20px; 代表上右下左四个方向都是20像素的边距
  2. Padding:20px 30px;第一个数字是上下方向的大小,第二个数字是左右方向的大小
  3. Padding:20px 30px 40px;第一个数字是上方向的大小,第二个数字是左右方向上的大小,第三个是下反向的边距大小
  4. Padding:10px 20px 30px 40px;这分别是四个方向上的边距大小。
Padding边距的另一种写法形式
        padding-top: 10px;
        padding-right: 70px;
        padding-bottom: 80px;
        padding-left: 90px;
分别写四个方向上的边距大小。

3.3border边框

Border的写法:
border: 10px solid #567;
三个属性分别代表了:宽度、样式、颜色; 颜色是可以省略的默认为黑色,但是其它两个属性是不可以省略的。
线条样式:有很多种,举例:solid实线 dashed虚线 outset突出感 inset凹
            border-width: 10px;
            border-style: dashed;
            border-color: #567;
单独写边的宽度、样式以及颜色。这样写还是四条边共用。
border-top: 10px solid red;
            border-right: 5px solid yellow;
            border-bottom: 15px solid blue;
            border-left: 20px solid #789;
这是分别给每一条边设置宽度、样式和颜色。
border-top-style: dashed;
这是顶边设置样式属性,也就是说每一条边每一种属性都可以单独去写。
  1. 标准文档流

4.1

标准文档流中的几种现象:
  1. 排布的顺序为从左到右,从上到下。
  2. 空白折叠现象,如果html语言中有换行或者空格、缩进都会替换为空格在网页中显示。
  3. 在同一行中,底部基线对齐。
  4. 文本自动换行。
根据标准文档流将标签分为两种类型:
块级标签:独占行,可以设置宽高以及边距,一般可以放任意内容(P标签除外)。
行内标签:可以在一行内显示,不可以设置宽高以及某些间距,一般是文本级标签(p除外)。

4.2

在标准文档流中,也可以实现块级元素与行级元素的身份互换。只需要通过display属性进行互换
Display:block;设置为块级元素
Display:inline;设置为行内级元素
Display:inline_block; 设置为行内块级元素。行内块级元素:在行内显示,不独占行。并且可以设置宽高和边距。
  1. 浮动

浮动就是让我们的元素脱离标准文档流,目的是为了布局好看!
浮动的现象:
  1. 脱离标准文档流被叫做脱流,同时会出现字围现象。我是老二没有被盖住!!

  1. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一个元素会紧靠前一个元素。如果父容器空间不够大,那么元素会找上级的上级去紧靠,如果还找不到则继续找上级紧靠,没有了上级可靠那就靠边。

  1. 浮动的元素不分块级和行内类别,也就是说都可以设置宽高可边距。
  2. 浮动以后,同一行内的元素以顶边作为基线对齐。

CSS继承性+层叠性+盒子+浮动的更多相关文章

  1. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  2. 【CSS】我的颜色到底听谁的?—— css的层叠性

    我们之前学了很多个选择器,都可以帮我们定位到具体标签上,然后我们在设置样式.但这也不可避免会产生一个问题:如果多个选择器同时指向同一个标签,那么到底该听谁的??? css一定有自己的机制来处理这个问题 ...

  3. 关于css中层叠性的一点理解

    关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...

  4. css的层叠性+继承性+优先级+权重

    一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继 ...

  5. python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809

    ---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...

  6. CSS样式----CSS的继承性和层叠性(图文详解)

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

  7. CSS样式----CSS样式表的继承性和层叠性(图文详解)

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  8. css 05-CSS样式表的继承性和层叠性

    05-CSS样式表的继承性和层叠性 #本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签,携带了多个类名 !important标记 ...

  9. 前端----css的继承性和层叠性

    css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是 有一些属性是可以继承下来的: color   ,  font ...

随机推荐

  1. 增删查改-MySQL

    查询: 在MySQL中,select的基本语法形式: select 属性列表 from 表名和视图 [where 条件表达式] [group by 属性名 [having 条件表达式]] [order ...

  2. Xps实现文档显示、套打功能

    wpf采用Xps实现文档显示.套打功能(原创) 近期的一个项目需对数据进行套打,用户要求现场不允许安装office.页面预览显示必须要与文档完全一致,xps文档来对数据进行处理.Wpf的Documen ...

  3. GNU 项目(开源社区的由来,背后的哲学)

    转自译言网:http://article.yeeyan.org/view/88497/59257/ 第一个软件共享社区 当我在1971年开始在麻省理工人工智能实验室工作时, 我成为一个已经存在多年的软 ...

  4. Linux环境进程间通信(四):信号灯

    linux下进程间通信的几种主要手段: 管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允 ...

  5. UNIX系统接口

    UNIX系统接口 8.1 文件描述符 UNIX操作系统中,所有的外围设备(包括键盘和显示器)都被看作是文件系统中的文件.系统通过文件描述符来标识文件:标准输入为0,标准输出为1,标准错误为2. 当程序 ...

  6. EasyUI项目驱动学习

    下面以一个项目简单介绍easyui的使用,主要包括以下组件 布局面板 - layout 可伸缩面板 - accordion 选项卡 - tabs 控制面板 - panel 窗口 - window 对话 ...

  7. CSS学习小记

    搜狗主页页面CSS学习小记 1.边框的处理   要形成上图所示的布局效果,即,点选后,导航下面的边框不显示而其他的边框形成平滑的形状.相对于把导航的下面边框取消然后用空白覆盖掉下面搜索栏的边框比较而言 ...

  8. 微软必应借PK谷歌突围中国搜索市场

    Bing“必应”是微软2009年推出的搜索品牌(http://www.bing.com),它取代的是同门师兄Live Search.进入2013年,在国内及好莱坞的多部大片里面,我都看到了Bing搜索 ...

  9. HDU 2040 亲和数

    Problem Description 古希腊数学家毕达哥拉斯在自然数研究中发现,220的所有真约数(即不是自身的约数)之和为: 1+2+4+5+10+11+20+22+44+55+110=284. ...

  10. schemaeasyui实例:SSh结合Easyui实现Datagrid的分页显示

    查了好多资料,发现还是不全,干脆自己整理吧,最少保证在我的做法正确的,以免误导读者,也是给自己做个记载吧! 克日学习Easyui,发现非常好用,界面很雅观.将学习的心得在此写下,这篇博客写SSh结合E ...