CSS要点例子
该笔记仅用于温习用
cascade and inheritance
1、当样式冲突的时，css后边代码的语句样式优先应用
2、类选择器优先于元素选择器
3、子元素会继承父元素的样式
css selectors选择器
1、类选择器
2、元素选择器
类选择器与元素选择器相结合，如 p.left{}将会作用于有.left class的p标签
3、id选择器#
4、属性选择器。例子：
a[title]{ }
指定值 a[href="https://www.baidu.com/"]{ }
li[class^="a"]{}会作用于所有class属性以a字母开头的li标签
5、包含选择器。例子：
div em{} 所有在div中的em（包括孙子）都作用。
6、相邻选择符 如h1+p{}会作用于紧跟着h1的第一个p标签
7、兄弟选择符 如h1~p{}会作用于和h1之后同级的所有p标签
8、pseudo-classes 如 a:hover { }
9、pseudo-elements 如 p::first-line { }
10、combinator 如 artticle > p { } 就选择了article元素内所有的p元素
将两个选择器用逗号连接，这样就作用于两个，省代码
Block and inline boxes
Block boxes 会到下一新行，宽度扩展到100%，可以指定width和height。padding、margin 和 border都会推开其他box
<h1><p>这些会默认使用block boxes
inline boxes 不会到下一行，width和height不能指定，水平的padding、magin和border会推开其他inline boxes，垂直则不会。
<a><span><em><strong>这些都是inlilne boxes
上面两种boxes算是outer display type，boxes也有inner display type，如flex、grid。
还有 inline-flex
CSS box model
block box由下列组成：
Content box:可以使用width和height来改变大小
Padding box:可以使用padding来改变大小
Border box:可以使用border属性来改变
Margin box:可以使用margin属性来改变
box的大小由content box、padding和margin的大小相加而得。
The alternative CSS box model
要使用这个model，就要设置属性box-sizing: border-box，这样width就是包括border和padding的大小。
要应用到整个页面，用以下css设置：
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
margin外边距
margin可以是负值
四面的设置：
margin-top
margin-right
margin-bottom
margin-left
margin collapsing:两个element接触，中间的margin取决与最大的那个的margin大小，另一个是负值的话，还会缩小margin。（左右好像不行）
border边框
border有四面可以设置:
border-top
border-right
border-bottom
border-left
设置border的宽度,样式和颜色：
border-width
border-style
border-color
设置单面的属性：
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
padding内边距
padding不能为负值
四面设置：
padding-top
padding-right
padding-bottom
padding-left
The box model and inline boxes
像span这样的inline boxes，设置padding和margin之后，会水平推开其他元素，垂直则不会。
Using display: inline-block
介于inline和block之间的特性，就是既不会换行，width和height又有效果，而且水平垂直的padding和margin都会推开其他元素。
Background and borders 背景和边框
设置背景颜色：
background-color: #559900;
background-color: red;
background-color: rgba(255,255,255,.5);
设置背景图片：
background-image: url(star.jpg);
设置背景图片铺展重复方式：
例子: background-repeat: repeat; //默认重复铺展
可选值：no-repeat（不重复铺展）、repeat-x（水平重复铺展）、repeat-y（垂直重复铺展）。
设置背景图片大小：
background-size: 50px 20em;
background-size: cover; //覆盖整个box但保持原始图片比例，有时图片内容会超出box
background-size: contain; //显示整张图片并且保持原始图片比例，box有时会出现空白部分。
设置背景图片位置：
（位置系统以左上角为起始点）
background-position: top center; //图片放到顶边中心
background-position: 20px 10%; //放到水平离左边20px，垂直离顶边10%比例的位置
background-position: top 20px;
background-position: top 20px right 10px; //放到离顶边20px，离右边10px的位置
可以单独使用background-position-x和background-position-y属性
Gradient backgrounds 渐进背景
background-image: linear-gradient(45deg, rgba(200,29 55,1) 49% rgba(2,255,200,1) 86%);
还有radial-gradient（圆）、repeating-linear-gradient（线性多层）、repeating-radial-gradient（圆多层）、conic-gradient（圆锥）。
详细用法：https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
渐进代码生成器：https://cssgradient.io/
Multiple background images 多背景图片
一个box可以有多个背景图片，属性用逗号隔开，设置各自的大小位置等也是用逗号隔开，如果设置属性少于背景图片，设置的属性会循环重复。
background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);
background-repeat: no-repeat, repeat-x, repeat; //image4会使用第一个属性no-repeat，以此类推。
background-position: 10px 20px, top right; //image3、image4会依次使用这两个属性。
Background attachment 背景依附
background-attachment: scroll; //当整个页面滚动，背景也会跟着滚动，当背景中的内容滚动，背景不会滚动。
background-attachment: fixed; //当整个页面滚动，背景固定不动，当背景中的内容滚动，背景不会滚动。
background-attachment: local; //当整个页面滚动，背景也会跟着滚动，当背景中的内容滚动，背景跟着滚动。
快捷使用背景方式：
background:
linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) top right / 200px 200px repeat, //大小要紧接在位置和/后边
url(big-star.png) center no-repeat,
rebeccapurple; //背景颜色必须在最后设置
//设置多张图片，必须先设置完第一张图片的全部属性，然后逗号后边再设置第二张
提醒：主要在背景上的文字要确保背景消失了，字的颜色一样能看到，重要的字还是作为html标签里面，因为朗读器读不出背景中的文字。
Borders
border-top: 2px dotted rebeccapurple; //设置顶边
border-bottom: 1em double rgb(24, 163, 78); //设置底边
Rounded corners圆角
border-radius: 10px; //四个角都是10px的圆角，或者可以是em值。
border-top-right-radius: 1em 10%; //右上角为水平1em，垂直10%的圆角
overflow溢出
overflow:hidden; //溢出box的部分会隐藏掉
overflow:visible; //默认，溢出box的部分会显示出来
overflow:scroll; //用滚动条解决溢出问题
overflow-y:scroll; //纵向滚动条
overflow-x:scroll; //横向滚动条
overflow:auto; //不溢出的时候就隐藏滚动条
scroll和auto属性建立了一个Block Formatting Context
min-height: 150px; //当box没内容时，最小高度也是150px,当有内容且超出150px，box高度自适应增大。
width:50vw; //设置宽度为viewport的50%；
height:100vh; //设置高度为viewport的100%;
当image、video、iframe等元素溢出方框时，可以使用max-width:100%;来使其在方框内。
object-fit属性可以设置cover,contain和fill，效果像background-size一样，fill属性是忽略原始比例，铺满box。
styling table
