【前端学习之HTML&CSS进阶篇】-- CSS第四篇 – 样式总结与补充
文章目录
本文具体内容参考了B站渡一教育的课程,原课程链接如下:
渡一教育课程
前言
html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言,在学习过程中,我们首先从html出发,在html的学习过程中深入了解css。
在本节博客中,我们首先会总结一下关于行盒的垂直对齐和样式居中的写法,后半部分给出一些在前面的教程中没怎么提到的样式,作为补充。
一、 行盒垂直对齐
1. 多个行盒垂直方向上的对齐
- 问题:例如多选框和文本不对齐、图标和文本等情况;
- 做法:给没有对齐的元素设置vertical-align【行盒】
vertical-align:预设值、数值、百分比
预设值:
middle: 中线对齐;super:上基线对齐、sub:下基线对齐;
top:顶边对齐、bottom:底边对齐
text-top:文字顶边对齐、text-bottom:文字底边对齐
input{
vertical-align: middle;
/* 实际上是自己位置变了,导致和文字的相对位置变了,效果上看起来是文字位置变化 */
}
数值:设置像素,并通过网页检查调整即可;
2. 图片的底部白边
-
问题:图片的父元素是一个块盒,如div,块盒高度自动,图片底部和父元素底边往往会出现空白
-
做法:
- 设置父元素的字体大小为0;
缺点:如果有文字,结果可想而知,并且由于继承会导致一系列麻烦;- 将图片设置为块盒;
二、居中总结
- 居中:盒子在其包含块中居中
1. 行盒/行块盒水平居中
- 直接设置该盒子的父元素
text-align: center
2. 常规流块盒水平居中
- 定宽,设置左右margin为auto
3. 绝对定位元素的水平居中
- 定宽,设置左右的坐标为0(left、right),将margin左右设置为auto
- 固定定位是绝对定位的特殊情况,就只是包含块为视口罢了;
4. 单行文本垂直居中
- 设置文本所在元素的行高,为整个区域的高度;
5. 行盒内多行文本的垂直居中
- 只能做出类似居中效果,即根据文本设置盒子上下padding相同;
6. 绝对定位的垂直居中
- 定高,设置上下的坐标为0,将上下margin设置为auto;
三、样式补充
1. display:list-item
-
设置为该属性值的盒子,本质上仍然是一个块盒,但同时该盒子会附带另一个盒子
-
元素本身生成的盒子叫做主盒子,附带的盒子成为次盒子,次盒子和主盒子水平排列;
如下图中的左边黑点就是次盒子,有点类似于li的样式,且次盒子的样式无法正常调整;
-
涉及的css:
list-style-type
: 设置次盒子中内容的类型,disc – 实心圆;list-style-position
: 设置次盒子相对于主盒子的位置,如inside;- 速写属性:
list-style
: type position;
清空次盒子:list-style:none;
2. 图片失效时的宽高问题
-
问题:如果img元素的图片链接失效,img元素的特性和普通行盒一样,无法设置宽高;
-
做法:display:inline-block/block;
3.行盒中包含行块盒或可替换元素(图片、视频)
- 问题:行盒的高度与它内部的行块盒或可替换元素的高度无关;
例如一个a元素内部有一个图片,这个a元素的高度与图片大小无关,只与字体大小有关;
【消除白边,把图片变成块盒 – 此时a元素高度就变成块盒高度,且宽度撑开变成整个视口宽】
4. text-align:justify
- left: 左对齐
- right: 右对齐
- center: 居中对齐
- start: 默认值,从起始位置对齐
- justify: 除最后一行外,分散对齐(平均分布空白)
p::after{
content: "";
display: inline-block;
width: 100%;
}
应用:盒子内部多个盒子分散对齐,可令外部盒子justify且加上上述处理,内部盒子设置为inline-block实现
5. 制作三角形
实质上是宽高为0的边框样式
.tangle{
/* 三角形 */
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: red blue green chocolate;
/* 三角形即把剩余三个颜色设置为transparent即可 */
/* 或者使用层叠,即先全部设置为透明,单独设置某一边框颜色 */
}
6. direction和writing-mode
开始 start -> 结束 end、左 left -> 右 end
开始和结束是相对的,不同国家有不同的习惯,但是左右是绝对的;
-
direction设置的是从开始到结束的方向;
direction: rtl;
-
writing-mode:文字书写方向;
例如古诗词的书写:
div{
/* 从上往下,从右往左 */
writing-mode: vertical-rl;
/* 宽度高度互换 */
}
7. uft-8字符
- 数字、汉字等都可以通过转换变成utf-8字符,即实体字符的概念;
- 在伪元素选择器中,不能使用实体字符,只能使用/ + 十六进制代码书写;
总结
在本篇博客中,我们首先介绍了关于行盒的垂直对齐和图像白边的概念,紧接着对于所有的居中样式进行了总结,最后进行了对非常用样式的补充,自此关于CSS进阶篇的主要概念基本讲述完成,我们将要步入js的学习之中。