CSS基础

2022-11-07  本文已影响0人  清平乐啊

1.层叠

css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则

2.CSS 为控制继承提供了四个特殊的通用属性值

每个css属性都接收这些值
（1）inherit：使子元素属性和父元素相同，"开启继承"
（2）initial：设置属性值和浏览器默认样式相同
如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit
（3）unset：将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
（4）revert：一个新的属性，只有很少的浏览器支持
CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性
它的值可以是其中任意一个(inherit, initial, unset, or revert)
这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点

3.层叠三个因素

重要性排序如下，前面的更重要：
1)重要程度
2)优先级
3)资源顺序：如果有超过一条规则，而且都是相同的权重，那么最后面的规则会应用
可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式
优先级：更高的优先级 — 它范围更小，因此浏览器就把它选择为元素的样式（垂直叠加优先级，水平的通过顺序的覆盖后再进行有限级比较）
一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：
用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)
用户样式表中的常规声明(由用户设置的自定义样式)
作者样式表中的常规声明(这些是我们web开发人员设置的样式)
作者样式表中的!important声明
用户样式表中的!important 声明

4.选择器

多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”
使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略
类别：类型/标签、类、ID、标签属性、伪类、伪元素、运算符（通配符，后代选择器，子代选择器，相邻兄弟选择器，通配兄弟选择器）

5.盒模型

（1）块级盒子
（2）内联盒子

CSS中组成一个块级盒子需要:

（1）标准盒模型

在标准模型中，如果给盒设置 width 和 height，实际设置的是 content box
padding 和 border 再加上设置的宽高一起决定整个盒子的大小
注意： margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间
盒子的范围到边框为止 —— 不会延伸到margin

（2）替代（IE）盒模型

盒子的大小还要加上边框和内边距

默认浏览器会使用标准模型
如果需要使用替代模型，可通过为其设置 box-sizing:border-box 来实现
一个有趣的历史记录 ——Internet Explorer默认使用替代盒模型，没有可用的机制来切换
（译者注：IE8+ 支持使用box-sizing 进行切换 ）

1）margin外边距

外边距是盒子周围一圈看不到的空间
它会把其他元素从盒子旁边推开
外边距属性值可以为正也可以为负
设置负值会导致和其他内容重叠
无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加
外边距折叠：有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小

2）border边框

标准的盒模型，边框的大小将添加到框的宽度和高度
替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度

3）padding内边距

内边距位于边框和内容区域之间
与外边距不同，不能有负数量的内边距，所以值必须是0或正的值
应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框
使用<span>，并对其应用了宽度、高度、边距、边框和内边距
宽度和高度被忽略了
外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠
一个元素使用 display: inline-block，实现我们需要的块级的部分效果：
设置width 和height 属性会生效
padding, margin, 以及border 会推开其他元素
但是，它不会跳转到新行，如果显式添加width 和height 属性，它只会变得比其内容更大

6.背景和边框

（1）背景

背景图片应该只是纯粹的装饰；任何重要的内容都应该是HTML页面的一部分，而不是包含在背景中
background-color
background-image

no-repeat — 不重复
repeat-x —水平重复
repeat-y —垂直重复
repeat — 在两个方向重复

当渐变用于背景时，也可以使用像图像一样的background-image属性设置
background-size

auto —图片显示本身大小，与盒子大小无关
cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比
在这种情况下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内
在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙

background-position
默认的背景位置值是(0,0)
background-position是background-position-x和background-position-y的简写，它们允许分别设置不同的坐标轴的值
也可以有多个背景图像——在单个属性值中指定多个background-image值，用逗号分隔每个值

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

background-attachment

scroll: 使元素的背景在页面滚动时滚动
如果滚动了元素内容，则背景不会移动
实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动
fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动
它将始终保持在屏幕上相同的位置
local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现想要的功能
局部值将背景固定在设置的元素上，因此当滚动元素时，背景也随之滚动
（2）边框

border(border-top/right/bottom/left-width/style/color)
border-radius圆角(border-top-right-radius)

7.书写模式

writing-mode的三个值分别是：

一些属性的取值是一些物理值（如top、right、bottom和left）
这些值同样拥有逻辑值映射（block-start、inline-end、block-end和inline-start）
float的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效

8.溢出的内容

CSS会尽力不让溢出的内容不可见，因为这会造成数据损失

（1）overflow

默认值：visible，内容溢出的时候，可以看到它们
hidden隐藏掉溢出
scroll浏览器总会显示滚动条，即使没有足够多引起溢出的内容，避免滚动条在内容变化的时候出现和消失
auto滚动条在有比盒子所能装下更多的内容的时候才显示

！！！（2）块级排版上下文（Block Formatting Context，BFC）

诸如scroll或者auto的时候，就建立了一个块级排版上下文

9.css的值与单位

绝对长度单位：cm，mm，Q（四分之一毫米），in，pc，pt，px，大多数在用于打印时比用于屏幕输出时更有用
相对长度单位：em，ex（字符x的高度），ch，rem，lh，vw，vh，vmin，vmax

概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”
带有ems类的<ul>内的<li>元素从它们的父元素中获取大小因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为1.3em—是其父嵌套字体大小的1.3倍
概括地说，rem单位的意思是“根元素的字体大小”
“根em”的rem标准
<ul>内的<li>元素和一个rems类从根元素(<html>)中获取它们的大小
这意味着每一个连续的嵌套层都不会不断变大
将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比
如果使用百分比作为宽度值，那么它将是父值宽度的百分比
HSL

色调： 颜色的底色
这个值在0和360之间，表示色轮周围的角度
饱和度： 颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度
亮度：颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)

函数：rgb()、hsl()、url()、calc()

10.调整大小

就是元素的固有尺寸 — 由其所包含的内容决定
给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为外部尺寸
一个空的<div>是没有尺寸的，没有高度，或者说高度为0，因为内部没有内容
对于一个处于另外一个容器当中的盒子，如果给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数
如果我们的<div>没有被指定百分数的值，那么它会占据100%的可用空间，因为它是块级别的元素
给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数
max-width的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大
图像可以变得比原始尺寸更小，但是不会大于原始尺寸的100%

11.图像、媒体、表单元素

图像和视频被描述为替换元素，意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置
用object-fit时，替换元素可以以多种方式被调整到合乎盒子的大小
object-fit取值：

img {
  width: 100%;
  height: 100%;
}

在一些浏览器中，表单元素默认不会继承字体样式，因此如果想要确保表单填入区域使用body中或者一个父元素中定义的字体，需要向CSS中加入这条规则
为了保证统一，将所有元素的内外边距均设为0是个好主意，然后在单独进行样式化控制的时候将这些加回来

button,
input,
select,
textarea {
box-sizing: border-box;//内外边距均设为0
  font-family : inherit;
  font-size : 100%;
}

除了上面提到的规则以外，也应该在<textarea>上设置overflow: auto 以避免IE在不需要滚动条的时候显示滚动条

textarea {
  overflow: auto;
}

统一的重置：

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}
textarea {
  overflow: auto;
}

12.表格

上一篇 下一篇

猜你喜欢

热点阅读