
css布局
文章平均质量分 79
李小tt
爱综艺~
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
从图文混排到浮动
从图文混排到浮动在浮动上踩过很多的坑,各种关于浮动的总结也不少,这里也就自己最近的学习谈一谈我对浮动的理解~ 关于浮动最经典的莫过于图文混排了,印象中的图文混排是这样的: 为了完成这个格式,我写下了这样一段代码:<html><head><style type="text/css">img {width:50px;height:50px;}</style><body><im原创 2017-08-04 00:03:11 · 1621 阅读 · 0 评论 -
从图文混排到浮动之BFC清除浮动
从图文混排到浮动之BFC清除浮动继续上一个疑问,现在p段落的内容是整个包裹住图片的,但如果我既想让p段落的内容显示在img图片的右侧,又想让它布局工整,即从上到下垂直无错位的排列要怎么做呢?为了完成这个格式,我写下了这样一段代码:<html><head><style type="text/css">img {width:50px;height:50px;float:left;}di原创 2017-08-21 22:22:08 · 392 阅读 · 0 评论 -
普通块级元素的垂直格式化
普通块级元素的垂直格式化之前写了普通流中块级元素的水平格式化和margin一文,整理了普通流中的块级元素在水平方向的格式化,其中重点介绍了七个和宽度有关的属性(margin-left,border-left,padding-left,width,padding-right,border,margin-right),本文接下来介绍块级元素的垂直格式化以及相关的属性,和水平格式化一样,垂直格式化同样存在原创 2017-11-07 22:22:30 · 359 阅读 · 0 评论 -
普通流中块级元素的水平格式化和margin
普通流中块级元素的水平格式化我们普遍认为,普通流中块级元素的布局比较易预测,水平方向的表现于垂直方向上还要更容易,通常依据父元素的宽度就很容易确定,但也有让人惊讶的部分,比如元素在水平方向的auto值会有何影响,子元素为什么有时候在水平方向上会超出父元素的内容区,要清楚这些原因就要了解元素在水平方向的格式化原理。水平方向的宽度依赖继承父元素水平格式化往往没有想象的那样简单,其中部分原因是width影原创 2017-11-05 09:48:07 · 589 阅读 · 0 评论 -
水平居中的几种方法-margin,text-align
水平居中的几种方法-margin,text-align在对元素进行水平居中时,可能会有多种方法,但不同的居中方法的适用场景也可能是不相同的。margin设置为auto来水平居中我们知道,在普通流的块级元素中,元素的七个水平属性相加的和等于包含块的width值,利用这个属性,将margin-left,和margin-width两个值设置为auto,它们会被剩下的值均分,设置为相同的长度(注意width原创 2017-11-06 08:00:55 · 7783 阅读 · 1 评论