CSS 学习记录

清除浮动就是要清除浮动带来的影响 ，如果子元素设置了浮动，此时子元素不能撑开标准流的块级父元素，因为子元素浮动后会脱标，即不占位置

标准流或者可以称为文档流 ，是浏览器在渲染显示网页内容时默认采用的一套排版规则，它规定了应该以哪种方式排列元素。

结构伪类选择器有利于减少对 HTML 中类的依赖，从而保持代码整洁，结构伪类选择器根据元素在 HTML 中的结构关系查找元素，常用于查找父级选择器中的子元素

水平布局的盒子，左右的 margin 正常，互不影响，最终两者的距离为 左右 margin 的和；垂直布局的块级元素，上下的 margin 会合并，最终两者的距离为 margin 的最大值

浏览器会给部分标签设置默认的 margin 和 padding ，但一般在项目初始化的时候，需要先清除这些标签默认的 margin 和 padding ，后续根据需要，自己设置

浏览器在渲染网页时，会将网页中的元素看作是一个个的矩形区域，我们也将其称为盒子；页面中的每一个标签，都可以看做是一个盒子，通过盒子的视角更方便进行布局

PxCook（像素大厨）是一款比较好用的切图工具，它可以用来测量设计图的长度、颜色、文字大小等，最主要的是免费

开发网页时，我们通常会遇见样式不生效的情况，这时候应该注意样式层叠和样式优先级问题；如果是复合选择器，此时需要通过权重叠加计算方法来计算，判断最终哪个选择器的优先级最高，哪个就会生效

子元素默认有继承父元素样式的特点，简单来说就是子承父业；通常文字控制属性都可以继承，例如：文字颜色，字体样式，文本样式等控制文字的标签，我们可以通过调试工具来判断样式是否可以继

之前总结过标签水平居中方法，这里补充一下元素居中方法，元素水平居中 text-align：center；版心居中；垂直居中 line-height

块级元素一般作为大容器使用，可以嵌套文本、块级元素、行内元素、行内块元素等，但是 p 标签中不要嵌套 div 、p 、h 等块级元素；a 标签内部可以嵌套任意元素，但唯独不能嵌套 a 标签

背景颜色不会影响盒子大小，一般在布局中会先给盒子设置背景颜色，这样能够看清盒子的大小和位置，背景颜色默认值是透明

Emmet 是一个插件,可以通过简写语法，快速生成代码，很多文本编辑器都支持，可以快速生成标签布局，也可以快速实现样式设置

我们浏览网页时会发现，有的地方鼠标放上去会有变化，变大或者变颜色等，这种变化可以用伪类选择器配合 CSS 样式来设置

颜色的表示方法有很多种，认识几个最常用就可以了，在实际开发中，可以用测量工具快速得到颜色值，直接使用就可以，一般不需要自己设计颜色

在开发中，常常会遇到这样一种情况，明明设置了样式，但它在页面中就是不生效，这时我们可以选中对应的元素，然后在样式栏中检查设置的是否合适，通常有两个小技巧可以用来排查，利用好工具能够解决一大半问题

文本缩进推荐使用 text-indent：数字 + em ，当字体大小改变时，缩进会随文字大小自动调

如果要让 div、p 等大盒子水平居中，直接给当前元素本身设置margin : 0 auto ;即可实现。 margin : 0 auto ;一般针对有固定宽度的盒子

谷歌浏览器默认的字体大小是 16 px，这里需要注意，单位必须设置，否则无效；字体粗细有两种取值方式：关键字、纯数字

在项目中，大多会写很多样式，有时会出现给同一个标签设置了相同的样式，此时样式就会层叠，浏览器渲染时就会以写在最下面的为主，如果显示的样式不是我们所期望的，可以以此来查找问题所在