CSS

=============================================================

css 也分写得好写的不怎么好的区别，比如，尽量不能写

1，多余的行数，写着很爽，其实没有啥用，或者还会成为以后的绊脚石，
2，拼凑型代码，想着一个元素5px, 一个元素5px, 包裹的元素10px, 看起来天衣无缝，其实这种有强依赖，就是错的。比如以后要变成7px，那就需要改2个改动，并且是没有必要的改动。
3，要有好的规划，从大到小的写，写完之后要重新审视，要做到结构上的不重复有层次， padding margin要规划好，不要随便写，写下一行就要一行的效果，不是凭感觉弄的。

=============================================================

也不能说 css 一点科技含量都没有，其实，做任何事情都是一样的思路，都是要适当的较真，

就是不放过任何可能的一个小地方，因为一个小地方，一个小的不合理不可能，其实包含了大的问题，

但其实问题没有那么多，发现一个就少一个，并且把，当这个时候不发现这个问题，以后还是会发现这个问题的。

因为问题不被解决和发现就会一直存在我们的工作中，

于是乎，最好是，当发现有个问题不好解决，发现有点疑惑的时候，一定要静下心来，不要在乎做事情的

进度，用一种很平和很放松的态度来解决这个问题，其实这种问题，被解决的途径就是突然通过某种方式或者某个侧面，碰巧一下子发现了问题的原因，

比方说，刚才看到一个元素 DIV, 为什么就很高，我们没有给他设置高度呀，为什么高，这个不合理，于是，我静下心来放松不断的去看看，不放松

这个问题，后来偶然间发现这个 div 有一个 flex的css 属性，看起来很不显眼的一行，我把这个comment 掉，就发现这个 div 的高度变成了最小高度，

这算什么高科技吗，不算，这个算是解决某一类问题的通用步骤。

=============================================================

css 的有个基础的盒模型，原来是 content-box, 当你规定 width: 300px, 那就是说其内容是300px的宽度，

但 border-box 是什么意思呢，当规定 width 300px, 这个时候， width 里就包含了 content + padding + border

=============================================================

When using a responsive meta tag, like the one below, and you tell an element to be 300px wide it will take up most of the screen's width because the element will be
painted on a 360 CSS pixel wide canvas, not 1440 device pixel wide canvas (which is what happens without the proper meta tag and gives the appearance of a site
being "zoomed out" on a mobile device).

<meta name="viewport" content="width=device-width, initial-scale=1">

大致的理解： 在桌面版的页面里的CSS的单位其实就是基于 360 x 640， 这样子的话， 不管屏幕是多大， 如果 px 的大小是一致的，
但是到了 手机版本页面，因为有了 responsive meta tag 的影响， 在渲染页面字体的时候， 还是和桌面版一样，
这样看起来就会正常一点。

=============================================================

可以这么理解当写一个元素的 css 时候考虑把所有的属性都确定好写好想好再写 ... 免得到处改动 ...

免得这些写那里写，好麻烦的。

看现在要涉及到的地方是一个页面，还是一个block, 如果是一个页面，那就要搞清楚一个页面的结构，和大致的规划。

如果是一个block, 那就主要关注这个block, 并把

=============================================================

