box-sizing
calc()
max-windth
min-content
inline-block
vartival-align
display:table-cell
属性指让标签元素以表格单元格的形式呈现
今天重新学习了一天的网页排版,这个是真的很重要
今天总结了以下比较重要的css标签(css是排版的重点)
box-sizing值有content-box 默认
border-box
inherit 继承父元素
box-sizing:content-box
如果默认的话设置width:300px,那么只要内容为300px,真正的盒子需要的大小是 边框+内边距+内容如下 实际大小为332px如果设置自适应的话要量好标准,如果想下方那样的话就会很困扰
而box-sizing:border-box
设置width:300px 的话。真正的的大小就为300px这里包括了边框+内边距+内容
calc() 这个一个css函数可以实现水平居中的效果 如calc(50%-图片自身的宽度) 如果要图片水平居中的话,这样的话就不用再往图片外层套一个div之类的行元素了。
max-windth 理解为最大宽度可以是
min-content 这个是css3新出的样式 请浏览https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/
inline-block 请浏览 https://zhuanlan.zhihu.com/p/31856017 这个元素可以让子元素(子元素为行元素)撑开父元素
vertical-align 属性设置元素的垂直对齐方式。
元素设置为display:table-cell vertical-align:middle 可以垂直居中 (平时可以用与字体)
垂直居中也可以用line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了
垂直居中
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
length | |
% | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |