元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 一.CSS 内边距属性 属性 描述 padding 简写属性.作用是在一个声明中设置元素的所内边距属性. padding-bottom 设置元素的下内边距. padding-left 设置元素的左内边距. padding-right 设置元素的右内边距. padding-top 设置…
CSS有三种基本的定位机制:普通流,浮动和绝对定位. 普通流:在普通流中元素框的位置由元素在html中的位置决定, 1.元素position属性为static或继承来的static时就会按照普通流定位 2.position属性的relative(相对定位)值时,它将出现在他所在的位置上,然后可以通过设置垂直或水平位置,让这个元素相对于它自己移动,  在使用相对定位时(top.left),无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变. <div style="border:…
display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级元素 list-item:inline:将元素变为列表显示(一般不用) table:将元素变为块级表格元素,前后带有换行符 inline-table:将元素变为内联表格元素,前后不带换行符 table-row:将元素变为表格行,类似tr table-cell:将元素变为表格列,类似td grid:将…
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline    span->div 设置display:block <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont…
1.块级元素:如:<div></div>2.行内元素:如:<span></span>从效果中看块级元素与行内元素的区别: 通过CSS的设置把行内元素转换成块级元素: 标准流:就是标签的排列方式.<div class="style2">我的未来不是梦</div><span id="st" class="style1">栏目一</span><span…
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中才可使用的值) 1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素. 3.absolute:对象脱离常规流,此时偏移…
1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:…
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了一些新的模块,所以CSS3朝着模块化的方向发展. CSS3中比较重要的模块有:选择器.盒子模型.背景和边框.文字特效.2D/3D转换.动画.多列布局.用户界面. CSS3的选择器常用的和CSS选择器差不多. CSS3 盒子模型 盒子模型是CSS3很重要的一个模型,它是指元素以何种方式显示以及元素间如…
CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li>.<dl>.<dt>.<table>.<form> 常用的内联元素有 <a>.<span>.<i>.<em>.<strong>.<label> 常见的内联块状元素有 <input>…
<body> <div> <img src="mi6.png" > </div> </body> div{ width: 220px; height: 220px; position: relative; } div:hover::after{ content: ""; display: block;/* 原先是行内元素,必须转换宽高才有效 */ width: 100%;/* 宽高100%,因为伪元素的盒子…