一. vertical-align
作用:用来解决行元素或者行级块元素在垂直方向上的对齐方式
基线: 基线的位置是不固定的 默认情况下行元素在当前行的垂直方向上的对齐方式是"基线对齐"
-
在文本类型的行元素中, 基线是字符x的下切线
-
在img类型的行元素中, 基线是图片的下边缘位置
-
在inline-block类型的行元素中, 分两种情况
-
如果该元素中有其他行元素, 其基线就是最后一行行元素的基线
-
如果该元素里没有其他元素, 其基线就是该元素margin的底边缘
-
vertical-align的值:
-
baseline(默认值) 基线对齐
-
top 元素的顶端与当前行的顶端对齐
-
text-top 元素的顶端与当前内容的顶端对齐
-
middle 元素的中心点与当前行的基线再加上1/2字母x高之后的位置对齐
-
bottom 元素的底端与当前行的底端对齐
-
text-bottom 元素的底端与当前内容的底端对齐
-
sub 降低元素的位置到当前行的下标位置对齐
-
super 提高元素的位置到当前行的上标位置对齐
vertical-align能解决的问题:
-
多个行元素在垂直方向上居中(vertical-align:middle)
-
图片底部有缝隙的问题
-
vertical-align:middle/top/bottom
-
display:block
-
将父级的行高设置成0
-
二. 媒介查询
作用: 通过监听设备的尺寸变化, 触发对应的代码, 达到修改页面布局的目的
语法: @media 要监听的媒介类型 and (监听的阈值) {}
要监听的媒介类型
-
only screen 手机, 平板, 电脑
-
print 打印机
-
speech 读音设备
-
all 所有设备
监听小于某个临界值, max-width:1000px, 表示当前媒介能监听到的最大值是1000px, 其可监听的范围1000px以内监听大于某个临界值, min-width:1000px, 表示当前媒介能监听到的最小值是1000px, 其可监听的范围是1000px以上
// 默认设置body背景色为黄色body { background-color: yellow; } } // 当监听到浏览器宽度大于800px时将其改成蓝色 @media only screen and (min-width: 800px) { body { background-color: blue; } }
注意:所有跟媒介查询有关的代码尽可能的往后写!!
<link rel="stylesheet" type="text/css" href="media.css" media="screen and (max-width: 800px)"/>
三. 表格
一个完整的表格最外层是table标签, 里面由thead, tbody, tfoot组成, thead, tbody, tfoot不是必须都要写, 一个表格最重要的部分是tbody, tbody里书写表格的内容, 该标签可以不人为书写, 如果table检测到其内部没有书写tbody, 它会自动生成一个.
table的常用属性:
-
border 表格的边框
-
cellspacing 单元格之间的距离
-
cellpadding 单元格自身内容与边框之间的距离
注意: 以上属性产生的效果都可以通过 css样式 等效实现, 建议尽可能用table的属性, 实在不行再用css样式
每一列单元格的宽度永远会保持一致, 以内容最多的单元格为标准 单元格可以通过th和td实现, 两者的区别是:th会自动居中, 且文字默认加粗
合并单元格, 需要以下两个属性, 该属性是th和td的
-
colspan 列合并 是将不同列上的单元格合并, 效果为横向合并
-
rowspan 行合并 是将不同行上的单元格合并, 效果为纵向合并
四. 圆角 border-radius
单独设置某一个角的圆角值: border-方位词-radius
-
填一个值表示这个角的水平和数值 值相同
-
填两个值: 第一个值表示水平方向的值, 第二个值表示竖直方向的值
合写
-
一个值: 设置四个角且每个角的水平和竖直值相同
-
二个值: 第一个值表示左上角和右下角, 第二个值表示右上角和左下角, 且每个角的水平和竖直值相同
-
三个值: 第一个值表示左上角, 第二个值表示右上角和左下角, 第三个值表示右下角, 且每个角的水平和竖直值相同
-
四个值: 从左上角开始, 顺时针依次设置, 且每个角的水平和竖直值相等
如果想要将每个角的水平和竖直的值设置不同, 需要在设置圆角值时, 将水平的写在一起, 竖直的写在一起, 中间用/隔开
border-radius: 10px 15px 20px / 20px 30px 40px;
