随笔分类 - 小知识总结（css）
摘要：设置该元素的定位方式为absolute，同时将上下左右的位置大小都设置为0，margin设置为auto，如下图所示：
阅读全文
摘要：在css中添加以下样式： input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }
阅读全文
摘要：css精灵，也叫css sprite，css雪碧图，是背景图的技术，因为如今的网速是很快的，下载一张图片用的时间很少，所以服务器的连接数是现在最珍贵的资源，连接数是有限的，所以通常将网页中一些小图片放在一张大图片中，一次性进行下载，再通过移动背景图的位置，在需要的地方显示对应的图片的位置。（由于移动
阅读全文
摘要：定位：调整元素到网页一个指定位置，让元素处于一个完全脱离文档流的状态，即不会影响到其他元素的位置（和浮动半脱离文档流相比，浮动会影响到其他元素的位置） 相对定位relative：相对于元素在正常文档流的位置的相对定位位置。四个偏移量，默认是0的时候，以元素标准流的四个角度为参考点，水平方向：left
阅读全文
摘要：此篇文章淘宝logo布局指的是淘宝首页上紧跟搜索框的logo布局，即如下图所示： logo在网站布局中是十分重要的，相当于网站的一个大标题，所以要用h1标签进行嵌套（h1标签在网页布局时只能出现一次，代表大标题，其他标题标签可出现多次），而不能直接使用一个logo图片，同时要考虑到搜索引擎不能识别图
阅读全文
摘要：浮动最开始其实是做文本环绕的，因此给某个元素设置浮动后，本来布局在该元素下面的元素会跑上去，并且会压住下面的元素，但是却不会压住下面元素中的文字。 示例一：有两个div元素，第一个div的高宽度皆为100px，第二个div的高宽度皆为200px，并且包含一些文字，给第一个div设置左浮动效果如下：
阅读全文
摘要：line-height是可以继承的，当设置了line-height而没有设置height时，height的值就等于line-height，在以下代码中，id为nav的div的height就等于50px，而对于a标签来说，会自动继承div的line-height属性，因此a标签的line-height
阅读全文
摘要：img元素在底部会与其他元素之间留下一段距离的空白，并且通过给该行内块元素设置下外边距或者给其他元素设置上外边距都无法消除这个空白，解决的方案是将显示模式改成块级显示模式。（由此可以看出行内块元素在一定程度上并不稳定，当做样式时，若行内块和块级显示同样的效果，应尽量选择块级显示模式） 如下例：在im
阅读全文
摘要：一、元素添加浮动后，会处于一个半脱离文档流的状态，如果没有给浮动元素的父元素设置固定的高度，那么父元素会认为没有内容撑开自己，因此父元素的高度为0，此时下面的元素会上来，被浮动元素压在下面。 解决方案： 1.给父元素设置固定的高度（父元素会缺乏灵活性，不能靠其内容自由变换撑开高度） 2.给父元素设置
阅读全文
摘要：1.外边距合并问题 垂直排列的两个块级显示模式的元素，为上面的元素设置下外边距，为下面的元素设置上外边距，外边距会产生合并，当两个值相等时则外边距就是那个值，当两个值不相等时则外边距就是值大的那个值。（两个块级显示模式的元素设置为浮动后再对第一个元素设置右浮动，对第二个元素设置左浮动，不会产生合并问
阅读全文
摘要：当元素的显示模式为块级显示模式时，如果不给该元素设置固定宽度，宽度会和父元素的宽度相同，此时给元素设置水平方向的padding，那么宽度会自动进行计算，不会撑大盒子，如果该元素设置了固定宽度，那么加了水平方向的padding会撑大该元素。
阅读全文
摘要：后代标签会继承父辈标签的所有关于文本的属性，会优先继承离它最近的父辈元素的属性，一层一层向外，继承的权重为0.（权重大小如下：标签选择器＜类选择器＜id选择器＜ 行内样式 ＜！important，可分别设其为1,10,100,1000,10000，遇到多种情况时可通过对权重求和比较谁的权重最大，那么
阅读全文
摘要：1.行级、行内块元素水平居中：text-align：center，将该样式设置在父元素中，能使父元素中的文本、行内元素（<span> <i> <strong> <u>等等）、行内块元素（如<img>、表单元素等）居中，但是不能让父元素中的块级元素居中。 2.块级元素水平居中：magin：0 auto
阅读全文
摘要：在css中为相同的样式设置不同的属性时其样式都可以实现，但是存在权重级别。当权重不同时，会实现权重较大的属性；当权重相同时，则根据自上而下的顺序，后面的属性会覆盖前面的属性。权重级别如下：标签选择器＜类选择器＜id选择器＜ 行内样式 ＜！important（指在相应的属性值后添加该字段，如：colo
阅读全文
摘要：块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height
阅读全文
摘要：1.派生选择器（有时也叫后代选择器），根据上下文之间的关系进行选择，几种选择器可以结合使用，不同选择器之间用空格隔开，例如对某个id = "top" 内的a标签设置字体颜色样式：#top a{color : red;} 2.id选择器，根据元素的id属性设置样式，在id属性值之前加“#”。 3.类选
阅读全文
浙公网安备 33010602011771号