理解CSS（2）|青训营笔记

用户3911297210902
91 阅读5分钟

理解CSS（2）|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

CSS优先级与继承性

继承性的理解：

  • 若子类标签没有显示的指定一个值，则子类的某些属性会继承父类的计算值
<style type="text/css">
body{
	color:blue;
	font-size:20px;
}
</style>
 
<body>
<h2>继承性</h2>
<p>子级元素继承父级元素的CSS样式</p>
<div>理解起来非常简单</div>
</body>
<!--页面中所有的元素文本颜色改为蓝色,字号20px--> 
复制代码
  • 在上述代码中，由于子类都没有指定相应的颜色和字体大小，所以将继承父类的属性值
  • 一般来说，在CSS中，与文字有关的属性都是可以继承的，与模型相关的都不可以继承，比如宽度，不可继承

-** 显式继承**：通过inherit关键字使不可继承变为可继承的

* {
    box-sizing: inherit;
} //*与inherit表示所有标签的box-sizing属性都被显式继承
html{
    box-sizing： border-box
}
复制代码

优先级

  • 选择器的特异度：id选择器 > 类和伪类选择器 > 标签选择器

初始值

  • CSS中，每个属性都有初始值，当此属性没有显示的设置值且不能被继承时，就为初始值
  • 例如：background初始值为transparent（透明）
  • 可以使用initial关键字显式重置为初始值

布局

  • 是确定内容的大小和位置的算法
  • 依据元素，容器，兄弟节点和内容等信息来计算
  • 三种布局技术：常规流，浮动，绝对定位

盒子模型

image.png

边距属性

padding：内边距
  • padding-top:上内边距
  • padding-right:右内边距
  • padding-bottom:下内边距
  • padding-left:左内边距
  • 一个值为四边，两个值为上下/左右，三个值为上/左右/下
  • 取值可为auto自动(默认值) 、不同单位的数值px、相对于父元素(或浏览器)宽度的百分比(%),实际工作中最常用的是像素(px)
margin：外边距
  • margin-top:上外边距
  • margin-right:右外边距
  • margin-bottom:下外边距
  • margin-left:左外边距
  • margin-top:上外边距[右外边距 下外边距 左外边距]
  • 当对块级元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中
  • margin collapse：盒子a与盒子b,a的外下边距是100，b的外上边距也是100，盒子a与b的距离是100px。此属性会取两个盒子外边距交界处的最大值，而不是单纯相加

border：边框

  • 三种属性：

    • border-width
    • border-style
    • border-color

  • 四个方向

overflow属性

  • 当盒子中的内容超出盒子自身大小的时候，内容就会溢出，如果想要规范溢出内容的显示方式，就需要用到overflow属性，它用于规范元素中溢出内容的显示方式。
  • visible 内容不会被修剪，会呈现在元素框之外(默认值)
  • overflow:auto; /根据需求产生滚动条/
  • overflow:scroll /始终显示滚动条/
  • overflow:hidden; /*溢出内容被修剪，不可见

块级 vs 行级

  • 具体内容参考文章：# CSS中 块级元素、行内元素、行内块元素区别
  • 块级：不和其他盒子并列拜访，一般自己独占一行；且适用所有的盒子模型属性
  • 行级：可以和其他行级盒子一起放在一行或拆成多行；盒模型中的width和height属性不适用
  • display属性

7NM(WK$9E54)NXTG39%(A4N.png

行级排版上下文

  • 只包含行级盒子的容器会创建一个IFC，如span

  • IFC内排版规则：

    • 盒子在一行内水平摆放，一行放不下，换行显示
    • text-align表示一行内盒子的水平对齐
    • vertical-align表示一个盒子在一行内的垂直对齐
    • 避开浮动元素float

块级排版上下文

  • 某些元素会创建一个BFC

    • 根元素 如div,h1,form
    • 浮动，绝对定位，inline-block
    • display：flow-root

  • BFC排版规则：

    • 盒子从上到下摆放
    • 垂直方向上的margin会合并（取最大值）
    • BFC内的盒子的margin不会和外面盒子的margin合并
    • BFC不会与浮动元素重叠

Flex Box

  • flex-direction：定义了主轴方向。决定容器内项目排列方向，默认从左到右row。如果你选择了 row 或者 row-reverse，你的主轴将沿着 inline(行级)方向延伸；选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block(块级) 排列的方向。
  • flex-wrap：决定容器主轴方向上项目是否换行，默认不换行nowrap。reverse表示逆序
  • justify-content：决定容器内项目在主轴上对齐方式。默认左对齐 flex-start。
  • align-items：决定容器内项目在交叉轴上对齐方式。默认为stretch。

  • flexibility：

    • 可以设置容器内项目的弹性，容器有剩余空间时会伸展，剩余空间不够时，会压缩
    • flex-basis：设置项目默认的大小。

Grid布局

  • Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

  • grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

    • grid-template-columns: 200px 100px 200px;
    • grid-template-rows: 50px 50px;
    • 3列，列宽分别为:(),声明了两行

  • repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

  • grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素

float布局

  • 略

postion属性（脱离常规文档流，进行定位）

  • absolute：绝对定位的元素的位置，是相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html，即相对于整个页面，且不受其他任何元素的影响
  • fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
  • relative ：相对定位元素的定位是相对其正常位置进行偏移。

参考文章

avatar
文章
阅读
粉丝