Daotin的梦呓
从零基础学 Web 前端系列
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「Daotin的梦呓」公众号,同时也会同步到我的相关博客,可以从关于我找到我的博客地址,也欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、链接伪类
注意:
1.之后要想回到之前的状态,需要清除缓存。
2.写的顺序要按照的顺序来写,否则可能不显示。
文本修饰
二、背景属性
Background-position
// 方位值只写一个的时候,另外一个值默认居中。
// 写2个方位值的时候,顺序没有要求
// 写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向
Background-attachment
: 背景图的位置是基于盒子(假如是div)的范围进行显示
:背景图的位置是基于整个浏览器body的范围进行显示,如果背景图定义在div里面,而显示的位置在浏览器范围内但是不在div的范围内的话,背景图无法显示。
1、背景属性连写
PS:连写的时候没有顺序要求,url为必写项
三、行高
浏览器默认文字大小:16px
1、行高的单位
总结:单位除了像素以外,行高都是与文字大小与前面数值的乘积。
总结: 不带单位时,行高是和子元素文字大小相乘,em和%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。
PS: 推荐行高使用像素为单位。
四、盒子模型
1、border(边框)
除了有系列外还有系列
边框属性的连写
没有顺序要求,线型为必写项
四个边框值相同的写法
PS: 没有顺序要求,线型为必写项
边框合并(细线边框)
获取焦点
label for id 获取光标焦点(效果:点击label也可以选择文本框)
2、padding(内边距)
padding连写
内边距撑大盒子的问题
盒子的宽度 = 定义的宽度 + 边框宽度 + 左右内边距
继承的盒子一般不会被撑大
包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距(内边距不大于子盒子宽度),不会撑大子盒子。至于设置了上下内边距的话是会撑大子盒子的。(不管怎样父盒子永不变)
3、margin(外边距)
外边距连写
注意:
盒子居中对齐
是盒子里面的内容居中
垂直方向外边距合并(取最大值)
两个盒子垂直布局,一个设置上外边距,一个设置下外边距,取的设置较大的值,而不是相加。
嵌套的盒子外边距塌陷
嵌套的盒子,直接给子盒子设置垂直方向外边距的时候,会发生外边距的塌陷(父盒子跟着移动)
解决方法:
1.给父盒子设置边框
2.给父盒子
五、浮动
1、文档流(标准流)
元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行。
2、浮动布局
特点:
1.元素浮动之后不占据原来的位置(脱标)
2.浮动的盒子在一行上显示
3.行内元素浮动之后自动转换为行内块元素。(不推荐使用,转行内元素最好使用)
3、浮动的作用
文本绕图
制作导航(经常使用)
把无序列表 ul li 浮动起来做成的导航。
网页布局
4、清除浮动
清除浮动不是不用浮动,清除浮动产生的问题。
问题:当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误(占据父盒子的位置)。
方法一
额外标签法:在最后一个浮动元素后添加标签。
方法二
给浮动元素的父集元素使用
注意:如果有内容出了盒子,不能使用这个方法。
方法三(推荐使用)
伪元素清除浮动。
: after 相当于在当前盒子后加了一个盒子。
欢迎关注
Daotin的梦呓
如果觉得不错,欢迎分享给其他的小伙伴们 :)
领取专属 10元无门槛券
私享最新 技术干货