随笔分类 - css
摘要：流式布局（百分比布局） 流式布局,就是百分比布局,也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行延伸,不受固定像素的限制,内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式 <!DOCTYPE html> <html lang="en"> <head> <
阅读全文
摘要：一个网页中往往会应用很小的背景图作为修饰,当网页上的图像过多时,服务器就会频繁的接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的速度。 因此为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了css精灵技术（也称csssprites、css雪碧） 精灵图的使用 使用精灵
阅读全文
摘要：类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 1.display 显示隐藏 2.visibility 显示隐藏 3.overflow 溢出显示隐藏 display属性 display属性用于设置一个元素应如何显示 display
阅读全文
摘要：通过盒子模型,清楚知道大部分html标签是一个盒子。 通过css浮动,定位可以让每个盒子排列成为网页。 一个完整的网页,是标准、浮动、定位一起完成布局的,每个都有自己的专门用法。 1.标准流 可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。 2.浮动 可以多个块级元素一行显示或者左
阅读全文
摘要：定位的特殊性 绝对定位和固定定位也和浮动类似 1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度 2.块级元素添加绝对和固定定位,如果不给宽度或高度,默认大小是内容的大小。 3.脱标的盒子不会触发外边距的塌陷 浮动元素,绝对定位(固定定位)元素都不会触发外边距合并的问题。 定位的拓展 绝对（固
阅读全文
摘要：绝对定位的盒子居中 加了绝对定位的盒子不能通过margin:0 auto水平居中,但是可以通过以下方法实现水平居中。 ①left:50%;让盒子的左侧移动到父级元素的水平中心位置 ②margin-left:-100px;让盒子向左移动自身宽度的一半。 <!DOCTYPE html> <html la
阅读全文
摘要：在使用定位布局时,可能会出现盒子模型重叠的情况。此时,可以用z-index来控制盒子的前后次序(z轴) 语法： 选择器:{z-index} 数值可以是正整数,负整数或0，默认值是auto，数值越大,盒子越靠上 如果属性相同,则按照书写顺序,后来居上 数字后面不能加单位 只有定位的盒子才有z-inde
阅读全文
摘要：粘性定位可以被认为是相对定位的混合,Sticky粘性的 语法： 选择器{position:sticky;top:10px} 粘性定位的特点： 1.以浏览器的可视窗口为参照点移动元素(固定定位特色) 2.粘性定位是占有原先的位置（相对定位特点） 3.必须添加top,left,right,bottom其
阅读全文
摘要：固定定位小技巧：固定在版心右侧位置 小算法： 1.让固定定位的盒子left:50%，走到浏览器可视区（也可以看做版心）的一半位置。 2.让固定定位的盒子margin-left核心宽度的一半距离。多走 版心宽度的一半位置 就可以让固定定位的盒子贴着版心右侧对齐了。
阅读全文
摘要：1.浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子。 2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子。 定位组成： 定位：将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子。 定位 = 定位模式 + 变偏移 定位模式用于指定
阅读全文
摘要：页面布局思路 为了提高网页的开发效率,布局时通常有以下的整体思路： 1.必须确定页面的版心(可视区),我们测量可得知 2.分析页面的行模块,以及每个模块中的列模块。其实网页布局第一准则 3.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则 4.制作HTML结构,我们
阅读全文
摘要：RGB就是红色R+绿色G+蓝色B，RGBA说得简单一点就是在RGB的基础上加进了一个通道Alpha. 语法: 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。 R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数| 百分数 A：透明度。取值0~1之间 取值
阅读全文
摘要：实际开发中,我们不会直接用链接a,而是用li,包含链接(li+a)的做法 1.li + a 语义更清晰,一看这就是有条理的列表型内容 2. 如果直接用a,搜索引擎容易辨别成堆砌字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)，从而影响网站排名
阅读全文
摘要：css属性书写顺序 生活中衡量一个人有气质: 穿着打扮 举止言行 等等 编程中衡量一个人的代码能力？ 规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验 建议遵循以下顺序 1.布局定位属性: display/position/float/clear/visibility/overf
阅读全文
摘要：1.浮动和标准流的父盒子搭配 先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置 2.一个元素浮动了,理论上其余的兄弟元素也要浮动 一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
阅读全文
摘要：为了约束浮动元素位置,我们页面布局一般采用的策略是: 先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则。
阅读全文
摘要：浮动特性 加了浮动之后的元素,会具有很多特性,需要我们掌握 1.浮动元素会脱离标准文档流(脱标) 2.浮动的元素会一行内显示并且元素顶部对齐 3.浮动的元素会具有行内块元素的特性 设置了浮动(float)的元素最重要特性 1.脱离标准流的控制（浮）移动到指定位置(动),（俗称脱标） 2.浮动的盒子不
阅读全文
摘要：一。标准流（普通流/文档流） 所谓的标准流,就是标签按照规定好的默认方式排列 1.块级元素会独占一行,从上而下顺序排列 常用元素:div，hr,p,h1~h6,ul,ol,dl,form,table 2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。 常用元素:span a i e
阅读全文
摘要：网页元素很多都带有默认内外边距,而且不同浏览器默认也不一致,因此我们在布局前,首先要清除下网页元素的内外边距 * { padding: 0; /* 清除内边距 */ margin: 0; /* 清除外边距 */ } 注意：行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换
阅读全文
摘要：外边距(margin) margin属性用于设置外边距,即控制盒子和盒子之间的距离 属性 作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-botom 下外边距 外边距典型应用 外边距可以让块级盒子水平居中, 但是必须满足两个条
阅读全文
浙公网安备 33010602011771号