css
石界星空
我的梦,在星空深处
展开
-
文章标题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ display: inline-block; /*width: 1140px;*/ marg原创 2017-04-15 17:40:25 · 223 阅读 · 0 评论 -
css优化滚动条默认样式
css样式:.inner{ width: 265px; height: 400px; position: absolute; top: 33px; left: 13px; /*cursor: pointer;*/ overflow...原创 2018-10-11 11:30:14 · 650 阅读 · 0 评论 -
浮动元素的垂直居中问题
// 方法一:已知元素的高宽#div1{background-color:#6699FF;width:200px;height:200px;position: absolute; //父元素需要相对定位top: 50%;left: 50%;margin-top:-100px ; //二分之一的 height,widthmargin-left: -100px;}//方法二:未知元素原创 2017-07-29 11:42:15 · 766 阅读 · 0 评论 -
inline-block IE兼容处理
兼容性:IE6、IE7不识别inline-block但可以触发块元素。其它主流浏览器均支持inline-block。解决IE6、IE7兼容性的方法:1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。2、直接设置display:inline,使用zoom:1触发layout。兼容所有浏览器转载 2017-07-29 11:34:13 · 242 阅读 · 0 评论 -
css做正八边形
用css样式实现,八边形图片有边框并边框和图片有间距的,请多多指教 css部分.pictrue{ box-sizing: border-box; position: relative; width: 400px; height: 400px; transform: rotate(45deg); overflow: hidden;}.pictrue .item{ bo转载 2017-08-04 10:56:13 · 2675 阅读 · 0 评论 -
css3写幻灯片css部分
div.ani /**css**/ .ani{ width:480px; height:320px; margin:50px auto; overflow: hidden; box-shadow:0 0 5px rgba(0,0,0,1); background-size: cover; background-position: center; -webkit-animation原创 2017-07-29 14:38:22 · 444 阅读 · 0 评论 -
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点。后来我觉得这个题目应该能拆成几个点来回答:1、’display’、’position’ 和 ‘float’ 的相互关系;2、position跟display、overflow、float下的margin collapse。一、’display’、’position’ 和 ‘float’ 的相转载 2017-07-29 14:30:03 · 818 阅读 · 0 评论 -
CSS引入的方式及link和@import的区别
引入方式有:行内式、导入式、内嵌式、链接式。link和@import的区别:(1)link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。(2)link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。(3)link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。(4转载 2017-07-01 14:57:54 · 481 阅读 · 0 评论 -
前端页面的三层构成
构成:结构层、表示层、行为层。结构层(structural layer):由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:“这是一个文本段。”表示层(presentation layer):由 CSS 负责创建。 CSS对“如何显示有关内容”的问题转载 2017-07-01 14:55:06 · 764 阅读 · 0 评论 -
清除浮动8种方式
(1) 父级元素定义 height; 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题; 优点:简单、代码少、容易掌握; 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 建议:不推荐使用,只建议高度固定的布局时使用; (2) 结尾处加空div标签 clear:both 原理:添加一个空div,利用css提高的cle转载 2017-07-01 14:44:49 · 348 阅读 · 0 评论 -
纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。html结构:<div class="box box1"> <span>垂直居中</span></div>方法1:table-cell.bo...转载 2019-03-28 22:18:35 · 105 阅读 · 0 评论