【css】CSS学习笔记-200207

1. css（cascading style sheet），层叠样式表

2. 同步和异步

3. 基本选择器：#id，.class，属性选择器[id]，标签选择div，通配符*，

   区别：同一个div有多个id时，第一个id生效，而有多个class时，优先生效后面class的效果；

   class选择器和属性选择器优先级相同，后面的效果会覆盖前面的；

   任何地方在属性后面加上!important，优先级最高；

   css识别div优先级是看权重的

   !important为MAX，但是具体宏定义max多少不清楚，行间样式是1000，id是100，class|属性|伪类是10，标签div|伪元素是1，通配符*是0；值得一提的是，这些数字为256进制，也即224,216,28,21,20。

4. 父子选择器 div span{}，.class span，只要前后具备父子关系即可

5. 直接子元素选择器 div > span，这种格式也可以直接在页面中写完用tab键补全

6. 并列选择器div.classname，这个方法同样可以在ide里快速补齐

7. 分组选择器，逗号隔开，每组效果相同

8. 字体大小font-size：

   设置的是高度height；

   font-weight里面可以有很多个值，用字母表示分别是： light normal bold bolder，用数字表示是从100-900；相当于strong

   font-style:italic，表示斜体，相当于em

   font-family:字体样式，默认是arial

9. bolder，三个参数分别是bolder-width粗细，bolder-style纹理，bolder-color颜色：1px solid black，bolder可以画三角形，把width和height改成0，bolder-left、bolder-right、bolder-top、bolder-bottom任意几个的color设成transparent

10. css只有一种注释方式/**/

11. 文本修饰方式：line-height：行高，如果单行文本高度等于容器高度，那么这行文本在容器中就会居中，即line-height=height

    text-indent：缩进，2em，1em=1font-size;

    text-decoration：none（没线），line-through（有线，相当于del），underline（相当于a标签）

    cursor：光标，pointer（实现a标签变化的功能），help（变成小问号）

    伪类选择器：hover

12. 标签分为：

    行级元素、内联元素（inline）：内容决定元素所占位置，不能通过css样式改变宽高，css样式中，display默认属性为inline

    如：span strong em a del

    块级元素（block）：独占一行，可以通过css样式改变宽高，css样式中，display默认属性为block

    如：div p ol ul li form address 

    行集块元素（inline-block）：内容决定大小，不独占一行，可以通过css样式改变宽高，css样式中，display默认属性为inline-block

    如：img

    凡是带有inline的元素，都具有文本特性，也即如果元素中间有空格，默认为文本分隔符，也即两张img中间如果有空格，展示出来就会有空格

13. 标签选择器，功能主要用于初始化某个标签的默认属性，使其达到我们想要的效果。比如我们想让em标签不倾斜但是变红，就可以在css里面font-style:normal，color:red，相当于实现对系统标签原来参数的覆盖，由于大部分标签都自带padding和margin，所以用通配符*来覆盖标签边距，从而达到我们对每个标签都能自定义的目的

    *{padding:0;margin:0;text-decoration:none;list-style:none;

    }

14. 盒子模型，内边距padding，bolder，外边距margin，content（width+height），可以搞好多事情，让子元素在和父元素的content相等，父元素设置border就可以让子元素在父元素居中，这样就是小了远视图

15. 定位position，分为绝对定位absolute，配合top、left使用；当一个元素成为absolute之后，就会脱离原来的层，每一个absolute都有一个层；absolute会相对于最近的有定位的父元素进行定位，如果没有，则相对于浏览器边进行定位；用来配合relative进行定位；可以配合top:%50,left:50%,margin-left:-width px,等实现居中；z-index设置层的高度，数字越大层越在上；

    相对定位relative，配合top、left使用，relative会脱离原来位置进行定位，但是原来占有的空间还会保留；relative相对于自己出生的位置进行定位；用来当参照物

    relative的fixed属性：固定在屏幕的特定位置，不随页面滚动而变化，常用语小广告，配合left和top使用

16. body有一个天生的margin是8px；

    opacity，透明度，参数是0-1；

    bolder-radius：50%，会变成圆环

17. 两个经典bug：

    关于盒子的margin塌陷：子元素相对父元素，设置的margin-top不起作用，如果没有设置bolder，感觉上面的bolder没有一样，而margin-left就正常；为了解决这个问题，我们可以不专业的给父元素设置一个bolder，或者在div中输入一个占位符，也可以用bfc手段来专业解决这个问题，所谓bfc，实际上是对css渲染页面方法的重载，也即我们可以在某一个类中，去触发bfc从而改变其渲染规则，触发bfc的方法有如下几种：position:absolute；display:inline-block；float:left/right；overflow:hidden；

    兄弟元素的margin合并，两个相邻div的margin-top和margin-bottom部分居然是重叠的：这个问题也可以通过触发bfc来解决，但是需要让div在一个能触发bfc的div里面，但是实际开发中，不允许增加无意义的html，所以这个问题不用解决，只修改单向的margin-top或者margin-bottom即可。

18. 关于浮动元素float：浮动元素产生了浮动流，

    所有产生浮动流的元素，block元素看不到他们

    inline元素和bfc元素可以看到他们

    这样就会产生问题，就是如果子元素是float，父元素的div包不住他，因为block不认得浮动流，这个时候需要在最后一个子元素后面加上一个inline类型的元素，在这个元素的样式中，加上clear:both，clear的意思是清除浮动流，这样就会把父元素撑开；但是同样的上文说了，不能在代码里加html标签，所以我们引入了一个新的玩意，叫伪类，伪类是一直存在于每个标签上的，只是html里没有显示出来，我们用标签名::before和标签名::after就可以选择一个标签前面和后面的伪类，那我们利用父级元素的after就可以把float清除

    position:absolute,float:left/right会从内部把元素设置成inline-block

19. 文字溢出处理：

    单行文本溢出处理：三件套（取消换行、溢出不展示、文字溢出变成点）white-space:nowrap;overflow:hidden;text-overflow:ellipsis;ellipsis是省略的意思

    多行文本在PC端一般用后台截断处理，因为老版本的浏览器不支持最新的多行截断技术，但是移动端支持，因为移动端的浏览器都是比较新的

20. 背景图片处理：

    background-image:url(dz.jpg);

    background-size:100px 100px;

    background-repeat:repeat/no-repeat/repeat-x/repeat-y;

    bachground-position:横纵坐标/left right top bottom center/50% 50%

21. 要实现当css失效时，仅有html也可以完成主要功能的一种案例：当用图片作为超链接时，css样式失效，依然可以点击超链接。

    首先在a标签里面写上文字

    第一种方法：

    加上缩进让文字溢出框外，隐藏溢出的部分：

    text-indent:999px;white-space:nowrap;overflow:hidden

    第二种方法：

    让content的高度为0，把图片放在padding里面，由于content高度为0，那么文字自然就会在框外，因为padding里面不能放文字，但是可以放图片，隐藏溢出的部分即可

    height:0px;padding-top:90px;overflow:hidden;

22. 行级元素和p标签只能套行级元素；块级元素可以嵌套任何元素；

    a标签里不能套a标签

23. tips：父子两级div，子div的margin:0 auto，可以实现居中且当浏览器缩小时，先减少两边的留白。

24. inline和inline-block元素遵循底对齐原则，如果有文字，优先底对齐文字，如果没有文字，则底对齐边框；用vertical-align可以调整文本对齐线