1、默认body是有外边距的，通常将body的外边距去掉。例如：body,html{margin:0}
2、为了方便计算盒模型的尺寸，我们通常做盒模型转换将content-box转换为border-box。例如：*{box-sizing: border-box;}
3、将盒子在父级元素中左右居中常用的方法，例如：margin:0 auto;
4、将盒子在父级元素中垂直居中定位的方法，首先，将父级元素定位为relative，然后，将盒子定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。例如：
<div id="big"><div id="small"></div></div>，div#big{position:relative;height:480px; }，div#small { position: absolute;top: 50%;height: 240px;margin-top: -120px; }
5、将盒子在父级元素中垂直居中常用的方法，在父级容器设置弹性盒子，并设置主轴和交叉轴对齐都居中即可。例如：display: flex;justify-content: center;align-items:center;
6、底部细线效果，通常用底边框来实现。例如：border-bottom: 1px solid rgba(255,145,4,1);
7、盒子的阴影效果，通常采用box-shadow属性。例如：box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.5);
8、文字的阴影效果，通常采用 text-shadow。例如：text-shadow: 0 0 5px rgba(0,0,0,0.5);
9、设置border的时候，要同时设置线粗细，线形，线颜色，否则边框无法显示。例如：border: 1px solid black;
10、选择器优先级由低到高： 通用选择器(*)、元素选择器、类选择器、属性选择器、 ID 选择器、 内联样式。
11、后代组合器和子代组合器的区别：后代组合器选择前一个元素的后代节点。例如：div span匹配所有位于任意 <div> 元素之内的 <span> 元素。子代组合器选择前一个元素的直接子节点。例如：ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。
12、一般兄弟组合器和紧邻兄弟组合器的区别：一般兄弟组合器后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。例如：p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素。紧邻兄弟组合器后一个元素紧跟在前一个之后，并且共享同一个父节点。例如：h2 + p 会匹配所有紧邻在 <h2> 元素后的 <p> 元素。
13、伪类是选择器，用于选择处于特定状态的元素。例如：a:visited 匹配所有曾被访问过的 <a> 元素。
14、伪元素与元素的行为类似，它们的作用就像您在标记中添加了一个全新的HTML元素一样。例如：p::first-line 匹配所有 <p> 元素的第一行。
15、外边距塌陷：如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。例如：.box1{margin:50px}.box2{margin:30px}，结果margin:50px；
16、块盒子(block box)的特点：盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽；每个盒子都会换行；width 和 height 属性可以发挥作用；内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”。
17、内联盒子 (inline box)的特点：盒子不会产生换行； width 和 height 属性将不起作用；内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
18、块盒子和内联盒子可以通过显示模式互相转换。例如：display:block,inline；
19、边框圆角可以通过设置border-radius。例如：border-radius:10px 20px 30px 40px;
20、圆形盒子设置，通常先设置长度和宽度相等的方形盒子，然后设置border-radius:50%;
21、当父级盒子尺寸大于图片的大小，图片在父级盒子居中（上下、左右都居中）。例如：background: url(images/xxx.png) center no-repeat;
22、当图片尺寸大于父级盒子，想让图片充满盒子时，通过设置图片的宽度和高度。例如：background: url(images/xxx.png) center/width height no-repeat;
23、文本排列方向变为纵向只需要设置书写模式writing-mode：vertical-rl 纵向文本从右到左，writing-mode：vertical-lr 纵向文本从左到右。
24、逻辑属性和逻辑值，横向书写模式下，映射到width的属性被称作内联尺寸（inline-size）——内联维度的尺寸。而映射height的属性被称为块级尺寸（block-size），这是块级维度的尺寸。
25、逻辑外边距、边框和内边距属性，margin-top属性的映射是margin-block-start；padding-left属性映射到 padding-inline-start；border-bottom属性映射到的是border-block-end，还有一些属性的取值是一些物理值（如top、right、bottom和left），这些值同样拥有逻辑值映射(block-start、inline-end、block-end和inline-start)。
26、当盒子中的内容过多时，就会发生溢出。通常采用overflow:hidden;隐藏溢出，overflow:auto; 由浏览器决定是否显示滚动条。
27、当出现较长的英文单词或字符发生溢出时，通常采用overflow-wrap: break-word或者word-break: break-all；
28、CSS四种颜色表示：1、颜色关键词（如：red、blue等）;2、十六进制RGB值（每个十六进制值由一个散列/磅符号(#)和六个十六进制数字组成，每个十六进制数字都可以取0到f(代表15)之间的16个值中的一个，每对值表示一个通道—红色、绿色和蓝色）；3、RGB 和 RGBA的值（RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值，是由一个介于0到255之间的十进制数字。RGBA第四个值表示颜色的alpha通道，它控制不透明度。如果将这个值设置为0，它将使颜色完全透明，而设置为1将使颜色完全不透明。）4、HSL 和 HSLA 的值（hsl() 函数接受色调、饱和度和亮度值作为参数，这些值的不同方式组合，可以区分1670万种颜色。）
29、calc()函数-用于动态计算长度值。例如： calc(80% + 10px);
30、文档内所有字体的大小，通常用相对值rem表示，所以需要设置根元素字体大小，通常设置根元素字体大小为10px,这样方便计算其它字体大小。例如：html{font-size:10px;} p{font-size:1.2rem}
31、当宽度和高度采用百分比单位时，当页面缩小到一定程度时，为了保持最佳的浏览效果，通常设置最小宽度和最小高度。例如：min-height:500px; min-width:1200px;
32、当设置表格样式时，一般设置table-layout: fixed 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。
33、由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack)，只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。例如：font-family: "Trebuchet MS", Verdana, sans-serif;
34、将一段文字置于父容器的水平中点，只要设置text-align属性即可：text-align:center;
35、单行文字的垂直居中，只要将行高与容器高设为相等即可。例如：div{height:50px;line-height:50px}
36、设置文本每行之间的高，可以接受大多数单位 ，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。
37、letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。
38、去除无序列表前面的圆点，通过设置list-style-type属性。例如：list-style-type:none;
39、a:link {} a:visited {} a:focus {} a:hover {} a:active {}这个顺序是重要的，要记住这个顺序，你可以尝试这样帮助记忆：LoVe Fears HAte
40、text-decoration：设置链接时取消设置链接上的默认下划线。例如：text-decoration:none;
41、outline文字的轮廓 (轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有； 它只是设置在背景图片的顶部)。例如：outline: 1px solid black;
42、如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：h1 { white-space:nowrap; }
43、多条CSS语句互相冲突时，具有!important的语句将覆盖其他语句。例如：h1 { color: red !important; color: blue; }；
44、设置一个元素的透明度，可以使用下面的代码，例如：.element { opacity: 0.5; }；opacity取值范围为0.0-1.0
45、如何使用CSS生成一个三角形？先编写一个空元素<div class="triangle"></div>然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：.triangle { border-color:transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px; }
46、取消IE文本框的滚动条，例如：textarea { overflow: auto; }
47、下面这段代码会让你的彩色照片显示为黑白照片，例如：img{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}
48、段落首字放大并下沉的效果，例如：p:first-letter {display: block;float: left;margin: 5px 5px 0 0;font-size: 2em;background: red;}
49、CSS翻转图像，例如：img {transform: scaleX(-1);}
50、移除被点链接的点框，例如：a {outline: none};
51、当父级元素都是浮动元素的时候，会造成父高度塌陷的问题。解决方法就是增加一个div来清除浮动，例如：<div sytle="clear:both"></div>
52、当有浮动的问题发生时，通常有固定的清除浮动的代码，如下：.clearfix::after { content: "."; visibility: hidden; display: block; height: 0; clear: both;}将此代码应用在父级容器即可，<div class="clearfix"></div>
53、需要搞清楚向左浮动的排列顺序和向右浮动的排列顺序，比如有6个浮动div两行排列时，向左浮动的排列顺序为123/456,向右浮动排列顺序为321/654。
54、由于所有的父元素默认情况下position属性都是static，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。如果想让绝对定位元素根据父元素来定位，则需要将父元素设置为position: relative;
55、粘性定位（sticky）基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如：position:sticky;
56、当元素开始重叠，使用z-index属性决定哪些元素出现在其他元素的顶部，定位的元素都具有z-index为auto，实际上为0，z-index值越大，越靠近顶层。
57、将一大段文字分成多列展示时，可以采用多列布局，通过两个属性开启多列 column-count 或者 column-width。 column-count 将创建指定数量的列。column-width浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。 这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。例如：column-count: 3; column-width: 200px;
58、弹性盒子的flex属性有3个值，但是我们通常只设置拉伸因子和初始值大小。例如：flex: 1 200px;
59、弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。所有 flex 项默认的 order 值是 0，order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
假如有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
60、使用网格布局创建等宽多列的时候，通常采用repeat函数。例如：grid-template-columns: repeat(5, 1fr);
61、使用grid-gap同时设置网格的行间距和列间距，例如：grip-gap:10px 20px;
62、对于网格多列布局中，每个网格通常都设置一个最小高度，然后高度自适应。例如：grid-auto-rows: minmax(100px, auto);
63、对于网格多列布局中，如果要合并网格，通常采用 grid-column: 1/span 2; 其中1表示第一列，span2表示合并两列。
64、表格中常用的属性有display: table、display:table-row、display:table-cell。
65、CSS媒体查询为你提供了一种应用CSS的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候CSS才会真的被应用。媒体查询是响应式Web设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其它条件，比如用户是在使用触摸屏还是鼠标。
66、媒体查询基本语法：@media media-type and (media-feature-rule) { /* CSS rules go here */}。其中media-type 包括all-用于所有多媒体类型设备。print-用于打印机。screen-用于电脑屏幕，平板，智能手机等。speech-用于屏幕阅读器。
67、媒体查询的各种逻辑：“与”逻辑：为了混合媒体特征，你可以以与在上面使用and相同的方式，用and来混合媒体类型和特征。例如：@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; }}
“或”逻辑：如果你有一组查询，且要其中的任何一个都可以匹配的话，那么你可以使用逗号分开这些查询。例如：@media screen and (min-width: 400px), screen and (orientation: landscape) {
body { color: blue; }}
“非”逻辑：你可以用not操作符让整个媒体查询失效。这就直接反转了整个媒体查询的含义。例如：
@media not all and (orientation: landscape) { body { color: blue; }}
68、CSS要实现动画效果，首先应先定义关键帧，然后应用动画属性。例如：@keyframes slidein { 0% {margin-left:-80%;}100% {margin-left:80%;}} animation: slidein 5s ease-in 1s infinite normal both running;
69、过渡提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。语法：transition: <property> <duration> <timing-function> <delay>;
例如： transition: width 2s ease-in, background-color 2s ease-in;
以上内容部分摘自视频课程03网页前端CSS全部课程，更多示例请参见网站示例。
