随笔分类 - html/css
摘要：思路:①z-index的结构/定位元素默认的z-index②z-index单位③能不能用子元素和父元素比较④父元素没有z-index，能不能通过子元素控制他们的层级=>改变层级，父元素z-indexz-index属性的特点 默认是书写顺序在后的定位元素覆盖在顺序前的定位元素 可以使用z-index属
阅读全文
摘要：定位的值 position: absolute绝定位 position: relative相定位 position: fixed固定定位 定位的相同点和不同点 相同点: 可以 设置top/ bottom/ left/right四个方位值,如果同时有top、 bottom,只有top起作用;如果同有1
阅读全文
摘要：固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta ch
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /* 8 相对定位特点 9 1.不会离文档流 占位 所有后面的元素不会往前跑 10 2
阅读全文
摘要：clear:both的特点 元素需是块级元素 元素不能带有浮动属性 元素必须放在最后一个浮动元素的后面 用户是看不到这个元素的 clearfix清浮动方法的属性 浮动元素的父级选择器{*zoom:1;}/*只有ie7可识别 css hack写法* 浮动元素的父级选择器: 1 after{ 2 dis
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /* 8 面试题:让元素消失在我们的视野中(发挥你的想象力) 9 1.透明度 opac
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .left,.right{ 8 width: 200px; 9 height: 200
阅读全文
摘要：面试题:如何清浮动给浮动元素的父元素手动添加一个固定的高度(不推荐）给浮动元素的父元素设置overflow:hidden/auto.在浮动元素的父元素结束标签之前加一个具有块元素特点的标签(我们一般用 div),给元素加一个clear:both<divstyle=clear:both"></div>
阅读全文
摘要：给父元素设置背景颜色属性不起作用 给父元素设置边框 border属性没有被撑开 给父元素设置内边距 padding属性也没有被撑开 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <st
阅读全文
摘要：left元素向左浮动; right元素向右浮动; none默认值。元素不浮动,并会显示在其在文本中出现的位置; iherit规定应该从父元素继承float属性的值 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <titl
阅读全文
摘要：文档流:指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最 终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素 每个非浮动块级元素都独占一行,浮动元素则按规定浮在行的一端。若当前行容不下 则另起新行再浮动 内联元素也不会独占一行;几乎所有元素(包括块级,内联和列表元素)均
阅读全文
摘要：float元素的特点:浮动元素在一行显示!设置属性值为left时,浮动元素会依次从父级盒子的左侧向右排布,设置属性值为right时,浮动元素会依次从父级盒子的右侧向左排布浮动元素自动具有块级元素的属性浮动元素脱离文档流浮动元素内的子元素,不会继承浮动属性浮动元素下面的元素不能识别浮动元素的高度和位置
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .box{ 8 width: 600px; 9 /*多行文本出现省略号必备的条件:主要
阅读全文
摘要：单行文本出现省略号必备的4个条件缺一不可: width宽度(不写宽度默认继承父元泰的宽度) overflow:hidden溢出隐臧 white-space:nowrap;强制不折行 text-overtlo:ellipsis;文字隐藏的方式:以省略号的方式隐臧 1 <!DOCTYPE html> 2
阅读全文
摘要：如图所示: display: inline 1 <div class="text1">文字一</div> 2 <div class="text2">文字二</div> 1 .text1,.text2{ 2 display: inline; 3 } display: inline-block 1 <d
阅读全文
摘要：1.overflow溢出隐藏 1 <p class="box">栏目概述:①平面设计是什么?平面设计需要学什么?平面设计软件有哪些?ps,AI,cdr为设计师常用做图软件,栏目分享设计师构图经验与素材网站网址.②web前端如何学?前端开发语言有哪些?前端需要学什么?栏目分享html,css,js,h
阅读全文
摘要：background-position背景定位： background-position属性设置背景图像的起始位置; xpos ypos第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是长度值px,关键字和百分数值; 关键字成对出现 left right top bottom center,
阅读全文
摘要：CSS中background的属性值 background-color background-image background-repeat background-position background-attachment 复合属性:background:background-color back
阅读全文
摘要：padding-box:从 padding区域(含 padding)开始显示背景图像; border-box:从 border区域(含 border)开始显示背景图像; content-box:从 content区域开始显示背景图像 1 <!DOCTYPE html> 2 <html> 3 <hea
阅读全文
摘要：background-clip设置对象的背景图像向外裁剪的区域 padding-box:从padding区域(不含 padding)开始向外裁剪背景; border-box:从border区域(不含 border)开始向外裁剪背景; content-box:从content区域开始向外裁剪背景; t
阅读全文
浙公网安备 33010602011771号