HTML5混编学习笔记：Boxing Model、Selector、specificity、float/postion

最新推荐文章于 2022-08-31 16:56:54 发布

烟花柳巷红尘客

最新推荐文章于 2022-08-31 16:56:54 发布

阅读量729

点赞数

分类专栏： HTML5&OC 文章标签： html5 css 回顾 html

本文链接：https://blog.csdn.net/u010518821/article/details/51853918

版权

HTML5&OC 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

回顾：

HTML页面上的元素分类

a.块级元素（block-level）
b.行内/内联元素（inline-level）
CSS样式添加方式
- a.xxx.css文件：使用外部样式表（external css）
  ->HTML页面的head元素内部，添加link标签
- b.HTML内部（internal css：内部样式表）：head元素内部，添加style标签
- c.HTML内部（inline css：内联样式表）:要设定的元素的开始标签内部
  -><div style = "color:red">

新内容：

一、盒子模型

盒子模型是什么?
Boxing Model:div/span/a/img…
盒子模型的四个要素
->外边距margin+边框border+内边距padding+元素内容content
样例：为一个div块级元素，添加border/margin/padding/content
->验证一个元素的盒子模型
->总结：
- 两个块级元素的上下距离（border的距离）公式如下：
  distance = max（margin-bottom，margin-top）
- 两个块级元素，关系是父子关系:
  子div的margin从父div的content开始延伸
- 两个行内元素（同级关系）span：
  两个行内元素的左右边距（边框border）=左边元素的右外边距+右边元素的左外边距

块级元素，父子关系：
    div {
            /*背景颜色*/
            background: gray;
            /*设置大小*/
            width: 250px;
            height: 25px;
            /*内边距:顺时针原则，从上开始设置*/
            padding: 20px 40px 10px 20px;
            /*边框:宽度为10，实线，蓝色*/
            border: 10px solid blue;
            /*外边距:顺时针原则，从上开始设置*/
            margin: 100px;
        }
        ...
    #father {
            background: #777;
            height: 250px;
            padding: 10px;
            border: 1px solid #000;
        }
    #son {
            background: blue;
            margin-top: 30px;
            margin-bottom: 0px;
            padding: 15px;
            border: 1px dashed #004993;
        }

效果：
块级元素，父子关系：效果

行内元素，同级关系：
    #left {
            background: blue;
            margin-right: 30px;
        }
    #right {
            background: red;
            margin-left: 20px;
        }
    ...
    <span id="left">行内元素左</span>
    <span id="right">行内元素右</span>

效果：
行内元素左
行内元素右

二、 CSS选择器的构造

1.CSS选择器的构造的方式
- a.元素/名字选择器（通过给定元素的名字）：Element Selector
- b.后代/上下文选择器（descendant/contextual selector）
- c.ID选择器（通过给定元素的ID）
- d.类选择器（通过给定元素的class的名字）
- e.属性选择器（通过元素是否具有某个/某些属性）
- …
2.样例：验证上面五种选择器
总结：
通过不同的选择器的构造方式，来选择HTML页面上相应的不同的元素

注：
现在关于选择器的命名不统一，建议查看官方英文命名：https://drafts.csswg.org/selectors-3/

三、 CSS中特殊性的计算

参考：https://drafts.csswg.org/selectors-3/#specificity

CSS中特殊性的计算公式如下:
specificity = 100*a + 10*b + c;
-> a: ID选择器的个数
-> b: 类选择器个数+属性选择器个数+伪类选择器个数
-> c: 元素/类型选择器个数+伪类元素选择器个数
样例: 针对同一个元素, 验证上面的公式
结论: 通过计算”特殊性”specificity的值, 来决定哪个样式才是最终样式

效果：
总结:
a. HTML文档有层次结构(树tree)的包含很多节点的文档(决定元素位置)
b. CSS设置不同节点的表现形式(外向形式+特殊性)

四、HTML文档标准流flow

* 标准的布局模型(没有使用float/position特殊属性)
* 流动的布局模型:使用position/float特殊属性

CSS中float属性的使用

float是CSS中属性名字; float值默认值none; 还可以设定为left/right

总结：
- HTML确定元素的逻辑位置;
- CSS进一步再确定元素的显示位置(float);
CSS中的postion属性
postion属性名字, 值(设定位置的状态): static(默认)/absolute/relative/fixed
结合四个属性(top/right/bottom/left)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置float属性</title>
    <style>
        .father {
            background: #ffff99;
            border: 1px solid #000;
            padding: 5px;
            margin: 30px;

            /*添加position属性*/
            /*position: relative;*/
        }
        .father div {
            padding: 10px;
            margin: 15px;
            border: 1px dashed #000;
            background: #90baff;
        }
        .father p {
            border: 1px dashed #000;
            background: #ff90ba;
        }
        .firstSon {
            /*relative：相对于原来的位置（相对于原来的标准文档流）*/
            /*position: relative;
            bottom: 30px;
            right: 50px;*/
            position: absolute;
            top: 30px;
            right: 50px;

        }
        .secondSon {
            position: relative;
            top: 30px;
            left: 50px;
        }
        .thirdSon {
            /*fixed：相对于浏览器*/
            position: fixed;
            bottom: 30px;
            right: 50px;
        }
    </style>
</head>
<body>

<div class="father">
    <div class="firstSon">firstSonBox</div>
    <div class="secondSon">secondSonBox</div>
    <div class="thirdSon">thirdSonBox</div>
    <p>这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落，这是一个p段落</p>
</div>


</body>
</html>

显示结果：

结论:

relative(相对): 相对于原来在文档标准流中的位置(也可以理解为没有使用position下的位置)，没有脱离文档标准流(盒子的空间保留着)
fixed(固定): 相对于浏览器的位置(参照物)，脱离文档标准流
absolute(绝对): 相对Containing Block为参照物(需满足下面的两个条件); 不满足下面两个条件，则以浏览器为参照物，脱离文档标准流
-> 条件一: 已经定位(position不是static)
-> 条件二: 最近的祖先盒子