CSS基础知识

边框宽度

边框颜色

边框样式

宽度，颜色，样式的复合写法,没有先后顺序

boder : 1px solid red;

border-image 属性是一个简写属性，用于设置以下属性<br>

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

语法

方向&nbsp;

内边圆角

border-collapse为separate时，表格圆角才能正常显示

常用图形

语法

单边阴影

四边相同阴影

内阴影

多层阴影

其他

每边的边框可以单独设置

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

可以在一个属性当中设置四条边

用来设置一个或多个单独的轮廓属性

轮廓不占据空间，它们被描绘于内容之上<br>

outline

outline-style

outline-width <br>

outline-color<br>

outline-offset

background-color(背景色)

background-image(背景图)

background-repeat（重复方式）

background-attachment（固定还是滚动）

background-position（图片位置）

所有一起写

具体指参阅W3c

绘制背景图片的起点

默认以元素左上角为原点

用法

背景图的显示范围，背景图片超出范围后将不显示，那么现实的区域也可以根据值来设定他的显示区域

background-clip:padding-box || border-box || content-box

content-box

padding-box

border-box

图片尺寸大小

取值

可以为一个容器指定多张背景图片

https://www.w3school.com.cn/cssref/index.asp#text

font:font-style font-size/line-height font-family<br>

font-style

font-family<br>

font-weight

font-size

line-height

vertical-align（未完成、待续）

text-shadow

text-overflow:clip | ellipsis<br>

text-overfilow要与white-space,over-flow一起使用，并且需要定义容器宽度才能生效<br>

文本省略或者裁剪三元素搭配使用

html中文本会在文本容器的最右端实现自动换行<br>

white-space

word-break

word-wrap

link<br>

媒体查询

https://www.runoob.com/css/css-pseudo-classes.html

:link

:visited

:hover

:active

:focus<br>

多个动态伪类同时使用，定义伪类的顺序必须是 ： link-visited-hover-active|focus 才能生效<br>

状态伪类选择器适用于可以定义checked，enabled，disabled属性的元素

:checked

:enabled

:disabled

<br>

禁用后鼠标悬停按钮上会变成禁止图标

:first-child

:last-child

:root

:nth-child(n)

:nth-first-of-type

:nth-last-of:type

:nth-last-child(n)

:only-child

:nth-of-type(n)

:nth-last-of-type

:only-of-type

nth-child与nth-of-type区别

:empty

重点：结构伪类寻找节点的过程

结构伪类选择器中的n

关于结构类型伪类w3c教程中有部分文档

:not()

伪元素无法在文档树中定位

::first-letter

::first-line

::before

::after

::selection

其他

selector[attr]

selector[attr=val]

selecttor[attr|=val]

selecttor[attr~=val]

selecttor[attr*=val]

selecttor[attr^=val]

selecttor[attr$=val]

:target

<br>

点击 点击 后，下方字体背景会变成粉色

:lang(language) selector 定义某个语言下面的样式&nbsp;

将多个拥有相同样式的选择器分在一起

一个元素同时满足好几选择器，两个选择器紧挨一起即可

示例

后代选择器

子选择器

相邻兄弟选择器

相邻兄弟通用选择器

随机多背景

nth-child的n质数随机

动画

/*输入框样式*/<br> input[type="checkbox"] + label::before {<br> content: '\a0'; /* 不换行空格 */<br> display: inline-block;<br> vertical-align: .2em;<br> width: .8em;<br> height: .8em;<br> margin-right: .2em;<br> border-radius: .2em;<br> background: silver;<br> text-indent: .15em;<br> line-height: .65;<br> }<br> /*选中效果*/<br> input[type="checkbox"]:checked + label::before {<br> content: '\2713';<br> background: yellowgreen;<br> }<br> input[type="checkbox"] {<br> position: absolute;<br> clip: rect(0,0,0,0);<br> }<br> input[type="checkbox"]:focus + label::before {<br> box-shadow: 0 0 .1em .1em #58a;<br> }<br> input[type="checkbox"]:disabled + label::before {<br> background: gray;<br> box-shadow: none;<br> color: #555;<br> }

&lt; input type="checkbox" id="awesome" /&gt;<br> &lt; label for="awesome"&gt;Awesome!<br>

1.单独写一个遮罩，高亮显示的元素z-index高于遮罩

2.使用需要高亮元素的:before伪元素

3.使用boxshadow

使用flex布局

border-radius

border-width

skew作用于伪元素

.button {<br>position: relative;<br>/* 其他的文字颜色、内边距等样式…… */<br>}<br>.button::before {<br>content: ''; /* 用伪元素来生成一个矩形 */<br>position: absolute;<br>top: 0; right: 0; bottom: 0; left: 0;<br>z-index: -1;<br>background: #58a;<br>transform: skew(45deg);<br>}

clip-path

方案1，渐变

方案2，裁剪路径

transform: perspective(.5em) rotateX(5deg);<br>对before和after伪元素进行变换

<font color="#f15a23">当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。</font>不全是正值，则都取绝对值，然后用正值减去最大值；没有正值，则都取绝对值，然后用0减去最大值。

什么情况下会出现margin重叠

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动方法

initial

将属性设置为默认值

inherit

每个属性都有继承性这一特征，有些属性默认继承父元素特征，有些则默认不继承，可以参考w3c

unset

transparent<br>

通配符

颜色名

rgb/rgba

hsl

16进制

内容区是指底线和顶线包裹的区域<br>

内容区的大小依据font-size的值和字数进行变化。

盒子模型的内容区

包括内容区与以内容区中线为基础对称拓展的空白区域，我们称之为行高。

例如：设置line-height为100px，那么以已中线为基础，向上50px,向下50px

行高过小(比如为0）则文字会重叠<br>

行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距[（行高-字体size）/2]分别增加/减少到内容区域的上下两边（深蓝色区域）。作者：小小的白菜<br>

盒子模型图

盒子组成

盒子大小

IE盒子模型（怪异盒子模型）

使用方式： display:flex

博客地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

像素px

英寸in<br>

厘米cm<br>

毫米mm<br>

1/4毫米q

点pt<br>

派卡pc

em

rem

ex

ch

相对视窗宽高的长度单位

calc()<br>

浏览器默认样式

用户定义的样式

那个选择器的优先级更高<br>

!important

优先级

样式表中声明样式的顺序

它们每年的会费也是W3C 的主要资金来<br>源，使得W3C 能够免费、开放地发布所有技术规范，而不像其他标准制定<br>组织那样不得不采取收费政策来维持运作。