前言
学习了将近一周的CSS笔记，顺序可能有点乱，但是有目录嘛，也不是突然兴起去学，而是现阶段需要这个技能，希望对正在学的小伙伴有帮助，也附上我自学的网站，
https://developer.mozilla.org/zh-CN/docs/Web/CSS
如果要自学的话，我这个是不能当作教程的，完全就是一种记录的形式，原本的md文件是有日期的，记录了我在什么时候学了啥东西，但是发文章我就删了，用编号替代了，如果需要原版的，可以加文章末尾的qq群，我会把原文件发群里，需要的可以自提，也可以在里面学习，探讨。
『MDN yyds』
如果有大佬知道更牛逼的学前端网站，欢迎评论区安利哦~
CSS
CSS （Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。一条 CSS 的样式定义包括属性和属性值，它们共同决定网页的外观。
一条 CSS 规则包含一个 选择器 和一组 属性 定义。下面这个例子用来将页面中的所有 <p> 标签显示为黑色背景和黄色文本：
什么是选择器呢
选择器就是这些用于匹配文档中的元素。匹配的元素将会拥有规则指定的样式。还有类选择器，往下看
每个CSS规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。以下都是有效的选择器或组合选择器的示例。
h1 a:link .manythings #onething * .box p .box p:first-child h1, h2, .intro
迷惑的话先看下面
/*
看下面的 CSS：*/
p {
color: red;
}
/* 文档中所有class包含warning的div元素都会有一个看起来想警告框的样式 */
div.warning {
width: 100%;
border: 2px solid yellow;
color: white;
background-color: darkred;
padding: 0.8em 0.8em 0.6em;
}
/* id未customized 的元素中的文本未16px高
字体是Lucida Grande, Arial, Halvetica等 无衬线字体。*/
#customized {
font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
}
动手做一下
1.使用类名
如果想用多种方式样式化一片元素，那么可以给HTMl元素加个类名(class)，
举个栗子：
<ul>
<li>项目一</li>
<li class="special">项目二</li>
<li>项目 <em>三</em></li>
</ul>
/* 只需要在HTML的需要加的标签上加上class就行了 */
.special{
color: orange;
/* bold粗体的 */
font-weight: bold;
}
/* 前面加上li表示只对加了special的li起作用
要想span也起作用，前面直接加上就行了*/
span.special,
li.special{
color: orange;
/* bold粗体的 */
font-weight: bold;
}
根据位置确定样式
如果希望某些内容能根据它在文档中的位置而有所不同，
假设一个文档有2个
- 标签，一个在段落内，另一个在列表项内，
仅选择嵌套在
<span>元素内的<li>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。
span li {
color: rebeccapurple;
}
<ul style=>
<li>项目一</li>
<!-- 加上class后会将这个标签赋予CSS样式 -->
<li class="special">项目二</li>
<li>项目 <em>三</em></li>
<span class="special">
<li>
选？
</li>
第几个
</span>
</ul>
效果就是在里面的
- 标签全部都变成紫色。
-
还有一种是与标题具有同一层级的段落样式
在 HTML 文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，
为此需在两个选择器之间添加一个
+号 (成为 相邻选择符)h1 + p { font-size: 200%; }将 h1 后面的 p 字体大小设为h1的2倍
根据状态确定样式
根据标签的状态确定样式，比如标签，就可以根据是否是未访问的，访问过，被鼠标悬停，被键盘定位的，又或者是正在被点击当中的状态，
body h1 + p .special { color: yellow; background-color: black; padding: 5px; }翻译一下：在之内，紧接在
后面的
元素的内部，类名为 special。
2.如何构建CSS
HTML样例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html>CSS文件样例
h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }内部样式表
内部样式表是指不使用外部CSS文件，而是将CSS放在HTML文件的和
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html>再看一种
内联样式
内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> <p style="color:red;">This is my first CSS example</p> </body> </html>当然这个更难以维护了，如果需要更新就需要在多处进行修改
如果在文本中大量使用了css那么就可以创建一个文件外部引入。
外部引入
如何从外部导入CSS呢，需要用到元素的
：外部资源链接元素href属性创建application.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My CSS experiments</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>Create your test HTML here</p> </body> </html>创建application.css
p { color: green; } p{ color:blue }最终p会变为红色，
CSS语言有规则来控制在发生碰撞时哪条规则将获胜–这些规则称为级联规则和专用规则。在下面的代码块中，我们为p选择器定义了两个规则，但是段落最后是蓝色的。这是因为将其设置为蓝色的声明将出现在样式表的后面，而稍后的样式将覆盖以前的样式。这就是起作用的级联。
如果加上这个的话，又变成了绿色，来分析一下
.special { color: green; }在我们同时使用了类选择器和元素选择器的前一个例子中，类将获胜–即使它出现在样式表的前面。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了,优先级更高。
属性和值
- 属性： 人类可读的标识符，指示您想要更改的样式特征(列如：font-size, width, backgroud-color)
- 值： 每个指定的属性都有一个值，该值指示您希望如何更改这些样式特性(例如，要将字体、宽度或背景色更改为。)
举个栗子：
h1 { color: blue; background-color: yellow; border: 1px solid black; } p{ color:red }上面的css代码中属性名：color，值为：blue，
最后，CSS声明块与选择器配对，以生成CSS规则集(或CSS规则)。上面的代码包含两个规则，一个用于H1选择器，另一个用于p选择器。
将CSS属性设置为特定值是CSS语言的核心功能。CSS引擎计算哪些声明应用于页面的每个元素，以便适当地布局和样式它。重要的是要记住，在css中，属性和值都是区分大小写的。每对中的属性和值由冒号(：)分隔。
优先级 这样说并不准确，但现在就这样看吧
内联一般是大于内部样式，因为浏览器解析HTML文件时从上到下的，除非内部样式放在了内联后面了，不然内联总是覆盖掉内部的样式，如果link链接放在了内部后面，那么外部引入就会覆盖掉内部样式
换句话说就是：谁离相应的代码近，谁的优先级就高
后面会详细的介绍
3.函数
虽然CSS只是用需要的属性和属性值来改变样式，但有时候还是会用到函数的比如：**calc()**函数，
另一个例子是
<transform>,rotate用于旋转元素.box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) }4.注释和空白
方便查看代码，提高可读性
/* 注释 */ /* 上面是空白，每块代码都要隔一行* /5.CSS如何工作的
当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息。
处理的标准的流程：- 浏览器载入HTML文件
- 将HTML文件转化为一个DOM(Document Object Model),DOM是文件在计算机内存中表现的形式，
- 接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片，视频和CSS样式，Javascript则会稍后处理。
- 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）
- 上述规则用用于渲染树之后，渲染树会会依照出现的结构进行布局。
- 最后网页展示在屏幕上
在这个DOM中，
<p>元素对应了父节点，它的子节点是一个text节点和三个对应了<span>元素的节点，SPAN节点同时也是他们中的Text节点的父节点。当无法解析遇到的CSS时会怎么办，答案就是浏览器什么也不会做，继续解析下一个CSS样式~
4.14
关于DOM
一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。
P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"浏览器按F12,可查看
应用CSS到DOM
html的代码
<p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p>Span的代码
span { border: 1px solid black; background-color: lime; }渲染流程：
浏览器会解析HTML并创造一个DOM，然后解析CSS。可以看到唯一的选择器就是
span元素选择器，浏览器处理规则会非常快！把同样的规则直接使用在三个<span>标签上，然后渲染出图像到屏幕。6.CSS构建
了解了CSS的基本使用后，是时候深入学习了，这个板块着眼于级联和继承，所有可供使用的选择器类型，单位，尺寸，背景，边框样式，调试===》写出合格CSS和理解所有基本理论的工具箱
层叠与继承
主要了解：层叠、优先级和继承——这三个最基本的CSS概念的理解。
这些概念控制着CSS如何应用于HTML以及应用时的优先顺序。
继承
继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。
body { color: blue; } span { color: black; }所有body里面的字体都为蓝色，但是span单独设置的，所以就还是黑色，但是一些属性是不会继承的，比如说width
.main{ color: rebeccapurple; border: 2px solid rgb(208, 138, 138); padding: 1em; } .special{ color: black; font-weight: bold; }在.main的类中只有color会被继承，其他的不会被继承
控制继承
1.inherit
<body> <div id="sidebar"> <h2> this is god's plan </h2> </div> </body>h2{ color: green; size: 1em; } #sidebar h2{ color: inherit; } div#sidebar{ color: blue; }主动让某个元素继承父级元素
将h2的id加个 inherit，如果sidebar 中
h2元素的div匹配下面的规则的话，颜色会变成蓝色。2.initial
<p> <em>left foot up </em> <sapn>right foot slide</sapn> </p>p{ color: aquamarine; } em{ color: initial; }em内的字体为默认颜色，而之外的都是青色，
unset
将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
如果该属性父级有继承，则继承父级，如果没有继承父级样式，则将该属性重新设置为初始值。
在第一种情况下（继承属性）它的行为类似于inherit，在第二种情况下（非继承属性）类似于 initial
.foo { color: blue; } .bar { color: green; } p { color: red; } .bar p { color: unset; }<p>This text is red.</p> <div class="foo"> <p>This text is also red.</p> </div> <div class="bar"> <p>This text is green (default inherited value).</p> </div>层叠
先来看看CSS的全名 **层叠样式表(Cascading Style Sheets) **
第一个单词 cascading 的表现方式 是理解CSS的关键 ！
Stylesheets cascade（样式表层叠） — 简单的说，css规则的顺序很重要：当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
举个栗子
h1 { color: red; } h1 { color: blue; }上面有两个h1的规则，但h1最终会显示为蓝色，所以顺序在后面的生效
层叠如何定义在不止一个元素的时候怎么应用css规则。
有三个因素需要考虑，根据重要性排序如下，前面的更重要：
- 重要程度
- 优先级
- 资源顺序
资源顺序
我们已经看到了顺序对于层叠的重要性。如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。
优先级
- 一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。
- 一个类选择器稍微具体点 — 它会选择该页面中有特定
class属性值的元素 — 所以它的优先级就要高一点。
即使元素选择器顺序在类选择器后面
在你了解了顺序的重要性后，会发现在一些情况下，有些规则在最后出现，但是却应用了前面的规则。这是因为前面的有更高的优先级 — 它范围更小，因此浏览器就把它选择为元素的样式。
就像前面看到的，类选择器的权重大于元素选择器，因此类上定义的属性将覆盖应用于元素上的属性。
这里需要注意虽然我们考虑的是选择器，以及应用在选中对象上的规则，但不会覆盖所有规则，只有相同的属性。
一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。
.main-heading { color: red; } h1 { color: blue; }<h1 class="main-heading">This is my heading.</h1>选择器 千位 百位 十位 个位 优先级 h10 0 0 1 0001 h1 + p::first-letter0 0 0 3 0003 li > a[href*="en-US"] > .inline-warning0 0 2 2 0022 #identifier0 1 0 0 0100 内联样式 1 0 0 0 1000 html文件
<p class="better">This is a paragraph.</p> <p class="better" id="winning">One selector to rule them all!</p>#winning { background-color: red; border: 1px solid black; } .better { background-color: gray; border: none !important; } p { background-color: blue; color: white; padding: 5px; }- 你会发现第三个规则
color和padding的值被应用了，但是background-color没有。为什么? 应该三个都应用，因为顺序规则是后面覆盖前面。 - 无论如何， 上面的规则赢了，因为类选择器比元素选择器有更高的优先级。
- 两个元素都有
betterclass，但是第二个有id。因为ID选择器比类选择器优先级更高 (一个页面只能有一个独特的ID，但是很多元素都有相同的类 — ID 对于目标非常独特)，红色背景和1 pixel black border 应该都被应用到第二个元素，第一个元素应该是灰色背景和 no border，根据类选择器。 - 第二个元素有红色背景但是没有边框。为什么?因为
!important声明在第二条规则里 — 在border: none后面，说明即使计算优先级低这个属性也使用这个值。
7.选择器
CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
h1 { color: blue; } .special { color: blue; }如果 h1和 .special 类有相同的CSS，那么我可以把它们写出两个分开的规则，
选择器列表
也可以将上面的合起来变成选择器列表
h1, .special { color: blue; }空格可以在逗号前或后，你可能还会发现如果每个选择器都另起一行，会更好读些。
h1, .special { color: blue; }组合有一个坏处，那就是当有一个规则写错时，同一个选择器列表的规则都不会生效，
h1, ..special { color: blue; }组合起来以后，整个规则都会失效，无论是
h1还是这个class都不会被样式化。类型、类和ID选择器
这个选择器组，第一个是指向了所有HTML元素
<h1>。h1 { }它也包含了一个class的选择器：
.box { }亦或，一个id选择器：
#unique { }标签属性选择器
这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：
a[title] { }或者根据一个有特定值的标签属性是否存在来选择：
a[href="https://example.com"] { }通用兄弟选择器
p ~ span { color: red; }兄弟选择符，位置无须紧邻，只须同层级，
A~B选择A元素之后所有同层级B元素。伪类与伪元素
一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
这组选择器包含了伪类，用来样式化一个元素的特定状态。例如
:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：a:hover { }它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，
::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。p::first-line { }运算符
最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（
>）选择了<article>元素的初代子元素。article > p { }但是这会和
article:first-child混淆，而后者选择了作为其他元素的第一子元素的<article>元素。为了避免这种混淆，我们可以向
:first-child选择器加入全局选择器，这样选择器所做的事情很容易就能看懂。选择器正选中<article>元素的任何第一子元素：article *:first-child { }8.盒子模型
CSS中的所有内容都有一个围绕它的框，(关键)。总共分为两种类型：
- 块级盒子( block box)：
- 内联盒子( inline box)：
这些特征指的是框在页面流方面的行为以及与页面上其他框的关系。盒子也有内展示型和外展示型
一个被定义成块级的（block）盒子会表现出以下行为:
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
width和height属性可以发挥作用- 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
除非特殊指定，诸如标题(
<h1>等)和段落(<p>)默认情况下都是块级的盒子。
如果一个盒子对外显示为
inline，那么他的行为如下:- 盒子不会产生换行
- width和height属性将不起作用
- 垂直方向的内边距，外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开
- 水平反向的内边距，外边距以及边框会被应用且会把其他处于inline状态的盒子推开
用做链接的
<a>元素、<span>、<em>以及<strong>都是默认处于inline状态的。
我们通过对盒子
display属性的设置，比如inline或者block，来控制盒子的外部显示类型。盒子模型的各个部分
CSS中组成一个块级盒子需要：
- Content box: 这个区域用来显示内容，大小可以通过设置 width 和 height
- Padding box: 包围在内容区域外部的空白区域； 大小通过
padding相关属性设置 - Border box: 边框盒包裹内容和内边距。大小通过
border相关属性设置。 - Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过
margin相关属性设置。
盒子模型封装周围的html元素它包括：边距，边框，填充，和实际内容
- Margin (外边距) - 清除边框外的区域，外边- 距是透明的
- Border (边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
标准盒模型
如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。
margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。
替代盒模型
简单地说：使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).
默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置
box-sizing: border-box来实现。 这样就可以告诉浏览器使用border-box来定义区域，从而设定您想要的大小。.box { box-sizing: border-box; }认识width，height(content)
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
<style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid red; padding: 20px; margin: 30px; background-color: pink; } </style>认识margin，外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。
外边距折叠
.one { margin-bottom: 50px; } .two { margin-top:40px; }理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。框之间的实际外边距是50px，而不是两个外边距的总和。
认识padding（内边距）
padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。 内边距位于边框和内容区域之间。与外边距不同，不能有负数量的内边距，所以值必须是0或正的值。内边距通常用于将内容推离边框。
当然padding也是有方向的:上，下，左，右
简称：小属性
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;还有另一种写法：代表着(上、右、下、左)（顺时针方向，用空格隔开。
简称：大属性
padding:30px 20px 40px 100px;在写样式的时候通常是小属性叠大属性
如果写了三个值，那么左右是相等的，
如果写了两个值，左右相等，上下相等
有的样式自带padding，也可以清除它们
*{ margin: 0; padding: 0; }内边距推开其他元素
.links-list a { background-color: rgb(179,57,81); color: #fff; text-decoration: none; padding: 1em 3em; display: inline-block; }认识
border边框是在边距和填充框之间绘制的。如果您正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，就显示不出来边框。
border:10px solid red;这是一个大属性，按照三要素拆分
border-width:10px; //边框宽度 border-style:solid; //线型 border-color:red; //颜色。也可以按方向来拆分
border-top:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-left:10px solid red;border-style：也可以按方向来分
border-right-style: dashed;以上都适用于块级盒子，
背景样式与边框
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=""> <script src=""></script> <style> /* h2 { background-color: black; color: white; } */ span { background-color: rgba(202, 126, 126, 0.5); } .a { /* 渐变 */ background-image: linear-gradient(105deg, rgba(0,249,255,1) 36%, rgba(51,56,57,1) 98%); } .b { /* 画一个圆 */ background-image: radial-gradient(circle, rgba(0,249,255,1) 19%, rgba(51,56,57,1) 96%); background-size: 200px 10em; } .box { background-color: #567895; background-repeat: no-repeat; background-size: 400px 300px; /*放入图片的路径*/ background-image: url(./qw.png); } .wrapper{ width: 400px; height: 300px; } </style> </head> <body> <div class="a wrapper"> <h2>Background Colors</h2> <p>Try changing the background <span>colors</span>.</p> </div> <div class="a box wrapper"></div> <div class="b wrapper"></div> </div> </body> </html>边框
圆角：
例如，要使一个盒子的四个角都有10px的圆角半径：
.box { border-radius: 10px; }或使右上角的水平半径为1em，垂直半径为10％：
.box { border-top-right-radius: 1em 10%; }书写模式
以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。
详细介绍：
[逻辑外边距、边框和内边距属性]
width和height有映射，这些属性也有相应的映射。
margin-top属性的映射是margin-block-start——总是指向块级维度开始处的边距。padding-left属性映射到padding-inline-start，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。border-bottom属性映射到的是border-block-end，也就是块级维度结尾处的边框。左右方向为 inline 也就是内联 ，上下为 block 块级
9.溢出
在CSS中万物皆盒，
溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS给了你好几种工具来控制溢出，
overflow属性
overflow属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。overflow的默认值为visible，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。.box { border: 1px solid #333333; width: 200px; height: 100px; overflow: hidden; }如果你用了
overflow: scroll，那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你可能会需要这样的样式，它避免了滚动条在内容变化的时候出现和消失。.box { border: 1px solid #333333; width: 200px; height: 100px; overflow:scroll; }也可以设置auto
如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下
word-break或者overflow-wrap属性。10常用单位总结
长度
CSS中表示距离值。长度可用于许多 CSS 属性，例如, , , , , , 和.
<length>调整大小
<div class="box"> </div>一个空的 div 是没有尺寸的,边框宽度扩展到整个容器宽度，因为它是块级元素，而块级元素的行为就是这样的。它没有高度，或者说高度为0，因为内部没有内容。
字体
CSS 属性
font-family允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。font-family— 指定的是一个优先级从高到低的可选字体列表。 字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。<p style="font-family: monospace;"> <!-- 等宽字体，即字体中每个字宽度相同。 --> Two test </p>CSS 属性允许你选择
font-family表格
属性 list-style-type
百分比
- 百分比的计算是基于其包含块的宽度
- 百分比的计算规则适用于
margin和padding的四个方向 - 如果包含块的宽度取决于该元素，那么百分比的使用结果是未定义的。
绝对长度单位
绝对长单位表示当输出介质的物理属性已知时的物理测量
对于低dpi设备，单位
px代表物理参考像素；其他单位是相对于它定义的。因此，1in定义为96px，等于72pt此定义的结果是，在此类设备上，以英寸 (
in)、厘米 (cm) 或毫米 (mm) 描述的尺寸不必与具有相同名称的物理单位的大小相匹配。对于高 dpi 设备，英寸 (
in)、厘米 (cm) 和毫米 (mm) 与其物理对应物相同。因此，px单位是相对于它们定义的（1 英寸的 1/96）。- px
一个像素，对于屏幕显示，对于屏幕显示，它传统上代表一个设备像素（点）。但是，对于打印机和高分辨率屏幕，一个 CSS 像素意味着多个设备像素。 1 in = 96px = 2.54cm 。
- cm
一厘米，1 in = 2.54 cm
1cm = 96/2.54px
- in
1英寸 1 in = 96px = 2.54cm
- pc
1 pica 也就是 1pc = 12pt = 1/6 in
- pt
1in = 72pt
总结：
**1 in = 96px = 2.54cm = 6pc = 72pt **
绝对长度可能会导致可访问性问题，因为它们是固定的并且不会根据用户设置进行缩放。出于这个原因，在设置时偏向于相对长度（例如
em或rem）font-size。相对长度单位
相对长度表示根据其他距离的测量值。根据单位，这可以是特定字符的大小、行高或视口的大小
这些相对长度单位，尤其是
em和rem，通常用于创建可扩展的布局，即使用户更改字体大小，也能保持页面的垂直节奏-
cap
-
em --emphasize。
em是 **相对于父级元素 **对象内文本的字体尺寸，如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸（16px）。
再举个栗子：
div设置的字体大小为30px，所以0.5em计算后的字体大小为：30px x 0.5 = 15px
- rem–root em
em是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。
- ex
这通常是字体中小写字母的高度；
1ex ≈ 0.5em在许多字体中。
扫一扫
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
