css知识点 - Githubissues

shoutingwei commented 6 years ago

盒模型，box-sizing

box-sizing属性值可以为这三个值中的一个：content-box（default），border-box（有什么好处？固定了盒子大小，border的改变不会影响周围元素，也不用再考虑padding的大小，简化了计算，比如两个盒子都50%），padding-box

CSS3新特性

边框：

border-radius(border-top-left-radius border-bottom-right-radius) box-shadow border-image https://www.w3cplus.com/content/css3-box-shadow box-shadow：第一个参数为正（负）数是右（左）边的阴影第二个参数为正（负）数是下（上）的阴影第三个是模糊直径，第四个是颜色，多条边可以用逗号分开每组。如果是内嵌：在每组最前面加上inset border-image:https://aotu.io/notes/2016/11/02/border-image/index.html

多背景

background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,…,positionN; (background-position-x, background-position-y)（为正数时往右往下） background-size : size1,size2,…,sizeN;//可以用百分比 background-attachment : attachment1,attachment2,…,attachmentN;(fixed, scroll, inherit)//图片会不会跟着内容滚动，还是固定，默认滚动 background-clip : clip1,clip2,…,clipN;（ border-box|padding-box|content-box;绘制区域默认border-box） background-origin : origin1,origin2,…,originN;（padding-box|border-box|content-box 规定背景图片的定位区域。默认border-box） background-color : color; (ex. background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; )

渐变

background: linear-gradient(angle, color-stop1, color-stop2);（y轴正方向0度，往左负角度，往右正角度，单位deg） linear-gradient(direction, color-stop1, color-stop2, …);direction不是必填默认从上到下 ex 注意写法从左到右

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */起点
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */终点
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */终点
  background: linear-gradient(to right, red , blue); /* 标准的语法 */往终点
}
#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
#grad {带透明度
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
radial-gradient
background: radial-gradient(center, shape size, start-color, ..., last-color);//shape：circle, ellipse
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);

Formal grammar: radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )
\------------------------------------------------------------------------------/\--------------------------------/ 

// Definition of the contour, size and position of the ending shape List of color stops 
where 
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side 
and 
<color-stop> = <color> [ <percentage> | <length> ]?

repeating-linear-gradient

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);百分比是长宽20%为一个周期
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

repeating-radial-gradient http://www.runoob.com/css3/css3-gradients.html

文字效果

text-shadow box-shadow text-overflow word-wrap word-break

word-wrap，word-break，white-space区别？
white-space： 
normal 首尾空格忽略，换行变空格
nowrap  头尾空格去掉，换行号变空格，在一行里
pre-line 头尾空格去掉，头一行空行，换行保留
pre-wrap 头尾空格不去，头一行空行，换行保留
pre 同上

word-wrap：一般能靠换行解决的单词，这两个属性都会换行，下面是针对，换行都不能解决的单词。中文不影响
break-word 如果单词很长，就折断单词换行显示
normal 如果单词很长，就冲出border显示，不换行

word-break：中英文表现一样
normal 如果单词超长，会换当前行显示，但一行都不足以显示的话就会突破
break-all 如果单词超长，当前行就会折换，换行之后还是不能显示，继续换行
keep-all 同normal

字体

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div
{
    font-family: myFirstFont;
}
</style>

2D转换

transform-origin 转换位置正数第一个参数是原位置向上，第二个参数原位置向右。除了scale rotate matrix 都可以写X ，Y 比如 skewX

