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

Documentflow&text&CSS常用命令

时间:2023-03-30 17:35:28 CSS

DocumentflowDocumentflow是文档中元素的流向Flowdirection内联元素从左到右流动,宽度不够,锯齿形,元素会被截断块状元素从上往下流动,逐行注释内联元素中有英文单词,流动时宽度不够。英文单词会整体迁移,不会被打断。如果你想打断上面的连接,请使用css属性/*你想打断的inline元素*/{word-break:break-all;display:inline-block;}脱离文档流,类似于在页面上浮动。位置:固定;位置:绝对;关于字体,页面默认字体大小为16px。字体一般分为上、中、下文字(中西文)相对于基线(下)对齐不同的字体有各自的建议行高,可以指定CSS常用命令字体的line-height设置字体样式/*各种选择器*/{font-family:kai;}boldfont/*variousselectors*/{font-weight:bold;}fontuppercase/*variousselectors*/{text-transform:uppercase;}background相对背景位置自适应/*各种选择器*/{background-position:centercenter;/*水平方向*//*垂直方向*/background-size:cover;/*背景自适应*/background:url(backgroundimageaddress);}Setinnerandoutermarginspaddingmargin/*各种选择器*/{padding:10px20px30px40px;/*toprightbottomleft*/margin:10px20px30px40px;/*toprightbottomleft*/}/*variousselectors*/{padding:10px30px;/*toprightbottomleft*/margin:10px30px;/*top,bottom,left,andright*/}margin甚至可以是广告justed为负值以反方向移动inline元素的左右padding有用,上下padding不影响页面布局,位置保持不变。你可以设置css:display:line-block;使上、下、左、右的padding生效。position定位(详见:https://developer.mozilla.org...)(??????)??/*各种选择器*/{position:relative/absolute/fixed/sticky/static;}固定元素的宽度会自动收缩到最小最紧凑的宽度。您可以使用宽度高度来调整大小。您可以使用左上右下调整位置。你可以使用left:0;右:0;给元素填充可以设置absolute子元素position:absolute;父元素位置:elative;子元素相对父元素绝对定位子元素居中水平居中/*你想让子元素居中的元素*/{text-align:center;}垂直居中/*使用vertical-align需要父元素必须有行高,如果没有,必须手动添加:line-height:;*//*想要居中的子元素*/{verticle-align:center;}使页面中的内联元素居中:wrap它带有一个块元素,然后添加css:

div{text-align:center;}设置子元素的高度height:100%;,在父元素中给元素添加等量的padding
div{padding:10px;}span{height:100%;}使用flex布局:左右居中,垂直居中。将以下css添加到父元素:/*aparentelement*/{display:flex;对齐项目:居中;justify-content:center;}borderroundedcorners/*需要圆角边框的元素*/{border:1pxsolidred;//设置元素边框border-radius:30px;//设置边框圆角30px}图标可以登录网站:http://www.iconfont.cn/,将网站生成的添加到html中,为添加css属性,改变样式svg{width:height:fill:/*color*/margin:padding:}othermousehovering/*各种选择器*/:hover{color:red;}inheritfromparent不是所有的属性都可以继承/*各种选择器*/{color:inherit;}cssbrokenthoughts标签去掉列表下划线a{text-decoration:none;}内联元素不能设置高度(height)和宽度(width)应该转化为块级元素(display:block;)或内联块级元素(display:inline-block;)自己写的属性优先级高于浏览器,默认高line-height可以决定内联元素的高度。在html编程中,两行代码和回车之间的空格会变成一个空格。相同的颜色不同的字体有不同的颜色设置。上下padding也是居中的,只对块元素有效,对行内元素无效。高line-height和font-size的差值会自动填充在字体的上下边框和浮动动画操作(如:hover)边框之后,元素会左右浮动。这是因为一开始是没有边框的,操作后多出来的时候,给一开始的元素加上【透明边框】,先竖起来,然后就会出现动画边框颜色。当行内元素框模型超出父级默认显示:inline;当元素被包裹时,它的padding和margin有时会超过parent需要设置display:block;solution/*inlineelement*/{display:block;}div高度由内部文档流元素的高度之和决定了内联的高度。强求精确测量是没有意义的。设置元素的宽高锁定宽度,浏览器窗口变小。使用滚动条将最大重量设置为最大宽度。浏览器窗口变小,自适应窗口。推荐使用margin-left:auto;右边距:自动;在设置宽度或最大宽度时使元素居中。内联元素不接受设置宽度和高度。设置显示:内联块;但支持padding和margin,可以使用它们代替。为防止不同电脑效果不一致,可以在css中表达下一个元素的大小进行确认