CSS
文章平均质量分 93
xxxspade
Always Coding
展开
-
CSS清除浮动原理(涉及BFC)和方法
为什么要清除浮动??首先理解浮动框:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。 浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列, 文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。 顾名思义,就是漂浮于普通流之上,像浮云原创 2017-03-03 21:36:44 · 2994 阅读 · 1 评论 -
定位position详解(一)
0.简介首先记得p h1 div 等是称为块级元素,它们会生成”块框”。 而strong em span等是行内元素,它们生成“行内框”CSS 有3种基本的定位机制:浮动 绝对定位 普通文档流。 除非指定,否则所有框都在普通流中定位!普通流:块级框一个一个垂直排列,由元素在HTML中的位置决定。对于行内框: 水平padding 内边距,margin外边距,border可以调整他们的水平间距原创 2017-01-20 21:51:39 · 3694 阅读 · 0 评论 -
定位详解(二) Overconstrained
2.2 绝对定位前面一篇文章我们提到了 如果加入了right bottom width 的限制?也就是我们的绝对定位元素声明了尺寸,而且left top 是显式声明了的值,另外两个时auto,这时怎么处理?先看非替换元素非替换元素的放置和大小一般地,元素的大小和位置取决于其包含块。 各个属性的值都会有影响,不过最主要还是其包含块~!考虑一个定位元素的宽度和水平放置。 可以表示为一个等式: lef原创 2017-01-21 01:13:02 · 1155 阅读 · 0 评论 -
伪类和伪元素
简介 熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。原创 2016-12-29 14:59:17 · 404 阅读 · 0 评论 -
Vertical-Align的理解
Vertical-Align这是一个非常困扰人的属性。 CSS对于将元素在垂直方向上对齐提供了很多方法。取值: 用float解决:让元素的顶端对齐而且需要手动清除浮动。 float只能是让顶端对齐了。 用postion:absolute解决绝对定位让元素脱离了正常的文档流,这些元素不会再影响周围的元素。 在元素的padding marin固定的情况下,一点小的改变都很有可能对布局造成影响。ver原创 2017-01-10 17:38:22 · 608 阅读 · 0 评论 -
CSS水平垂直居中
水平居中水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中, 即父元素必须是块级盒子容器,父元素宽度必须已经被设定好以下讨论 参考这个结构<div class="wrap"> <div class="non-child"> non-child </div></div>Scene1 : 子元素是块级元素而且宽度没有设定这种情况下不存在水平居中的说法,因为子元素是块原创 2017-03-04 20:12:41 · 337 阅读 · 0 评论 -
margin+float实现自适应二等分布局
前言有时候觉得对浮动布局,定位这些思考得其实还不够深入。 网上的说法很多,它们很多掺杂各种浏览器兼容或者一些清除浮动等等的hack。但是我觉得还是应该从简入深,理解一下它的本质。两列布局所谓的两列布局,首先是左边栏是定宽,右边主栏是自适应的。 一般看到自适应我们可很容易想到就是百分数,浮动布局。<!DOCTYPE html><html lang="en"><head> <meta c原创 2017-04-23 16:50:32 · 1571 阅读 · 0 评论