css篇
文章平均质量分 76
YinghaoGuo
趁着年轻去努力,别对不起儿时吹过的牛逼。
展开
-
解决inline-block引起的空白间距问题
当我们在对元素的display属性使用inline-block值时,会在元素间形成一定宽度的空白间距。看一段代码: inline-block li{ display:inline-block; width:100px; height:100px; border-radius:1em; padding:10px; }转载 2017-09-18 00:12:09 · 1033 阅读 · 0 评论 -
关于子元素的margin-top属性会传给父元素的问题
问题描述:一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化。html结构:css样式:.box1{height:400px;background:#fad;}.box1_1{height:100px;margin-top:50px;background:#ade;}解决办转载 2017-09-18 00:02:31 · 1224 阅读 · 1 评论 -
前端的BFC、IFC、GFC和FFC
什么是BFC、IFC、GFC和FFCCSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。1、BFCBFC(Block Formatting Context转载 2017-07-26 17:12:04 · 2974 阅读 · 0 评论 -
加载css的link和@import的区别
网页加载css文件有两种方式:@import url("b.css");对比: link属于XHTML标签,而@import是CSS提供的;link标签除了可以加载CSS外,还可以做很多其它的事情,@import就只能加载CSS了。import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;页面被加载的时,link会同时被加载,而@impor原创 2017-08-18 13:55:12 · 790 阅读 · 0 评论 -
css实现div的水平和垂直居中
方案一:div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,代码两个关键点:1.上下左右均0位置定位; 2.margin: auto; 其width、height如何更改都是居中显示的,兼容性可以,IE7及之前版本不支持.div1{ width: 100px; height: 100px; border:原创 2017-04-27 15:49:05 · 1788 阅读 · 0 评论 -
css中vertical-align的使用图解
我们经常要定义行内元素在一行中的垂直位置,从而使其降低或者升高,满足某些布局情况,那么就要用到vertical-align属性。该属性定义了行内元素的基线相对于该元素所在行的基线的垂直对齐。如下一段代码: vertical-align #main div{border: 1px solid green;padding: 0;margin-原创 2017-06-04 13:57:35 · 3558 阅读 · 0 评论 -
css设定文本超出一行或多行就隐藏并显示省略号
这里要说的是文本超出多行才隐藏文字并且显示省略号而不是超出一行就省略。首先大家要了解一些基本的文本文字属性的设定,例如white-space(超出是否换行),letter-spacing(字间距),text-overflow(文字超出如何显示),word-wrap(允许长单词或 URL 地址换行到下一行),overflow(超出块范围如何 显示)等等...首先看一下超出原创 2017-03-02 12:36:13 · 16927 阅读 · 0 评论 -
css实现两个div填满一行
有如下代码:body{ width: 100%; height: 100%; padding: 0; margin: 0; position: absolute; } #main{ width: 800px; ...原创 2017-06-06 09:41:03 · 33004 阅读 · 2 评论 -
完全理解float之“不完全脱离文档流”
0.前言float属性在css2中是一个热门的属性,被广泛应用于布局之中,同时由于不当使用float带来的问题也非常多,本文结合自己对float的理解以及实际项目中碰到float的相关问题,做一个详细总结,欢迎一起探讨,但未经同意禁止转载。以下是文章的目录float的特性float与absolute的区别float与inline-block清除浮动的方法转载 2017-09-18 09:10:56 · 8671 阅读 · 5 评论