CSS学习笔记1

清疚 2021-12-09 05:11 379阅读 0赞

# CSS学习笔记 #

`CSS`

--------------------

CSS挺难啃的一天就学了一点点,还是要多动手,做出效果才更有动力   
OK笔记开始,笔记只是给自己整理一下思路,以及写一些重要的知识点,不会面面具到.

## css的历史 ##

1994年开始,哈肯提出css的建议,然后和波特一起设计.1997年W3C接管css,1998年发布css2,之后发布CSS2.1,2011年发布CSS3,将CSS分为多个模块单独升级(搜索css spec),再然后逐渐更新各个模块到level 4.然后,应该还没有然后.
    LESS,SASS,PostCSS以后再学

## 敲黑板,划重点 ##

1.  如何做横向布局(float+clearfix):   
    记住一种方法(背背背背背)   
    给子元素添加浮动,给父元素添加class="clearfix",下边是clearfix类的CSS代码   
    .clearfix::after\{    
    content: '';   
    display: block;   
    clear: both;   
    \}
    
    1.  取色 量尺寸可以用QQ的截图,当然了我强烈推荐一个叫snipaste的软件(windows),有桌面版,也有UWP版,灰常好用.字体可以用word预览,ps啥的都行.
    2.  使用开发者工具,多用,就不写了
    3.  四种引入CSS的方式:style属性,style标签,css link, @import
    4.  常见的CSS属性(正在学,占个坑,以后补上):   
        font-family,font-size,font-weight   
        ul和body的默认的margin和padding   
        color,background-color,margin,padding   
        line-height   
        6.脱离文档流   
        position:fixed;

## 其他(边学边记,思路) ##

取消a标签的下划线:text-decoration: none;   
调整距离可以加padding   
word-break:.....可以用开发者工具看看选哪个   
文档流:文档内元素的流动方向   
内联元素:从左往右流动,注意回车产生的空格   
块级元素:每个占一行   
display:inline-block;尽量别用   
块级元素的高度由内部文档流元素的高度总和决定   
尽量别用height   
内联元素的高度(比较反直觉):   
文字的基线,上部和下部   
建议行高 比上部和下部多一点 每种字体的建议行高是不同的   
让banner在nav下方:让navbar脱离文档流position:fixed   
脱离文档流后,这个div会收缩(不占一整行了),解决办法:width:100%(这样不好,width+padding太宽了)最右边的其他靠到最边上了,   
怎么解决呢???   
ok,在topNavBar里面加个div.topNavBar-inner,在这个里面加个左右padding,不topNavBar里加左右padding 了,或者把所有padding 都加到新的div里,,哈哈哈哈 搞定 修BUG真的好有乐趣   
为了学习,我不得不一直这样暗示自己   
水平居中:margin-left:auto;margin-right:auto;   
line-height可以确定内联元素高度   
span:当行高和高度相同时,会垂直居中   
hello的做法:display:inline-block;padding line-height

CSS画三角形:   
用border

> 阻断margin的合并:   
> 1 中间加个div,有border或者padding(不为0)   
> 2 display:table和 display: flex   
> position:absolute---会让display:inline;变成display:block;   
> display:inline-block;

继续,什么是伪类----   
::before 和::after 可以当成个span来看待,所以改变display:block,完美   
那么伪类可以干嘛呢?

踩了一天的坑:改图标的fill,改成白色,就是显示黑色,开发者工具里也是黑色----原来是浏览器缓存搞的鬼   
还有更难受的,不开个本地http-server,请求阿里的图标就是file,不是https请求.难受

`@whhjdi`  `2018-04-04 21:08` `字数 ``阅读 0`

本地文稿已同步至最新状态。

转载于:https://www.cnblogs.com/whhjdi/p/8727315.html