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

CSS基础知识(二)

时间:2023-03-30 17:59:57 CSS

八、背景与阴影8.1背景1、背景颜色background-color:颜色值;默认值为透明2。背景图片background-image:url('...');3.背景平铺当图像区域小于方框时,图片会复制自己,然后平铺整个方框,我们可以使用background-repeat设置是否平铺background-repeat:repeat|不重复|重复-x|repeat-yrepeat:平铺,默认值为no-repeat:不平铺repeat-x:水平平铺repeat-y:垂直平铺4.图片位置background-position属性可以改变图片在背景中的位置background-position:xy参数表示:x坐标和y坐标,可以使用位置名词或精确单位length:百分比或数值+单位position:位置词,如:top,bottom,left,center,rightposition位置词/*upperleftcorner,两者的顺序相反*/background-position:topleft如果只写了一个,那么第二个默认就是中心参数background-position:20px50px的确切单位;如果只写一个,第二个默认居中5.背景图片固定。滚动背景附件的其余部分:scroll|fixedscoll:背景图片随对象内容滚动(默认值)fixed:背景图片固定背景合成写法:background:颜色地址是否平铺或滚动位置8.2框阴影box-shadow属性为添加阴影totheboxbox-shadow:h-shadowv-shadowblurspreadcolorinset值说明h-shadow必填,水平阴影的位置(值+单位)v-shadow必填,垂直阴影的位置(值+单位)模糊是可选的,模糊距离(数字+单位)传播是可选的,阴影的大小(数字+单位)颜色是可选的,阴影的颜色插入是可选的,将外部阴影(开始)更改为内阴影(默认它被识别为外部阴影)box-shadow:00px15px5px#333;框阴影不占空间8.3文字阴影text-shadow设置文字阴影box-shadow:h-shadowv-shadowblurcolor同box-shadow:00px15px#333;9。浮动9.1什么是浮动首先说标准流程。标准流程就是我们正常的div,h1~h6,span等一系列块元素和内联元素按照从上到下,从左到右的排序方式进行排序所以,标准流程是按照默认方式排列的,这是最基本的布局方式。所谓浮动就是改变元素的排序方式,使一个或多个元素排成一行显示。9.2浮动float用于创建浮动框,将其移动到一侧,可以是左或右float:left|对|nonenone:不浮动(默认)left:左浮动right:右浮动然后保持原来的位置,会向上浮动显示在一行中,顶部对齐的浮动元素会粘在一起。如果一条线放不下,将显示另一条线。浮动元素将具有行内元素的特征。任何元素都可以设置为浮动,并且可以修改大小。注意事项:浮动元素与标准流父框配对。首先使用标准的流式排序父元素的上下位置,内部子元素采用浮动排序(常用方式)。如果一个元素浮动,理论上其余的兄弟姐妹也应该浮动。floatingboxonly会影响后续的standardflowboxes,不会影响前面的9.4Clearfloating(重点)由于浮动元素不再占据源文档流的位置,所以会影响后面元素的布局.一句话:父盒无高,子盒无高。盒子是浮动的,影响下面的布局。清除浮动的本质是:将浮动元素的影响清除出标准流;清除浮动后,parent会根据浮动框自动检测高度,如果parent有框则不会影响后面的标准流程中四种清除浮动的方法清除浮动的策略是:关闭浮动,即就是,锁定浮动在父框内,不影响父框外的其他框1.额外标签method.clear{clear:both;}大毛

二毛
</div>
三毛
这样大毛和二毛的浮动不会影响三毛的标准流程注意:新建的空标签必须是块element优点:易懂易写缺点:添加无意义的标签,结构差,多用2.父元素添加overflow浮动框父元素添加overflow属性,属性值可以隐藏,auto,滚动。overflow:hidden}优点:简单缺点:溢出内容不显示3.:after伪元素方法:after方法是extra标签方法的升级版,也是添加到父元素中。框:在{内容:“”之后;/*转换为块元素,因为它具有环绕的特性*/display:block;高度:0;明确:两者;visibility:hidden;}优点:没有额外的标签,照顾低版本浏览器缺点:样式有点复杂,有些还是有的会加上下面的,帮助清除浮动,防止容器塌陷。box{zoom:1;}4.双伪元素清除方式在父box前后添加clear元素。clearfix:before,.clearfix:after{content:"";/*转化为表格,也是块级元素*/display:table;}.clearfix:after{clear:both;}.clearfix{/*IE6,7独占*/*zoom:1;}10,定位(强调)定位是让盒子在盒子内自由移动或固定在屏幕上的某个位置10.1静态定位静态定位是默认的定位方式,即不定位,一般用处不大10.2相对定位Relativepositioning就是相对于它原来的位置(以我为中心)移动div{position:relative;顶部:100px;left:100px;}该值也可以是百分比注意:相对定位不是off-label,即原来的位置还是保留position;请注意,保留原始位置。至于运动,它会飘起来挡住其他箱子。最典型的应用就是使用绝对定位作为父亲(childrenandfathers)。10.3绝对定位绝对定位是指元素的移动是相对于其父元素而言的div{位置:绝对;顶部:100px;left:100px;}注意:绝对定位是off-label,不再占据原来的位置。如果没有父元素或者父元素没有定位,相对于浏览器视口,如果祖先元素有定位(相对、绝对、固定定位),最后一级定位的祖先元素作为参考点移动位置。场景:当浏览器滚动页面时,元素的位置不会改变div{position:fixed;顶部:100px;left:100px;}注:fixed定位是off-label,以浏览器可见窗口为参考,不滚动fixed定位用于滚动可以看成是一种特殊的绝对定位10.5Sticky定位Sticky定位可以认为是一种混合相对定位和固定定位的区别,Stickystickydiv{position:sticky;的语法top:10px;}粘性定位的特点:浏览器可见窗口是移动元素的参考点(固定定位特性)粘性定位占据原位置(相对定位特性)必须加上top,left,right其中之一,bottom有效,否则为相对定位10.6定位堆叠顺序z-index使用定位布局时,框可能会重叠。这时候可以用z-index来控制boxes的前后顺序(Z轴)div{z-index:100}values可以是正整数,负整数或者0,默认是auto,值越大,盒子越高。如果属性值相同,则按照书写顺序,后者在上。不要在数字后添加单位。只有定位框才具有z-index属性。10.7定位的扩展1、Son-to-father-to-child-to-father-to-child是定位中最常用的定位方式:如果child是绝对定位,parent必须使用相对定位。兄弟框的父框需要添加定位限制。父框的布局在子框显示时,需要占一个位置,所以父亲只能相对定位。当然因为parent需要占一个位置,所以是相对定位;如果父元素不需要占位,2.绝对定位的框居中。绝对定位的盒子不能通过margin:0auto水平居中,但是可以通过以下方法实现水平和垂直居中:left:50%将盒子的左边移动到父元素水平居中位置margin-left:-25px:让盒子儿子{宽度:50px;高度:100px;背景色:粉色;位置:绝对;左:50%;顶部:50px;margin-left:-25px;}3.特殊定位属性给行内元素添加绝对或固定定位(off-label),可以直接设置高和宽。向块级元素添加绝对或固定定位。如果你不给宽度和高度,默认大小是内容的大小。4.boxesoff-label不会触发marginscollapsingfloatingelements,absolutepositioning,fixedpositioningelementsarenottriggerthemarginmergingproblem5.Absolutepositioning(fixedpositioning)会完全压制box的浮动框,只它下方的标准流程框,但不抑制下方标准流程框中的文本。但是,绝对定位和固定定位会压制下面标准流程的所有内容。