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

CSS基础_6

时间:2023-03-30 22:52:59 CSS

基本概念CSS(CascadingStyleSheets)1.什么是层叠?样式级联可以对同一个选择器进行多次样式声明Selector级联可以使用不同的选择器对同一个元素进行样式声明文件级联可以使用多个文件进行级联/**/;}语法2@charset"UTF-8"//声明字符编码@importurl(2.css);//导入额外的css文件@media(min-width:100px)and(max-width:200px){语法1}3.MDNCSS相关的CSS检查信息ticks张新东4.文档流向:内联元素从左到右边,并且当它们到达最右边时将换行例如从上到下的spanblock元素,每个开始一个新行例如divinline-block元素也是从左到右的内联元素:内联宽度是内部内联元素的总和,width不能用来指定行内高度是由line-heigth间接决定的,与height无关。块级元素:block默认自动计算宽度,availablewidth指定块的高度由内部文档流元素决定,heightblock可以设置默认自动计算宽度,width可以指定备注:width默认值为auto,注意千万不要自己设置width:100%;inline-block:inline-block结合前两者备注:默认宽度和inline一样,但是你可以自己设置高度;inline-block类似于block,可以设置高度注:1.没有行内元素和块级元素。可以说这个元素目前是一个inline-blockLinked,或者block-level。因为这些元素可以通过display:inline或者display:block修改默认样式2、不要在inline元素中添加displayasblock的元素,否则会出现overflow:当内容的高度或者高度大于容器的那个。会发生溢出注意:当内容的高度或宽度大于你设置的高度或宽度时,内容会溢出。可以使用overflow来设置是否显示滚动条。相关值:scroll(永远显示),auto(灵活设置),hidden(隐藏溢出内容),visible(直接显示溢出内容)outofthedocumentflow:块的高度可以由内部文档流决定inother换句话说,如果块中的元素不在容器中,即文档流外,则容器不会计算文档流外元素的高度。设置文档流外元素的样式:float:left;position:absolute/fixedExtra:纠错方法:边框调试方法(给元素添加边框),开发者检查,开发者工具5.盒模型content-box(内容盒):widthonlycontainscontent-content是border的boxborder-box(边框框):宽度包括border-frame是框的边框content-boxwidth=contentwidth备注:高度相同border-boxwidth=contentwidth+padding+border只发生在上下边距,左右边距不会重叠maginmerge:前提是里面的值相同,即padding和border。如果要改变边距的重叠,只需要让里面的值不同即可。基本单位:px-pixelem-相对于自身font-size的倍数,即font-size*em的百分比整数16进制:例如#FF6600rgb(0,0,0)/RGBAcolorrgba(0,0,0,1)