前端学习笔记

复杂选择器

①后代选择器（父 后代）找到所有后代中符合的元素

②子代选择器（父>子）找到所有符合的子元素

③兄弟选择器（前+后）找到它后面的第一个同级元素

④群组（并集）选择器 ：同时为多个选择器生效，逗号隔开

例： （选择器1，选择器2）

⑤复合选择器

例 a.c2 表示既满足a标签又满足.c2选择器

⑥链接伪类选择器

：hover（鼠标经过时）

下面三个只能对a标签生效

：link（未访问过时） 点击以前

:visited（访问过后） 点击以后

:active(激活时) 点下去以后是激活状态

伪类选择器

：first-child 第一个

：last-child 最后一个

：nth-child（）指定第几个，odd表示奇数，even表示偶数

：checked 找到所有被checked的元素

文本样式

颜色分类

①常见的颜色英文字符：red，yellow

②rgb（255，255，255）

③rgba（255，255，255，.5）

④#000000 十六进制

字体样式

①font-size 字体大小

②font-family 字体类型 如'宋体'

③font-style 字体样式 倾斜

④font-weight 字体加粗

⑤text-decoration:underline 下划线     line-through删除线

⑥color 字体颜色

尺寸样式

width：宽         height：高    line-height:行高      text-align:水平居中

阴影效果

文本阴影：text-shadow:   水平，垂直，模糊（不能为负），颜色

盒子阴影：box-shadow：水平，垂直，模糊（不能为负），大小，颜色，内外（默认是外）

背景样式

背景颜色：background-color:red

背景图片:background-image:url(路径)

背景平铺:background-repeat:no-repeat

背景尺寸:background-size:①30% ②cover ③contain ④200px

固定背景：background-attachment:fixed

元素分类

HTML中的标签可以分为：块级标签，行内标签，行块标签

①块级标签，特点：独占整行，宽高生效

常见的有：div，h1-h6,p,form,ul,ol,dl,dd,dt,li,table,tr,hr

转块级：display:block

②行内标签，特点：可同行显示，宽高不生效

常见的标签有：span，a，lebel，i,b,s,u,sub,sup

转行内：display:inline;

③行快标签：特点:可同行显示，宽高生效

常见的标签有：img,input,td,th,select,textarea

转行快：display:inline-block

outline:none //轮廓线

外边距：margin

内边距：padding

标准盒(content-box) 宽度=内容宽+左右padding+左右border （没有margin）

边框盒（border-box） 有margin

布局

①普通布局

布局方式是从上到下，从左到右

②浮动

将盒子从普通布局中浮起来

③定位

position：absolute,relative,fixed,static(默认值)，inherit（从父元素继承的position）的值

通过相对或绝对定位方式，将盒子固定在某个位置

清除浮动的方法

①在受浮动影响，在结束地方（受影响地方）加上clear：both

②给父级加overflow：hidden

③给父级加定高

行内块默认是有间距的，解决办法：给左浮动

html（结构层）

css（表现层）

js（行为层）