前端与 CSS | 青训营笔记
在我看来,CSS最重要的就是box模型和浮动。
经过一段时间的前端学习,类标签是很重要的。首先,命名要人性化,当初类标签名从box1累积到box50多。其次,要用外联试 link href=".css" rel="stylesheet" type="text/css"/ 将CSS和HTML装在两个文件里 样式和内容分离,在我看来,这样看起来更美观,而且放在VScode里面,也可以左边内容,右边样式,爽歪歪。
可以提前设置一个p{line-height:1.5em}完成首行缩进
但字母间距和单词间距需要h1{text-align:center;}
今天我还学到了*{
font-size=36px;
color=red;
}
这是我之前的遗漏,全局类型定义。
接下来就是伪类选择器。a:hover 在我之前做的笔记里也有,但真正接触还是在过渡的时候。现在发现伪类选择器可以很容易地解决我之前遇到一段文字中两句话两种和段落不同的样式。当时是通过一个span和一个section解决的,但只要再多一种样式就不行了。
a:hover{
color=red;
font-size=20px;
}
调用时通过a href 胆小如鼠 /a
id选择器能有效减少代码量,子盒子只需要一个id,就能在继承父盒子属性的基础上做出相应的改变
还有,分组选择器字体颜色可以继承,设置的边框不可继承
也了解到了页面整体居中的一些方法,例如margin: calc(50%-(half_width))
还有width:; margin:0 auto;
style > id > class
权值{ #id > .类 > 标签}
其次是浮动,之前遇到过一个问题,当在父盒子里设置个子盒子,并且设置个margin-top时,连同父盒子都会整体下移,为了消除这个浮动,最简单的就是给父盒子设置个边框 solid 大小为0。
float是非常重要的,刚开始时,我一个个position都是absolute,结果在插入一个盒子时,页面就乱了。
有关flex布局,更简单,更美观的一种布局,设置的宽度高度需要是所有flex内容所占的宽度高度,这也是我之前的一个坑。
最后附上一些笔记的图片
div{border-bottom:1px solid red;
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;}