HTML和CSS3

郑贵强
99 阅读9分钟

盒子模型的理解

什么是盒子模型

当一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的CSS基础框盒模型,将所有元素表示为一个一个矩形的盒子

一个盒子由四个部分组成:content、padding、border、margin

盒子模型.png

content,即实际内容,显示文本和图像

border,即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三个部分组成

padding,即内边距,清楚内容周围的区域,内边距是透明的,取值不能为负,受盒子的background属性影响

margin,即外边距,再元素外创建额外的空白,空白通常指不能放其他元素的区域

上述是一个从二维的角度观察的盒子,下面再看看三维图:

三维盒子模型.png

在CSS中,盒子模型可以分成:

  • W3C标准盒子模型
  • IE怪异盒子模型

默认情况下,盒子模型为W3C标准盒子模型

标准盒子模型

标准盒子模型,是浏览器默认的盒子模型

W3C盒子模型.png

  • 盒子模型总宽度=width+padding+border+margin
  • 盒子模型总高度=height+padding+border+margin

width/height只是内容content的宽高,不包含padding和border值

IE怪异盒子模型

同样看看IE怪异盒子模型的模型图

IE怪异盒子.png

  • 盒子总宽度=width+margin
  • 盒子总高度=height+margin

width/height包含了padding和border值

Box-sizing

CSS中的box-sizing属性定义了引擎应该如何计算一个元素的总宽度和总高度

语法:

box-sizing: content-box||border-box||inherit  //三个值每个值所展示的效果不一样
  • content-box默认值,元素的width/height不包含padding,border,与标准盒子模型表现一致
  • border-box元素的width/height包含padding,border,与怪异盒子模型表现一致
  • inherit指定box-sizing属性的值,应该从父元素继承

参考文献

CSS选择器有哪些?优先级?哪些属性可以继承?

选择器

CSS选择器是CSS规则的一部分

它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

选择器所在选择的元素,叫做"选择器的对象"

我们从一个HTML结构开始

<div id="box">
<div class="one">
<p class="one_1"></p >
<p class="one_1"></p >
</div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</div>

关于CSS属性选择器常用的有:

  • id选择器#box,选择id="box"的元素
  • 类选择器.one,选中class="one"的所有元素
  • 标签选择器div,选择HTML标签为<div></div>的所有元素
  • 后代选择器#box div,选择id="box"元素内部所有的<div></div>元素
  • 子代选择器.one>.one_1,选择父元素class="one"内的所有class="one_1"的元素
  • 相邻同胞选择器.one+.two,选择紧接在class="one"之后所有的class="two"的元素
  • 群组选择器div,p,选择<div></div><p><p>的所有元素

还有一些使用频率相对没那么多的选择器:

  • 伪类选择器
:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素
  • 伪元素选择器
:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
  • 属性选择器
