结构伪类选择器
编辑
伪类选择器是写的选择器：first-child{css样式}它设置的是兄弟元素中是第一个元素且符合e选择器的标签设置css样式，不是某一状态设置。这个nth-child（2n+1）也可以写未知数，这个未知数是自然数，从零开始的整数。li：nth—child（2n+1）会找到所有的奇数的标签且标签要符合前面的选择器。但是一组兄弟标签可以只有一个，也可以是不同元素。first-type-of必须是同标签兄弟元素。
编辑
伪元素选择器
编辑
伪元素选择器是
比如.a::before{
content:"nihaoa"
color：red
}
这样设置的，作用是找到符合前面的标签，让标签内容最前面/最后面加上content的值，如果不设置content属性，整个选择器没有效果。只要设置就好了，content可以是空，是空字符串。会将content的值放到最前面，后面的就像是直接写在该元素后面。以及这个元素内部设置的都是为该内容设置的。该伪元素默认是行内元素。默认第一个内容的标签是写到左上角的。但是会吧标签显示的所有内外边距都放进去。这里选择器后是两个：
pxcook工具的使用
开发模式中两个标签的距离是电一一个元素拖至另一个元素。
盒子模型
一个盒子它其实是由内边距+边框+内容组成的。我们div标签的子标签都是写在内容内。我们设置的width和height都是内容区域的高和宽，不是整个盒子的高和宽。整个盒子道德高和宽是由内边距+边框+内容构成。且内边距是在内容外，边框线也是不会占用内部的面积。
设计背景图/背景色都会给到整个盒子，但是边框线为先，边框线如果是点线啥的，就会补充背景色/背景图。
编辑
边框线border
边框线必须要写线的类型，要不然没用，线的粗细亦或颜色都是可以默认设置的。以及写的顺序可以变
编辑
对于边框线，如果写border就是设定每一个都一样，要设置不一样可以用下面的属性名，属性值可以设定不同的。border边框线不是一定得是一样的，也可以四个不同。
编辑
内边距padding
编辑
内边距可以设定多个方位的，可以用这个属性值。内边距可以看出盒子和内容区域不同。内边距设定距离，padding这个属性值也可以设定整个方向的内边距，只写一个数，也是四个方向的边距。这些都是要写单位的。也可以写2，3，4数，最多写四个数，以，隔开，表示四个方向的内边距。
记忆方法，第一个是上面的，顺时针是每一个，没有的就看线对面的数。
编辑
盒子尺寸计算
编辑
我们设置weight和height就是内容区域，不是整个盒子，业务可能给的是整个背景色只能那么200px，那么weight不能设200，可以手动减去border和padding算。或者你可以直接盒子尺寸就是weight和height的长短，但是设置box-sizing：border-box，weight和height就是整个盒子的尺寸，去给多少内容区域的大小，但是显示css内weight还是盒子的尺寸，浏览器显示的是内容区域的尺寸。
版心居中
要让块状盒子居中，水平居中，可以用外边距。让左右都是auto，左右都设置zuto，会计算离内容区域的距离，使其水平居中，如果一个是数字，另一个是auto。
让块状元素水平居中，如果父级元素是body，可以设置外边距的左右边距为auto，会计算外边距。让对于父级元素水平居中。行内元素设置auto没用的。行内元素没用内边距和外边距的上下方，只有内容决定。内容是文字，设置行高就能决定。
编辑
清除默认样式
编辑
我们要将默认样式全部清除，如果不一起清除，之后用，如果要把默认样式取消，不是重新设定，只是取消，很麻烦，不如全部取消，然后要设定样式的一起设定。更为简单。取消所有的样式，就是用通配符，可以锁定所有的标签，去设定，就相当可以让所有的样式清除，如果要设定的话，不可以继承，要设定自己的。
取消li的序号的是li标签的list-style:none可以让所有的li标签没用序号样式。
盒子溢出overflow
编辑
所有标签的盒子都是长方形或是正方形。当盒子溢出时，溢出可以时水平方向的溢出，也可能是垂直方向的溢出，不显示溢出，可以有给盒子设定overflow属性，属性值时hidden，可以让超过盒子部分直接被截隐藏。或者属性名时scroll可以让溢出有滚动条，不被隐藏，scroll无论是否溢出，都有滚动条，只是不能拉动滚动。属性值时auto，只有溢出有滚动条。我们要防止我们写的html的标签溢出，所有标签的都在之前取消默认样式设定overflow:hidden来元素溢出。
块状元素的合并和坍塌
合并
编辑
如果时两个块状元素，且两个元素可以宽度亦或高度不同，但是是垂直排列，一个标签在另一个下，那么如果两个元素，一个设定下外边距，一个上外边距。原本是之间会隔两个距离，但是这里合并问题，是bug，之间的距离是更大的一个，所以其实另一个不用设，一个就是直接这个的距离。只有块级元素才有
坍塌
编辑
当父子标签都是块状元素，为子标签设置外边距，那么放的时候，会将盒子和外边距一起放，这是需要的效果，但是又bug，会子标签还是没外边距，父有外边距，是给子标签设定的外边距和给父标签外边距，更大的一个。取消这种，让子标签设定上外边距/下外边距，只是子标签，可以设定父内边距，只是设置子标签外上/下边距，会，父标签不会，设置父标签的内边距，也是一样的效果。或者让父上下有边框线，可以防止，或者overflow:hidden防止溢出，hidden也可以。内边距和外边距是用空格隔开。
行内元素-内外边框设定
编辑
为行内标签设定margin外边框，和padding内边距，左右边距可以，但是上下边距没用的。但是如果是可以被内容撑开，可以设置行高line-height，没内外边距，但是效果一样，可以改变垂直。
盒子模型-圆角
任何一个标签都是长方形，正方形是特殊的长方形。但是我们可以把长方形的四个角设为圆角，每一个标签的角都可以设为圆角。那个标签css设定属性border-radius值是圆角半径。标签显示是圆角，但是浏览器上还是长方形，只是显示是圆角，且圆角是整个盒子的角是圆角。标签整体显示是图片啥的，也会是圆角，除了子标签在内容上。设定百分比是正方形的宽或高的百分比，把盒子可以显示是一整个圆，是必须盒子是正方形，然后每一个角的半径都是正方形长度的一半，如果长方形的半径加起来超过了宽/高，只会显示最大的。正方形的每个角设定50%，设定每个角半径60%=50%效果，border-radius的属性值是半径。
编辑
阴影
编辑
标签选择器css样式设定属性名为box-shadow，写了这个的标签会有阴影，增加了这个样式。他的值是font一样，就是一组值，以空格隔开。设定外部阴影不用写，是外部阴影，写了反而错，如果是内部阴影，写值inner。写的时候，一定要写x，y其他可以不写。但是如果写的不止两个值，写的情况分别是以顺序来的，写三个px，第三个就是模糊半径。
/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
