从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、链接伪类
a:link{属性:值;} /*链接默认状态 ( a{属性:值}效果是一样的。)*/
a:visited{属性:值;} /*链接访问之后的状态*/
a:hover{属性:值;} /*鼠标放到链接上显示的状态*/
a:active{属性:值;} /*链接激活的状态*/
:focus{属性:值;} /*获取焦点*/
注意:
1.a:visited
之后要想回到之前的状态,需要清除缓存。
2.写的顺序要按照link,visited,hover,active
的顺序来写,否则可能不显示。
- 文本修饰
text-decoration: none | underline | line-through | ...... /* 链接下划线/删除线/...... */
二、背景属性
background-color: /*背景颜色*/
background-image: /*背景图片*/
Background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y /*背景平铺*/
Background-position: left | right | center(默认) | top | bottom /*背景定位*/
Background-attachment: scroll(默认) | fixed /*背景是否滚动*/
- Background-position
background-position: right;
// 方位值只写一个的时候,另外一个值默认居中。
background-position: right bottom
// 写2个方位值的时候,顺序没有要求
background-position: 20px 30px
// 写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向
- Background-attachment
scroll
: 背景图的位置是基于盒子(假如是div)的范围进行显示
fixed
:背景图的位置是基于整个浏览器body的范围进行显示,如果背景图定义在div里面,而显示的位置在浏览器范围内但是不在div的范围内的话,背景图无法显示。
1、背景属性连写
background: red url("1.png") no-repeat 30px 40px scroll;
PS:连写的时候没有顺序要求,url为必写项
三、行高
浏览器默认文字大小:16px
行高:是基线与基线之间的距离
行高 = 文字高度+上下边距
1、行高的单位
行高单位 | 文字大小 | 值 |
---|---|---|
20px | 20px | 20px |
2em | 20px | 20px*2=40px |
150% | 20px | 20px*150%=30px |
2 | 20px | 20px*2=40px |
总结:单位除了像素以外,行高都是与文字大小与前面数值的乘积。
行高单位 | 父元素文字大小(定义了行高) | 子元素文字大小(子元素未定义行高时) | 行高 |
---|---|---|---|
40px | 20px | 30px | 40px |
2em | 20px | 30px | 40px |
150% | 20px | 30px | 30px |
2 | 20px | 30px | 60px |
总结:不带单位时,行高是和子元素文字大小相乘,em和%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。
PS: 推荐行高使用像素为单位。
四、盒子模型
1、border(边框)
Border-top-style: solid /*实线*/dotted /*点线*/dashed /*虚线*/none /*无边框*/
Border-top-color /*边框颜色*/
Border-top-width /*边框粗细*/
除了有
top
系列外还有left,right,bottom
系列
- 边框属性的连写
border-top: 1px solid #fff;
没有顺序要求,线型为必写项
- 四个边框值相同的写法
border: 1px solid #fff;
PS: 没有顺序要求,线型为必写项
边框合并(细线边框)
border-collapse:collapse;
获取焦点
- label for id 获取光标焦点(效果:点击label也可以选择文本框)
<label for="username">用户名:</label><input type="text" class="username" id="username"></input>
2、padding(内边距)
padding-left | right | top | bottom
- padding连写
Padding: 20px; /*上右下左内边距都是20px*/
Padding: 20px 30px; /*上下20px 左右30px*/
Padding: 20px 30px 40px; /* 上内边距为20px 左右内边距为30px 下内边距为40px*/
Padding: 20px 30px 40px 50px; /*上20px 右30px 下40px 左 50px*/
- 内边距撑大盒子的问题
盒子的宽度 = 定义的宽度 + 边框宽度 + 左右内边距
- 继承的盒子一般不会被撑大
包含(嵌套)的盒子,
如果子盒子没有定义宽度,给子盒子设置左右内边距(内边距不大于子盒子宽度),不会撑大子盒子。至于设置了上下内边距的话是会撑大子盒子的。(不管怎样父盒子永不变)
3、margin(外边距)
margin-left | right | top | bottom
- 外边距连写
margin: 20px; /*上下左右外边距20PX*/
margin: 20px 30px; /*上下20px 左右30px*/
margin: 20px 30px 40px; /*上20px 左右30px 下40px*/
margin: 20px 30px 40px 50px; /*上20px 右30px 下40px 左50px*/
注意:
margin: 0 auto;
盒子居中对齐
text-align:center
是盒子里面的内容居中
- 垂直方向外边距合并(取最大值)
两个盒子垂直布局,一个设置上外边距,一个设置下外边距,取的设置较大的值,而不是相加。
- 嵌套的盒子外边距塌陷
嵌套的盒子,直接给子盒子设置垂直方向外边距的时候,会发生外边距的塌陷(父盒子跟着移动)
解决方法:
1.给父盒子设置边框
2.给父盒子
overflow:hidden;
五、浮动
1、文档流(标准流)
元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行。
2、浮动布局
float: left | right /*浮动方向*/
特点:
1.元素浮动之后不占据原来的位置(脱标)
2.浮动的盒子在一行上显示
3.行内元素浮动之后自动转换为行内块元素。(不推荐使用,转行内元素最好使用display: inline-block;
)
3、浮动的作用
- 文本绕图
- 制作导航(经常使用)
把无序列表 ul li 浮动起来做成的导航。
- 网页布局
4、清除浮动
清除浮动不是不用浮动,清除浮动产生的问题。
问题:当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误(占据父盒子的位置)。
方法一
额外标签法:在最后一个浮动元素后添加标签。
clear: left | right | both /*用的最多的是clear:both;*/
方法二
给浮动元素的父集元素使用overflow:hidden;
注意:如果有内容出了盒子,不能使用这个方法。
方法三(推荐使用)
伪元素清除浮动。
: after 相当于在当前盒子后加了一个盒子。
从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动相关推荐
- CSS--背景样式---伪类选择器---高级选择器---盒子模型---浮动
文章目录 背景样式 背景颜色 背景图片 图片重复方式 图片位置 图片附着 简写属性 伪类选择器 高级选择器 后代选择器 直接后代选择器 并列选择器 相邻兄弟选择器 盒子模型 边框 内边距 外边距 外边 ...
- CSS——超级链接 伪类
超级链接就是a标签. 2.1 伪类 也就是说,同一个标签,根据用户的某种状态不同,有不同的样式.这就叫做"伪类". 类就是工程师加的,比如div属于box类,很明确,就是属于box ...
- 从零开始学WEB前端——CSS基础
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新-- github:https://github.com/Daotin/Web 微信公众号:前端队长 博客园:http://ww ...
- 从零开始学 Web 之 ES6(三)ES6基础语法一
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 JavaScript(三)函数
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学前端:CSS复合选择器 --- 今天你学习了吗?(CSS:Day10)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- 从零开始学前端:CSS引入 --- 今天你学习了吗?(CSS:Day07)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:列表标签 - 今天你学习了吗?(CSS:Day06) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- 从零开始学 Web 之 BOM(四)client系列
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
最新文章
- 数论-扩展中国剩余定理
- 03 | 高可用保证:Nacos 如何有效构建注册中心集群
- python格式化字符串_阿博的Python之路详解String数据类型
- 阿里妈妈品牌广告价值建模
- 清华大学计算机学院主页,计算机图形学基础课程主页 | 清华大学计算机系
- JavaWeb关于工程运行的笔记
- postman传递数组参数
- 银河水滴张曼:远距离步态识别系统与应用 |量子位沙龙回顾
- Scikit-learn:分类模型评估Model evaluation
- 001 Python中的变量和字符串
- 小白必看——炒币术语大盘点
- mongoDB镜像下载
- 微信开发 新浪SAE开发平台 验证Token 一直失败
- 工作 5 年观察:快速在职场崛起,拼这 10 个认知
- 调用七牛云简单的上传附件的方法
- 菜鸟先飞之初识Hive、安装教程及常见问题
- Android Studio3.0新特性
- 三维地图搜索的商业模式在哪儿[转]
- 交错(拉丝)(Interlace) 与 反胶卷过带
- 网创客:网络上三个门槛低、白手起家的赚钱项目,会一个就行
热门文章
- php mysql简单分页代码_用php制作简单分页(从数据库读取记录)的方法详解
- ai人工智能_AI偏见如何发生?
- linux 停止路由转发策略_Linux静态路由
- linux+多个字符分割字符串数组中,怎样通过特定的分隔符将字符串分割成数组
- python:DataFrame连续取前23列数据,或者连续取前2行数据,或者取某行某列数据
- 服务器迁入虚拟主机的好处,服务器迁入虚拟主机的好处
- 增益带宽积(GBWP、GBW、GBP、GB)
- thinkphp开启子域名无法正常访问_内网穿透之动态域名解析_DDNS(二)
- git@github.com: Permission denied
- 到底应该使用count(*) 还是count(1)