[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

在CSS3中新增的选择器如下:

  • 层级选择器p~ul,选择前面有<p></p>元素的每个<ul></ul>元素
  • 伪类选择器
:first-of-type 父元素的首个元素
:last-of-type 父元素的最后一个元素
:only-of-type 父元素的特定类型的唯一子元素
:only-child 父元素中唯一子元素
:nth-child(n) 选择父元素中第N个子元素
:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前
:last-child 父元素的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择被禁用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择非 <selector> 元素的所有元素
  • 属性选择器
[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

优先级

CSS选择器的优先级:

内联>ID选择器>类选择器>标签选择器

到具体的计算层面,优先级由A、B、C、D的值来决定的,其中他们的值计算规则如下:

  • 如果存在 内联样式 ,那么A=1,否则A=0
  • B的值等于 ID选择器 出现的次数
  • C的值等于 类选择器 和 属性选择器 和 伪类选择器 出现的总次数
  • D的值等于 标签选择器 和 伪元素选择器 出现的总次数

比较规则:

  • 从左往右依次进行比较,较大者优先级更高
  • 如果相等,则继续往右移动一位进行比较
  • 如果4位全部相等,则后面的会覆盖前面的

经过上面的优先级计算规则,我们知道内联样式的优先级最好,如果外部样式需要覆盖内联样式,就需要使用!important

继承属性

在CSS中,继承是指的是给父元素设置一些属性,后代元素会自动拥有这些属性

关于继承属性,可以分成:

有继承的属性

  • 字体系列属性
font: 组合字体
font-family: 规定元素的字体系列
font-weight: 设置字体的粗细
font-size: 设置字体的尺寸
font-style: 设置字体的尺寸
font-variant: 偏大或偏小的字体
  • 文本系列属性
text-indent: 文本缩进
text-align: 文本水平对齐
line-height: 行高
word-spacing: 增加或减少单词间的空白
leteer-spacing: 增加或减少字符间的空白
text-transform: 控制文本大小写
direction: 规定文本的书写方向
color: 文本颜色
  • 元素可见性
visibility: 指定一个元素是否是可见的
  • 表格布局属性
caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定
  • 列表属性
list-style-type: 文字前面的小点点样式
list-style-position: 小点点位置
list-style: 以上的属性的复合写法
  • 引用
quotes：设置嵌套引用的引号类型
  • 光标属性
cursor：箭头可以变成需要的形状

继承中比较特殊的几点:

  • a标签的字体颜色不能被继承
  • h1-h6标签字体的大小也不能被继承

无继承的属性

  • display
  • 文本属性: vertical-align(垂直对齐)、text-decoration(文本修饰)
  • 盒子模型的属性: 宽、高度、内外边距、边框等
  • 背景属性: 背景图片、颜色、位置等
  • 定位属性: 浮动、清除浮动、定位position等
  • 生成内容属性: content、counter-reset、counter-increment
  • 轮廓样式属性：outline-style、outline-width、outline-color、outline
  • 页面样式属性: size、page-break-before、page-break-after

参考文献

对BFC（Block Formatting Context）的理解

BFC是什么

我们在页面布局的时候,经常出现以下情况:

  • 这个元素高度怎么没了?
  • 这两栏布局怎么没法自适应?
  • 这两个元素的间距怎么有点奇怪的样子?

原因是元素之间相互的影响,导致了意料之外的情况,这里就涉及到BFC概念 BFC（Block Formatting Context）即块级格式化上下文,他是页面中的一块渲染区域,并且有一套属于自己的渲染规则:

  • 内部的盒子会在垂直方向上一个接一个的位置
  • 对于同一个BFC的两个相邻的盒子的margin会发生重叠,与方向无关
  • 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时,浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

BFC目的是形成一个相对于外界完全独立的空间,让内部的子元素不会影响外部的元素

触发条件

触发BFC的条件包含不限于:

  • 根元素，即HTML元素
  • 浮动元素：float值为left、right
  • overflow值不为 visible，为 auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

应用场景

利用BFC的特性,我们将BFC应用在以下场景:

防止margin重叠(塌陷)

<style>
p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align:center;
    margin: 100px;
}
</style>

<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

页面显示如下:

margin塌陷.png

两个p 元素之间的距离为 100px ，发生了 margin 重叠（塌陷），以最大的为准，如果第一个P的margin 为80的话，两个P之间的距离还是100，以最大的为准

前面讲到，同一个 BFC 的俩个相邻的盒子的 margin 会发生重叠

可以在 p 外面包裹一层容器，并触发这个容器生成一个 BFC ，那么两个 p 就不属于同一个 BFC ，则不会

出现 margin 重叠

<style>
.wrap {
    overflow: hidden;// 新的BFC
}
p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align:center;
    margin: 100px;
}
</style>

<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

这时候,边距则不会重叠

清除内部浮动

<style>
.par {
    border: 5px solid #fcc;
    width: 300px;
}
.child {
    border: 5px solid #f66;
    width:100px;
    height: 100px;
    float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>

页面显示如下

未清除浮动.png

而 BFC 在计算高度时，浮动元素也会参与，所以我们可以触发 .par 元素生活才能 BFC ，则内部浮动元 素计算高度时候也会计算

清除浮动.png

自适应多兰布局

小结

可以看到上面几个案例,都体现了BFC 实际就是页面一个独立的容器，里面的子元素不影响外面的元素

如何实现单行/多行文本溢出的省略样式

avatar
文章
阅读
粉丝