@font-face {
  font-family: 'xxxx';
  src: url('../fonts/xxx.woff2') format('woff2'),
  url('../fonts/xxxx.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
自定义一个font-family: xxxx

=============================================================

selector 如果多的话，会影响性能。所以要用适合层级的选择器。

=============================================================

要以对象的方式来设计css代码

=============================================================

padding -top 20% 以父容器的宽度为标准的

=============================================================

css写的差没有关系，但如果改呀改呀改动了以前的样式就有问题了，并且是很容易出这样的问题

还有 NTH-CHILD() 这样子的选择器非常容易出问题。

扩展性就差了一点。最好是避免。

=============================================================

原来写好 css 是需要记住并识别目标里的元素类名和元素名，并对他们之间的关系有个理解和规划。

=============================================================

1 频繁更新-写好一个chunk之后再更新可以节约时间
2 重复书写-可以把属性打乱分成各个更灵活的碎片
3 不思考- 要想清楚之后再写代码
4 选择器没有松紧-要松紧结合

============================================================

最外层的div可不能轻易的设置Padding
因为他影响的地方实在是太多了
------
一个css写下去可能影响很多地方，如果太多，可能误伤，如果只影响这个地方，则有点太少，所以关键在点平衡。

============================================================

我觉得css有3个点

1，整体的框架，
2，每次看到一个块内容，都要先规划一下整体的css，
3，每写一次选择器都要比较小心

============================================================

要想写好css, 我觉得要搞清楚目标html体的结构，对其结构和各个元素的包含关系职能有个掌握，
还有什么情况下某些元素会有哪些特点，有哪些外力会在css之前作用于这些个元素。

============================================================

CSS 要分的清，重要一点，不同层次元素使用不同文件的CSS，这里面是有个先后顺序的。

比如：

A B C D {

}

B C F D {

}

第一个选择器的优先级要高于第二个选择器，似乎和我们一般的认为有所不同。

所以呢，越是 general 的 css, 选择器要越少，权重越小，这样才能被后面具体的 css 来覆盖，且无痛。

============================================================

css 里面有个选择器是这样子的，

指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色：

p:nth-last-child(2) { background:#ff0000; }

这种说法就不是很清楚啊，如果没有父元素的情况下，这个选择器和 child 完全没啥关系呀，

为啥

那我们可以假设任何元素都是有一个父元素的，不可能没有在 Html 元素下把？

所以，有明显的父元素就基于那个明显父元素而言的，没有明显的父元素则是基于html而言，或者就看自己是第几个，就是第几个。

============================================================

css 要想写好真的很难，关键是
1，要把 CSS 代码放到最合适的地方， css会有很多的文件，每个文件，就相当于一个类，很多个文件夹，就相当于 component，

2，有些css 代码就非常的模糊，好像放这里也行，放那里也行，但肯定有一个最合适的地方，可能需要尝试不同给方式，不能想着一下子就放到合适的地方。反正代码也是可以修改的，关键是要有清晰一点的原则，知道在调整后放到那里是比较好的选择，其实从选择器也能看出来。

============================================================

CSS的第一件事情就是reset
第二件事情：分开和重用分开就是各个元素有各自的功能应该分开行使重用就是各个页面也都能享受一次css的红利

css自然是一段一段的写
先确定写一段
大块
-- 哪些元素参与分配宽度宽度 = padding + width 左右浮动

小块
然后判断（width height padding margin ）
和细节度量衡。

=============================================================

========================================

css 有个小建议，所有的变量都给他一个类名，这个类名就可以以后直接用到各种地方。减少代码的修改。

========================================

css 变量还有这样的用法

https://www.cnblogs.com/guangzan/p/10536076.html

:root {
--green: lightgreen;
--lightpink: lightpink;
}

#container div:nth-child(2n) {
background-color: var(--green);
}

#container div:nth-child(2n+1) {
background-color: var(--lightpink);
}

感觉好像没有 sass 变量好用啊

========================================

@content 大法，

$header-breakpoint-width: 979px;
@mixin header-breakpoint {
  @media (max-width: #{$header-breakpoint-width}) {
    @content;
  }
}

断点， 里面使用 @content 非常的方便

=========================================

calc(#{$min-font-size} + (2 - 1.4) * ((100vw - #{$min-screen}) / (1200 - 600)));

这个东西叫插值，在 calc 里面不能识别变量，但把变量写成插值的形式，就可以了

===========================================

如果有 compass watch，一个分支拷贝代码到另一个分支，那么如果不关闭 compass watch 的话，会干扰到代码分支间的复制和粘贴

===========================================

css 难在选择最合适的选择器，尽量不多写也不少写

难就难在刚要写的那一刻哦。人的思维是刚一开始就要碰到难的，那就先搞个简单的把，而后来有不修改，可能就会出事哦。

===========================================

.col-xs- 超小屏幕手机 (<768px)

.col-sm- 小屏幕平板 (≥768px)

.col-md- 中等屏幕桌面显示器 (≥992px)

.col-lg- 大屏幕大桌面显示器 (≥1200px)

https://blog.csdn.net/liyang_nash/article/details/81163782

====

CURL的功能很强大，一本书可能都写不完？

====
curl is a tool to transfer data from or to a server, using one of the sup‐
       ported protocols (DICT, FILE, FTP, FTPS, GOPHER, HTTP, HTTPS, IMAP, IMAPS,
       LDAP, LDAPS, POP3, POP3S, RTMP, RTSP, SCP, SFTP, SMB, SMBS, SMTP, SMTPS,
       TELNET and TFTP). The command is designed to work without user interaction.
====

curl -v https://x.com
curl -w "time_namelookup: %{time_namelookup}\n time_connect: %{time_connect}\n time_appconnect: %{time_appconnect}\n time_pretransfer: %{time_pretransfer}\n time_redirect: %{time_redirect}\n time_starttransfer: %{time_starttransfer}\n time_total: %{time_total}\n"

curl --cacert

-F, --form <name=content>
              (HTTP) This lets curl emulate a filled-in form in which a user has
              pressed the submit button. This causes curl to POST data using the
              Content-Type multipart/form-data according to RFC 2388. This enables
              uploading of binary files etc. To force the 'content' part to be a
              file, prefix the file name with an @ sign. To just get the content
              part from a file, prefix the file name with the symbol <. The dif‐
              ference between @ and < is then that @ makes a file get attached in
              the post as a file upload, while the < makes a text field and just
              get the contents for that text field from a file.

可以模仿用户登录表单

-----
--oauth2-bearer 还可以模仿oauth2的访问，太完美了

-T, --upload-file <file>

--trace <file> 把追踪全部数据放到一个文件

-u, --user <user:password> Specify the user name and password to use for server authentication

-v, --verbose

-w, --write-out <format>

=================

sass Invalid GBK character "\xE2"

https://github.com/h5bp/html5please/issues/278
--
就是要在每个css文件首行写上: @charset "utf-8";

这样在编译的时候本来要报错的现在不报错了。

=============================================

display: flex
其目的主要是为了让子元素能方便布局, 和子元素float left right 差不多, 也方便子元素上下左右居中的布局

https://www.cnblogs.com/manman04/p/5704660.html

============================================

css transition

是一个复合属性, 当其中的属性发生变化时, 这时候, transitioin就会发生作用了

===20220728 就是CSS属性变化可视过程，显得非常的玄幻

============================================

1, browser zoom 要设置到100%
2, screen resolution要设置到合适的数字
3, 最好找到一个参照物
-- css里面的pixel，是按照dpi来的，是基于96dpi来算的的1个inch里面的点数，resolution变了，所以，1px在不同的resolution下其实是大小不一致的。
一个inch里面有多少个点就是多少个pixel

=========================

box-sizing 就是说盒子模型的宽度如何计算,
=== 好像的意思是说 box-sizing-model,

box-sizing 有2个可选属性值, content-box, border-box, 默认是content-box,
也就是说在设置content--box的时候, 我们设置一个宽度 100px, 这时候其实盒子div的真实的宽度=100px+border宽度+padding宽度
但border-box就是width全包的意思

== 就是说, 我们平时定义的 div width 300px, 其实这个300就是 div 里内容的宽度，和 border padding 都没有关系

=================================================

对齐

块状的元素如何排列layout

没有Psd也能整体规划feel

---

要从整体上解决问题
要从结构上解决问题
要对齐
要少写代码

===============================

css3 transition 是对某个属性值的变化进行修饰和规定

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.

而我个人则简单地理解为”在某个时间段内，平滑地改变某个CSS属性。

transition: width .25s ease-out; 就是说宽度经过某个时间经过某个特效怎么地了

=====================================

css 动画3剑客,

transform: rotate | scale | skew | translate |matrix;

transform:rotate(30deg):

translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）

scale(x,y)使元素水平方向和垂直方向同时缩放

=====================================================

无限动画

.animation2{

-webkit-animation: myfirst2 0.8s infinite;

}

@keyframes myfirst2{

0%{

width:100%;

opacity:1

}

100%{

width:140%;

opacity:0;

}

=================================================

css 不是想的那么无脑，有些地方还是需要某些原则，比如尽量利用已有的规则，不能自己另外写一套来覆盖，这里覆盖，下次别的地方又要覆盖，越写越多，还不好修改，尽量少些代码比较好。

=================================================================

每次sass scss/style.scss css/styl.css都会生成不同的style.css文件，可能是很细微的区别吧
顺便还会生成style.map文件，这个基本不变，如果这个文件删了，会让firebug产生源映射错误。
如果我本地的firebug没有设置启用源映射,则即便没有css.map文件，也不会报错

===========================================

CSS不是那么的简单
要想写的好，很费劲。
要规划好，要清楚涉及到的元素是什么位置，什么作用，在哪些地方用到。

把元素当成一个个有生命里的对象来对待

20220728 ----- 每写一个css，可以考虑三个问题，这个属性我确定吗，这个属性可以重复使用吗，这个属性是用在哪个类别下，比较好找和适合
1，确定， 2，复用， 3，类别（文件下） -> 目的就是要减少多余的代码，避免多写而产生冲突(?)

======================================

发现一个新的

image 标签也可以平铺容器标签

   width: 100%;
        height: 100%;
        object-fit: cover;

=====================================

display flex 是啥意思，就是当一般的布局正常的布局不能满足需要，又要灵活行列的排布，这个时候就需要
弹性盒子布局
基本上就接管了width和float(?)
flex分2个层级，一个盒子 flex container，一个flex item, 如果我规定了一个 flex item的宽度，是没有用的， flex会接管，但如果某一个 flex item里面的
元素规定了宽度，那这个宽度还是会生效的。

flex 是两级控制，父元素规定了 display flex 那么就会把自己和自己的子元素规划成 flexbox, 子元素上的 float 元素的值就会被压制不生效

float 生效也是两级的，要漂移的元素 float, 然后父元素 overflow: hidden

我怎么感觉有点尴尬呀， display flex 的标准也是有所进化的，我在父元素上用了 display flex, 子元素用了 flex: 1,
这个时候显示子元素的 flex-grow: 1, flex-shrink: 1, flex-basis: 0%, 不是说如果父元素的没有显式的规定高度和宽度，就会0%会变成content,

刚才在浏览器上看到的效果是 0%并不是content, 如果 flex-basis: content, 那么会按照content展开，不会平均分配宽度了。

=======================================================

为什么有时候 width 和 max-width 要一起用呢，可能是因为 width 900，但实际的 width 有 1000，这个时候就用 max-width 900, 就杜绝了其显示 1000 的可能性（？）

======================================================

translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/content/css3-transform © w3cplus.com

translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/content/css3-transform © w3cplus.com

transform: rotate | scale | skew | translate |matrix;著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/content/css3-transform © w3cplus.com

生成css
如果不清缓存，
那还是不生效的，同志们，这是怎么回事啊，是不是配置的问题呢。

=============================================================

个人感觉如果能用padding尽量不要用margin
因为padding没有兼容性而margin有兼容性问题吧?
--还有一点他们用于不同的元素比如最外层不妨padding这样还可以放背景图片里面的元素放margin/padding好了都行

=====================

如果这个文件不被add进来
则没有被推送到远程服务器
---
sass a.scss a.css --cache-location ../gc
可以指定缓存存放的目录
-----
要把这些目录放进.gitignore

===============================

=========================================================

css　真的不简单，　就是不能随便写，　开始写的越随便，　后面就越乱，　越不好继续操作。

css 就和写面向对象的程序是一样的，非常讲究结构层次和代码的合适量，

刚想到的css写法肯定是错的。因为刚想到的肯定是比较方便，但可能和以后代码不兼容。

=========================================================

posted @ 2018-03-31 16:15 qqisnow2021 阅读(121) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

qq59538308

CSS