理解css|青训营笔记

46 阅读1分钟

目录: image.png

css= cascding style sheets 是帮助页面布局的的工具

css选择器: 1.基础的几个选择器 有: #id选择器| .类选择器| *通用选择器

2.还有以下的组合器(初学者不需要掌握,了解即可)

子代选择器 +相邻兄弟组合器 ~通用兄弟组合器 复合选择器 属性选择器 伪类选择器 伪元素选择器 逻辑选择器

3.选择器的优先级顺序

image.png

4.盒模型

image.png padding内边距 | margin外边距 | border边框

(p.s.在这三者之中,只有margin可以设置负值)

5.页面布局(flex布局和Grid布局)

flex布局分为,block,inline和block-inline 块级元素和行内元素

举个例子: 最常见的<div>标签和<span>的区别:

<div>标签就是,块级元素,block “一山不容二虎”

<span>标签就是,行内元素,inline“容他人之卧”

block-inline就是下面,这个样子滴:

image.png

页面布局第一个要写display、position、floa、visibility(隐藏)、overflow(溢出)
再下来要考虑:宽width,高height,margin外边距,padding内边距,border边框,background。
接下来考虑,关于文本的设置:color,font,text-align,vertical-align,white-space,break-world。
最后考虑其他属性:content,cursor(光标),border-radius(圆角),box-shadow(边框阴影),text-shadow,background:linear-gradient(线性渐变)。

·最后小tips:先有结构html骨架,后有样式div+css,结构永远最重要。

Grid布局 ( 二维布局) 《最后一句话,很操蛋的实话,学的太难了一点也不基础,我学不懂后面的了》