前端入坑小知识

css中常用的背景属性

 background-color（背景颜色）一般用来验证盒子有没有出来

 background-image：url（）（背景图片）

 background-size（背景尺寸）

 background-repeat（背景重复方式）一般都是no-repeat

 background:rgba(0,0,0,0.2) (调节背景的透明度 )

background-position （背景的位置）属性都有：flex（固定） absolute（绝对定位）static（默认定位）

常用的文本属性

color： 文本的颜色

font-weight 用于字体效果 noemal为默认 bold 加粗  bolder加加粗  lighter 变细 同时我们也可以给想要的像素大小

font-size: 字体的大小  单位为px  

font-family 用于规定字体名及字体列表   如果浏览器不支持掉哟个字体会一直向下寻找直到合适为止

text-align：文本对齐方式 一般用center  左对齐为left  右对齐为right

line-height 字段的行间距 一般我们都设为与文本框的height一样  这样就能实现 文本在一行上居中显示

<style>
 .title{height:300px;line-height:300px}
</style>

text-indent 用于设定文本首行的缩进大小

text-transform 同一字母的大小写 uppercase：全部文本均为大写字母 lowercase：全部文本均为小写字母 capitalize：文本的每个单词首字母为大写字母

border： 盒子的边框常用的属性为solid

<style>
.title{border: black sloide 1px}
</style>
//black:线条的颜色  sloide为实线 1px：线条的宽度

组合选择器

>:选择该元素的第一级子元素如

<div>
<span><div></div></span>
</div>
//在css上要选择一级子元素（span）：div>span{相对用的样式}

+:选择该元素之后相邻第一个元素，且两者具有相 同的父元素(同级元素)

<div class = "title">
<span class = "box"></span>
<p></p>
</div>
//要选中在同一父级下的p标签  .box + p{相应的样式表达}

~:选择该元素之后的同层级元素（不怎么用）

伪类选择器（以下加粗的是我个人在平常用的最多的）

伪类选择器与选择器元素再结合下 实现样式更为丰富的效果

:hover  鼠标经过相应的元素时出现的效果

:focus  获得焦点

:active 设置元素触发事件（如：按键落下  按键up 或戍边的点击事件）

:first-child 顾名思义用来选取夫元素上的第一个子元素

:last-child 这个就不用说啦  那一定是父元素的最后的一个子元素

:last-of-type 用来选取父元素最后一个符合类型的子元素

:nth-last-child(N) 用来选择符合N的所有子元素  N可以为一个公式如2N+1 或一个固定的数字

:nth-last-of-type(N) 符合相应类型的所有子元素

伪元素选择器（以下加粗的是我个人在平常用的最多的）

通常用于在相对应的元素前面或后面添加上一定的内容

::after 在相应的元素后面添加内容

::before 在元素的前面添加内容

::first-line给文本首行添加样式 只能用于块级元素

::first-letter 给文本的首字母设置样式

::marker 用来改变ui里面li元素的样式

::placeholder 用于设置表单元素在文本框的占位时的表现形式

css中优先级的表达(个人在敲样式时不怎么看 当样式被覆盖了我才会去计算相应的权重)

在css选择器中同样也存在样式表达的优先级关系（后面的数字经行相加减的得到相应的优先级

内联样式{即直接在标签上写上样式如：<div style="width:100px height:100px">} 1000

ID 选择器 100

类选择器、属性选择器、伪类选择器 10

标签选择器、伪元素选择器 1

相邻选择符、子代选择符、兄弟选择符、后代选择符 0

盒子定位

position-

static（默认定位）

relative（相对定位）

absolute（绝对定位）

fixed（固定定位）

sticky（粘性定位）

设置定位类型后可以通过设置 top、right、bottom、left 属性确定定位的位置

在子元素使用了绝对定位后其父级元素要加上相对定位 来使得子元素的样式呈现

当然当我们设定的盒子要在另一个盒子上表示时 我们可以在要表现盒子的样式上添加z-index：1的权重级别当然数字越大代表权重级别越高