div
{
transform: rotate(30deg);//向右转30度
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
div
{
transform: translate(50px,100px);//向右边50，向下100px
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
{
-ms-transform:scale(2,3); /* IE 9 */ //宽放大2倍，高3倍，中心不变
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}
div
{
transform: skew(30deg,20deg); //第一个参数为y轴往左转30度，第二个参数为x轴顺时针20度
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
div//matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

transform: matrix(a,b,c,d,e,f);

3D转换 transform: rotateX(120deg); transform: rotateY(130deg); 省略。。 http://www.runoob.com/css3/css3-3dtransforms.html

过渡

transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, 
        background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

动画

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

或

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

多列

column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写（1px solid lightblue;）
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式(solid dotted样式)
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	设置 column-width 和 column-count 的简写 columns: 200px 2;

用户界面

resize (none, both, horizontal, vertical)调整大小 box-sizing border-box

outline:2px solid red; outline-offset:15px;（border外15px）

outline 与 border 的区别
outline 不会象border那样影响元素的尺寸或者位置。
input这样的元素，focus之后，outline的位置会变动。

弹性盒子
flex
多媒体查询

可用于检测很多事情，例如：viewport(视窗) 的宽度与高度，设备（print screen speech）的宽度与高度，朝向 (智能手机横屏，竖屏) 。分辨率 http://www.runoob.com/cssref/css3-pr-mediaquery.html

方法一

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

@media not|only mediatype and (expressions) {
    CSS 代码...;
}
ex
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

@media screen and (min-aspect-ratio: 1/1) { ... } 
//这指定了宽高比或者1：1或者更大。换句话说，可视区域或者是正方形或者是宽屏。

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
//宽高比或者16：9或者16：10。逗号表示or

@media not screen and (color), print and (color)


@media screen and (orientation: portrait) {
  /*竖屏 css*/
} 
@media screen and (orientation: landscape) {
  /*
}

css3选择器

http://www.w3school.com.cn/cssref/css_selectors.ASP

element1~element2	p~ul	选择前面有元素的每个元素。
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个元素。
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有元素。
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素
:last-of-type	p:last-of-type	选择属于其父元素的最后元素
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。(前面不是p元素也算)
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:root	:root	选择文档的根元素。
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。
:target	#news:target	选择当前活动的 #news 元素。被选中的锚的样式p:target
:enabled	input:enabled	选择每个启用的元素。
:disabled	input:disabled	选择每个禁用的元素
:checked	input:checked	选择每个被选中的元素。
:not(selector)	:not(p)	选择非元素的每个元素。
::selection	::selection	选择被用户选取的元素部分。

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1">New content 1...</p>
<p id="news2">New content 2...</p>

shoutingwei commented 6 years ago

伪类，伪元素，锚伪类？解释一下“::before”和“:after”中的双冒号和单冒号的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。(状态、结构化、表单相关等)

p::first-letter {
    font-size: 5em;
}

li:first-child {
    color: orange
}

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。（first-line，first-letter不属于元素）因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。 CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。

shoutingwei commented 6 years ago

CSS实现隐藏页面的方式 opacity 设为 0(会被读屏，占位，可以做动画)、将 visibility 设为 hidden（占位，不会被读屏，事件监听失效，子元素要显式设置可见）、将 display 设为 none（不占位，不读屏，子元素也会被隐藏，不能被添加动画，没有交互操作）或者将 position 设为 absolute 然后将位置设到不可见区域（读屏），clippath（占位，读屏）。

clip-path 属性可以通过定义裁剪区域来决定目标元素哪个区域可见，哪个区域不可见，也就是只有在闭合路径内的部分才显示，区域以外的部分就不显示。可以通过url 引入内嵌的或者外置的SVG，又或者是直接用自带的形状为clip-path 属性指定路径。 Clip-path 属性是clip属性的替代者，也可以说是click 属性的升级版。

shoutingwei commented 6 years ago

水平居中

方法1. 知道或不知道宽度

center {    
    width: 960px;//fit-content
    margin-left: auto;
    margin-right: auto;
}

或不知道宽度如下

{
width: -moz-fit-content; 
width:-webkit-fit-content; 
width: fit-content; 
margin-left: auto; 
margin-right: auto; 
}

方法2.inline

子元素inline-block或者inline，元素的父容器中设置text-align的属性为“center”

<div style="text-align:center"><div style="display:inline-block">haha</div></div>

方法3.绝对定位. 知道宽度

{ 
position: absolute; 
width: 宽度值; 
left: 50%; 
margin-left: -(宽度值/2); 
}

方法4.. 知道或不知道宽度

Flexbox

{
display: -webkit-box;
 -webkit-box-orient: horizontal; 
-webkit-box-pack: center; 
display: -moz-box; 
-moz-box-orient: horizontal; 
-moz-box-pack: center; 
display: -o-box; 
-o-box-orient: horizontal; 
-o-box-pack: center; 
display: -ms-box;
 -ms-box-orient: horizontal;
 -ms-box-pack: center; 
display: box; 
box-orient: horizontal; 
box-pack: center; 
}

方法5.

知道或不知道宽度

.parent{
display:flex;
justify-content: center;
}

方法6.

知道宽度 div{ position:relative; left:50%; width:10%; transform:translateX(-5%); }

-方法7. 不知道宽度

<style>
.son{
    position:absolute;
    left:50%;
    transform: translateX(-50%);
}
</style>

<body>
<div  class="son">
haha
</div>
</body>

垂直居中

方法1.

不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：
```
<style>
.son{
position:absolute;
top:50%;
transform: translateY(-50%);
}
</style>
```

haha


- 方法2.

 若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

parentElement{ height:xxx; } .childElement { position: relative; top: 50%; transform: translateY(-50%); }

- 方法3.

parentElement{ height:xxx; display:flex;/Flex布局/ display: -webkit-flex; / Safari / align-items:center;/指定垂直居中/ }


- 方法4

 table

Double Line

body { display: table; width: 100%; height: 100%;//如果高度没有撑开没用 }

.box { display:table-cell; vertical-align: middle; text-align: center; }



- 方法5

子元素line-height和父元素height相同

shoutingwei / frontend-learning

css知识点 #51

盒模型，box-sizing

CSS3新特性

flex