CSS-0-选择器和主要样式

选择器

元素选择器 h1 {}；类选择器 .class {}；id选择器(id唯一) #id {}

.parentClass .childClass {}：只有父类中对应子类才被选择

class = "class1 class2 class3"：同一个元素分配多个的类

样式

颜色

color(文本颜色), background-color, border-color(边框颜色)

表示方法：英文名；RGB；HEX；

rgba(x,x,x,a)(a,0-1,为透明度)

opacity(0-1)也能调节透明度，但是是调整整个元素及其子元素的透明度

字体

font-family(字体样式，多个，前面的优先级高), font-size(文字大小), line-height(行高), font-weight(字体粗细)

font-style(可以选择italic或oblique斜体样式)

text-decoration(可以选择underline, overline, line-through(下上划线，删除线))

盒子模型

margin(值有两个时，第一个表示上下，第二个表示左右；值有四个时，为上右下左),margin-top,margin-right,…

padding,padding-top,padding-left,…

border: 三个值，宽度，类型(solid,dashed,dotted,…)，颜色

width(宽度), height(高度)

布局

display有六种block,inline,inline-block,none,flex,grid

---

block: 独占一行，div,p,h等元素默认为block

inline: 不会独占一行, span,a等元素默认为inline

inline-block: 与inline类似，但可以设置width和height

none: 存在但不显示

flex

父元素设为flex后其子元素都成为其镜像，默认方向flex-direction为水平row，改为column为垂直

其子元素为弹性项，设置flex的值为子元素所占空间占比

父元素可以设置gap属性来调节子元素间距

justify-content设置元素对齐位置,flex-start(主轴开始位置),center(主轴中心位置),flex-end(主轴结束位置),space-between(item中间均匀空白),space-around(item周围均匀空白),…

align-items设置元素对齐位置,flex-start(交叉轴开始位置),center(交叉抽中心位置),flex-end(交叉轴结束位置),…

主轴：row时为竖轴，column时为横轴

交叉轴：row时为横轴，column时为竖轴

grid

网格布局，类似flex

grid-template-rows，多个值代表每一行的高度(px)，剩余空间(fr)

grid-template-columns, 类似grid-template-rows

grid-auto-rows，值为自适应的高度，

grid-auto-columns，值为自适应的宽度

grid-gap，值为item间距

定位

position的值有四种,static,fixed,relative,absolute。默认值为static

---

relative相对自身正常位置来定位

absolute则相对最近的非静态定位元素来定位。一般使用top,right,bottom(可以取像素长度或者百分比等)等来定位

fixed则相对浏览器窗口来定位。常用于导航栏或侧边栏