CSS
快乐的程序媛
我要成为一个快乐的程序媛!
展开
-
float浮动布局,auto冻结布局,position:absolute绝对布局
在布局中遇到的问题:1.在用float属性使元素浮动时,一定要为浮动元素设置宽度,在清除浮动效果时,一定是与浮动元素同等级别的情况下,写一个空的div然后设置他的{float:none;}.其中main为主要内容区可以不设宽度,继承父元素的100%width,可以设置它的margin值. 若在body下嵌套子div块header,main,sidebar,footer,那么body设转载 2016-08-17 15:50:30 · 665 阅读 · 0 评论 -
CSS中Box model分类
CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时,会触发怪异模式。在标准模式下,一个块的总宽度= width + margin(左右)转载 2017-06-21 13:48:12 · 678 阅读 · 0 评论 -
CSS画图形
图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧。1、正方形最终效果: CSS代码如下:转载 2017-05-16 22:14:54 · 244 阅读 · 0 评论 -
CSS3 Flex实现元素的水平居中和垂直居中
网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技术,下面我就把这种布局叫Flex布局。元素居中,相信作为前端工程师的你肯定会经常用到,不管是在水平方向居中,还是垂直方向居中,都可在你的职业生涯中徘徊。不过很多时候要实现垂直居中,还是比较麻烦的。转载 2017-03-06 23:07:20 · 145205 阅读 · 2 评论 -
CSS实现三列图片等宽等间距布局
每个图片块左浮动,宽30%,左外边距2.5%: 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5% 三列图片等宽布局 * { margin: 0; padding: 0; } img { display: block; width: 30%; ma转载 2016-08-20 11:26:58 · 5115 阅读 · 0 评论 -
从Chrome源码看浏览器如何计算CSS
浏览器构建DOM的方式如下:浏览器每收到一段HTML的文本之后,就会把它序列化成一个个的tokens,依次遍历这些token,实例化成对应的HTML节点并插入到DOM树里面加载CSS。在构建DOM的过程中,如果遇到link的标签,当把它插到DOM里面之后,就会触发资源加载转载 2017-03-18 11:21:00 · 852 阅读 · 0 评论 -
实现两列等宽布局的几种方法
很多年前,在CSS-Tricks发布了这个想法,随着时间的改变,我们不断更新这个话题。当你想实现两列等宽,左边一些内容,右边一些内容时,基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半,并且可以明显的区分他们。在CSS中有很多方法都可以实现,那么来看看如何用多种方法实现这种两列等宽布局。使用渐变背景一个简单的方法就是我们可以使用渐变改变背景颜色。一半使用一转载 2016-08-20 11:17:21 · 4507 阅读 · 0 评论 -
利用CSS和DIV的几种布局方法(4)
My third test about layout of 1 *{ padding:0px;margin:0px;}body{ background-color:orange;} #container{ width:1000px;height:660px;border:1px solid black;padd转载 2016-08-17 15:59:26 · 579 阅读 · 0 评论 -
利用CSS和DIV的几种布局方法(3)
My third test about layout of 1 *{ padding:0px;margin:0px;} #Container{height:660px;background-color:orange;border:1px solid black;padding:10px;text-align:center;font-fami转载 2016-08-17 15:56:06 · 385 阅读 · 0 评论 -
利用CSS和DIV的几种布局方法(2)
[html] view plain copyprint?> html lang="en"> head> meta charset="UTF-8"> meta name="Generator" content="EditPlus®"> meta name="Author" content=""> meta name="Keywords"转载 2016-08-17 15:55:19 · 293 阅读 · 0 评论 -
利用CSS和DIV的几种布局方法(1)
居中排版方式 *{ padding:0px;margin:0px;} #container{ width:100%;background-color:orange;border:1px solid black;padding:10px;text-align:center;font-family:arial;font转载 2016-08-17 15:54:14 · 299 阅读 · 0 评论 -
flex布局
一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器,必须加上-w转载 2017-07-20 13:51:33 · 289 阅读 · 0 评论