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