HTML和CSS二

ssq11
242 阅读8分钟

声明冲突

同一个元素规则之间属性相同，属性值不同，这就是声明冲突

一、层叠

什么是层叠

层叠是一种机制，用于解决css声明冲突

（发生声明冲突的时候才会重叠）

层叠的过程

1、比较优先级

优先级低的会被淘汰，优先级高的胜出，优先级相同就比较他们的特殊性

属性值后面跟上! important;表示是一条重要声明。

!important

优先级从低到高：

1 浏览器声明

2 用户普通声明

3 作者普通声明

4 作者重要声明

5 用户重要声明

2、比较特殊性

在比较特殊性时，每一个冲突的声明会生成4个数字分组（a,b,c,d），以比较特殊性

a越大，特殊性越高，若a相同，则比较b，b越大，特殊性5越高，以此类推

a.若声明是行内样式，则为1，否则为0

b.规则中ID选择器的个数

c.规则中类选择器、伪类选择器和属性选择器的个数

d.规则中元素选择器、伪元素选择器的个数

嵌入idclass元素
abcd
style1000
id0100
class、属性、伪类0010
元素、伪元素0001
通配符0000
!important最高最高最高最高

规则适用范围越大，特殊性越低，适用范围越小，特殊性越高

!important > 行内元素 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器

特殊性从高到低

3、比较源次序：代码执行顺序从上到下

层叠的整个过程，是浏览器根据规则自动完成的

二、CSS继承

继承

子元素会自动拥有父元素的某些css属性，继承具有传递性。

并不是所有属性都可以被子元素继承，一般继承文本类（color 、font-size、font-weight、text-align...）

不能继承（background-color、display...）

继承要满足以下两个条件，才会继承父元素：

1、该属性是可继承的属性

2、该元素没有属性声明

强制继承，也叫显示继承：将CSS属性值设置为inherit

1、为了继承有些不能继承的属性

2、为了继承已被声明的属性

属性值计算过程：

无属性值-----1.确定声明值---2.层叠冲突---3.使用继承---4.使用默认值-----每个属性都有值

盒模型

每一个元素都会在页面生成一个矩形，这个矩形就是盒子（box）

页面的制作过程：需求、设计、还原

前段制作页面：划分区域，填充内容

划分区域的css知识点

块级元素：

占据所有可用宽度，以换行开始

通常用于较大的内容块，比如标题或结构化元素

行内元素：

只占据内容所需宽度，在同一行内一个接一个摆放

通常用于较小的内容块，如被选设置为粗体或者斜体的一些词

设置元素类型：
display：

block 块盒

inline 行内盒子

inline-block 行内块盒

flex 弹性盒子

改变行内元素的宽高后居中：

text-align：center；

行高：line-height：50px；

盒子的分类：

一个元素产生什么样的盒子与它的display属性有关

盒子的组成：

由margin（外边距）、padding（内边距）、border（边框线）、content（内容）组成

边框盒：border box

由border、padding、content组成

填充盒：

由padding、content组成

内容盒：

由content组成

设置超出部分内容的样式：overflow

默认，可见：visible

超出padding之后的部分隐藏：hidden

滚动：scroll（可以在盒子里滚动显示）

当内容把盒子撑大之后，控制盒子的大小

box-sizing

内容盒：box-sizing：content-box；（默认情况，需要手动计算content的宽高）

边框盒：box-sizing：border-box；（自动计算content的宽和高）

可视化模型

视觉格式化模型规定了三种定位体系：

1、常规流 （normal flow）

2、浮动（float）

3、绝对定位（absolute positioned）

任何一个元素都必须属于其中某一种定位体系。不同的定位体系种，元素在包含块中的尺寸和位置会有一些差异

常规流：

常规流，又叫做普通流、文档流、普通文档流，常规流是最常见的定位体系，所有元素默认状态下都是常规流定位

盒子位置
  • 垂直方向上若两个外边距相邻，则折叠
  • 垂直方向：水平方向不会折叠
  • 外边距相邻：两个外边距之间没有border、padding、content
  • 合并：均为正数取最大值，均为负数取最小，一正一负则相加
浮动

当元素的float属性值为left或right时元素为浮动元素：

  • float：none 不浮动，即不是浮动定位
  • float：left 左浮动 ，浮动定位
  • float：right 右浮动，浮动定位
  1. 左浮动的盒子向上向左排列
  2. 右浮动的盒子向上向右排列
  3. 浮动盒子的顶边不得高于上一个盒子的顶边
  4. 若放不下则换行

