从零开始学 Web之CSS(三)链接伪类、背景、行高、盒子模型、浮动

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的梦呓

如果觉得不错,欢迎分享给其他的小伙伴们 :)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180527G0X4EJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券