块级元素(block-level)和行内级元素(inline-level)的区别(一):块级元素可以包含行内元素和块级元素,并且内联元素只能包含行内元素块级元素和文本内容可以占据一整行,内联元素只能占据内容的宽度。块级元素可以设置宽高margins、padding,行内元素不能设置宽高。设置上下边距和padding不生效,左右边距和padding生效。(在设置背景色和边框显示的情况下,padding和margin在视觉上会被拉伸,但实际占用的位置不变)(二)常用的块级元素divh1h2h3h4h5h6p形式pretabletrthtdolliuldldddt(3)常用内联元素emstrongspanimgabuttonlabelselectinputtextareacode2.盒模型盒模型内容的宽度、高度、填充、边框和边距。3、宽高对行内元素无效,只对块级元素有效。框{背景颜色:红色;宽度:100px;高度:20px;}4。border(1)border的主要参数:1.宽度2.样式(样式有实线、虚线点、虚短直线)3.颜色//例1.list{border:1pxsolid#ddd;}//Example2用border画三角形.triangle{width:0;高度:0;border-top:100pxsoliddeepskyblue;左边框:100px实心透明;border-right:100pxsolidtransparent;border-bottom:100px实心透明;)边框圆角border-radius.control{width:100px;height:100px;border-radius:4px10px8px5px;//分别为左上角、右上角、右下角、左下角的直径//可以用百分比作为半径的参数//border-radius:50%或者直径圆角的大于半径,可以得到一个圆}5.Innermarginpaddingpadding:10px20px30px5px;//分别代表左上、右上、右下,左下的内边距宽度//可以简写为上下10px,左右20px;填充:10px20px;6、外边距margin(1)基本使用margin:10px20px30px5px;//分别代表左上角、右上角、右下角,左下角的margin宽度(2)合并margin(3)块级元素自动居中margin:0auto;//相当于等距离左右边距,居中7.去掉默认浏览器样式*{margin:0;填充:0;}8.display指定元素块级使用的渲染框类型:blocklist-itemtableinline:inlineinline-blockinline-tablenone不显示元素。块显示为块元素。inline显示为行内元素inline-block显示为行内块,创建BFC9.fontfont-size:30px字号,chrome最小字号为16px,font-weight:文字粗细(regular默认为bold粗体)font-family:fontline-height:lineheightp{font:12px/1.5"SourceHanSans",Helvetica,Arial,sans-serif;}10.Text(1)text-align使用text-align属性设置文本对齐方式。leftAlignleftrightAlignrightcenter居中,当设置在图片的父元素上时,可以使图片居中对齐两端(2)text-indent首行缩进距离p{text-indent:2em;/*Article'sEachparagraphstartswith2spaces*/}(3)text-docoration用于设置文字下划线样式text-docoration:none取消下划线text-docoration:underlineunderlinetext-docoration:overlineoverlinetext-docoration:line-中的破折号(4)text-transform属性用于改变字母的大小写。text-transform:none取消转换效果text-transform:uppercasetouppercasetext-transform:lowercasetolowercasetext-transform:capitalizetofirstlettercapitalize(5)letter-spacingletter-spacing属性用于设置文本/信件。(6)word-spacing属性用于设置字/字之间的间距11.文字超出省略demo:linkdescription.card>h3{white-space:nowrap;//空白字符:文字不换行溢出:隐;//隐藏多余的文字-overflow:ellipsis;//文字超出的地方,加一个省略号}12.颜色颜色字:红蓝黑粉红十六进制:#fff#000#0f0#eee#333#666#f034ec所有颜色都是红绿蓝三种颜色混合而成,所以把每种原色分成255份,用16进制显示。两个相同的字母可以省略,所以#fffffff可以写成#fff。rgb(255,255,255)分别代表红绿bluergba(255,255,255,0.5)分别代表红绿蓝透明度(0为透明,1为不透明)#000为黑色#fff为白色其他三个字母基本都是深浅不一的灰色Gray13.单位px:固定单位,像素的意思em:相对单位,相对于父元素的大小rem:相对单位,相对于html根元素的大小vm:相对单位,1vm是屏幕宽度的1%,但是compatible很差14.一个链接样式(1)设置颜色一个链接的颜色不能被继承,也不能通过为父元素设置颜色来继承到一个链接。a链接的颜色只能直接选择a链接a{color:red;}取消a链接a的下划线{text-decoration:none;}15.取消li前面的.li在ul{list-style:none;}16.隐藏元素opacity:0整体透明度为0visibility:hidden;隐藏,但仍然占据位置display:none;消失,不占位置rgba(255,255,255,0)只有背景色透明