当常规流遇上浮动

常规流盒子和浮动盒子混合摆放时：

浮动盒子在摆放时要避开常规流盒子（不会跟常规流盒子重叠）

常规流盒子在摆放时无视浮动盒子（会跟浮动盒子重叠）

常规流盒子在自动计算高度时，无视浮动盒子（不会加上浮动盒子的高度）

（高度坍塌）

清除浮动：clear

让浮动盒子落下来占位置，常规流盒子跟浮动盒子不重叠

1、设置给最后一个常规流盒子：给最后一个子元素设置，可以清除该父元素下面所有的浮动

对最后一个子元素使用clear：both，可防止父元素高度坍塌

2、父元素：after{

content：“ “；

display：block；

clear：both； }

clear取值：
  • none 不清除
  • left 清除左浮动
  • right 清除右浮动
  • both 都清除

定位

（子绝父相）：子元素绝对定位，父元素相对定位，父元素位置发生变化，子元素跟着变化

设置了position属性，则为绝对定位

  • position：static 默认值，静态位置
  • position：relative 相对位置

    相对于盒子原来的位置偏移，原本所占空间不变，没有脱离文档流，会覆盖其他元素，一般会用来做绝对定位的父元素。

  • position：absolute 绝对位置

    相对于设置了定位属性（除static）的父元素偏移，如果没有，就相对于HTML元素偏移（一般要求父元素是相对定位）

    脱离文档流，不再占据空间

    1、当浮动元素被设置为绝对定位，元素的float属性会被强制更改为none （float属性失效）

    2、绝对元素对其他元素不会造成任何影响（堆叠显示）

    3、绝对元素可以通过top、left、bottom、right来调整

    使用z-index改变堆叠顺序：z-index：123；数值越大，堆叠在越上方

  • position：fixed 固定位置

    相对于浏览器窗口的固定位置，不会随着用户的滚动变化，脱离文档流

  • position：sticky 粘性定位

    依赖于用户的滚动，在相对定位与固定定位之间切换，top、right、bottom、left必须要有一个方向有值才能是黏性定位生效。

如何创建BFC

BFC：（块级格式化上下文）Block formatting context

它是一个独立的渲染区域，与这个区域外部毫不相干，不会影响外部元素

  • float的值不是none

  • position的值不是static或者relative

  • display的值是inline-block、flex、table-cel、table-caption或者inline-flex

  • overflow的值不是visible

    激活BFC：overflow：hidden

作用：

1、利用BFC可以避免上下相邻的两个盒子margin重叠

2、清除浮动，解决父级元素高度塌陷的问题

3、自适应两栏布局

列表

有序列表：ol
<ol>
    <li></li>
    <li></li>
</ol>
无序列表：ul
<ul>
    <li></li>
    <li></li>
</ul>
定义列表：dl

dd会缩进一点

<dl>
    <dt></dt>
    <dd></dd>
</dl>
二级列表：li后面加有序无序列表
列表样式：list-style：none；
list-style取值：
none取消列表项样式
disc默认，标记是实心圆
circle标记是空心圆
square标记是实心方块
decimal标记是数字
lower-alpha、upper-alha大小写英文字母

布局

改变主轴的方向：justify-content

1、默认：flex-direction：row；

2、水平向左：flex-direction：row-reverse

3、垂直向下：flex-direction：column

4、垂直向上：flex-direction：column-reverse

交叉轴对齐方式：align-items

定义多根轴线对齐方式：align-content

1、开始对齐：align-content：flex-start

2、结束对齐：align-content：flex-end

3、中间对齐：align-content：center

属性

圆角图标

border-radius：20%；

border-radius：50% 50%；

属性值：可以用px，也可以用百分比

字体相关属性

斜体：font-style：italic；

文字间距：letter-spacing：20px；（英文每个字母都有间距）

词间距：word-spacing：50px； 适用于英语单词

首行缩进：text-indent：10px；

上划线：text-decoration：overline；

下划线：text-decoration：underline；

中划线、删除线：text-decoration：line-through；

字体：font-family:“宋体”，“幼圆”；从第一个开始读取，一直到字体能生效为止，默认是非衬线字体。

衬线字体：（serif）宋体，笔画有粗有细，文字边缘经过修饰，在纸张上视觉效果良好

非衬线字体：（sans-serif）幼圆，笔画大小一致，文字边缘未经过修饰，在电子设备上视觉效果良好

avatar
文章
阅读
粉丝