网页排版

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这里包括了边框+内边距+内容

1546768224619

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 属性的值。

猜你喜欢

转载自www.cnblogs.com/benjieming421/p/10229714.html