前端笔记

Fri Nov 10, 2017 in HTMLCSS

HTML:

用来在屏幕上画一条线。

Use the tag to define a thematic change in the content

https://www.w3schools.com/tags/tag_hr.asp

Udacity HTML/CSS Style Guide

HTML Validator

MDN HTML Element Reference page.

gives text strong importance, and is typically displayed in bold.

stress emphasis

CSS：

# 后跟的是ID，

. 后跟的是class

[] 里跟的是attribute

css它的代码被浏览器load是有顺序的，代码越后面，越迟被load，后面的代码会overwrite前面的代码，如果只是想稍微修改一下代码，可以在css的最后加一些代码。

CSS Validator

Google Fonts

Box-Shadow

Web Safe Fonts

Device Independent Pixels VS Hardware Pixels

Device Pixel Ratio = ( Hardware pixels) / ( Device Independent Pixels )

=======width + max-width======

CSS中指定了一张图片的width（例如width: 1024px），那再指定max-width: 100%会有什么效果。

上面的代码，如果没加max-width，会使得如果在device-width小于1024px的device上打开时，图片fish-image会overflow。max-width的意思是，如果device-width小于fish-image width，则width等于device-width，进一步限制了fish-image width。

==============end===========

@media screen and (min-width: 401px) and (max-width: 599px) {

body {background-color: green;}

}

==========

Flexboxsheet

http://jonibologna.com/content/images/flexboxsheet.pdf

How to Build Responsive Images with srcset

https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

70 Expert Ideas For Better CSS Coding

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

========