当前位置: 首页 > Web前端 > CSS

CSS中的宽高

时间:2023-03-30 19:24:45 CSS

divdiv的高度是由里面的字体乘以字体建议的行高决定的,与字号无关(不同字体相同字号会影响div的高度。)如果您明确告诉浏览器行高,则div高度就是行高。文本对齐:文本对齐只有中文可用,英文不需要对齐。块级元素:text-align:justify内联元素:只会显示中间的一个空格。如果需要使用多个空格,可以使用 (无断行空格),但实际上并不是一个空格。无法删除此空格。该方法受字体限制,不能使用该方法实现对齐。每当两个内联元素之间有回车、空格、制表符或任何不可见的字符时,它将显示为空格。span{边框:1px纯绿色;显示:内联块;宽度:5em;文本对齐:对齐;行高:20px;//行高也是20pxheight:20px;//enforcespanheight,heightislimited死亡后,蓝线会离开它overflow:hidden;//蓝线不可见}span::after{content:'';显示:内联块;边框:1px纯蓝色;//不可见的东西加一个border,它的宽度和span一样宽,加了这个之后,name的两个字符要和宽度为100%的蓝色对齐,}floatleftandrightlayoutandaddfloatto所有子元素:left;在子元素的父元素中添加class="clearfix",在样式中添加如下三行clearfix代码:ul{margin:0;填充:0;list-style:none;}ui>li{border:1pxsolidred;float:left;}.clearfix::after{content:'';显示:块;clear:both;}documentflowdocumentflow:inlineelementsfromlefttoright,blocklevelelementsfromtoptotop接下来,div的高度由其内部文档流中元素的高度之和决定。从文档流中分离出来,给子元素添加:float:left;,position:absolute;,position:fixed;行内元素的文本就够了,一行不够就自动换行,这就是文档流;如果一个单词太长以至于一行都放不下:要么使用连字符连接前后,要么使用word-break:break-all,意思是什么时候应该断开,不管他是不是一个整体。文本隐藏块级元素一行文本隐藏显示:p{white-space:nowrap;溢出:隐藏;text-overflow:ellipsis;}块级元素多行文本隐藏display:p{display:-webkit-box;-webkit-线夹:2;-webkit-box-orient:垂直;overflow:hidden;}margin合并问题:如果父元素内部有子元素,父元素的高度会受到子元素margin的影响,如果父元素被什么东西挡住与子元素的marginelement(border,padding,overflow:hidden,inlineelement),父元素和子元素之间有空隙,否则没有空隙,子元素的外边距会溢出父元素,从而影响父元素与其外部元素的距离。垂直居中文字垂直居中,不要写死高,写一个行高,剩下的高度用padding补上。子元素在父元素中垂直居中:只需在居中的父元素上下垂直添加padding,左右添加margin即可:0auto;父元素全屏(2种):a.margin:auto;并且子元素的高度是固定的,绝对定位;b.父元素加上:display:flex;justify-content:center;align-item:center;