css
linsujue
这个作者很懒,什么都没留下…
展开
-
overflow 默认值
CODE:// css.height { height: 200px;}.large-height { height: 300px;}// html<div class="height"> <div class="large-height"> </div></div>CIR...原创 2019-04-16 13:38:32 · 7081 阅读 · 0 评论 -
CSS3 3D Transform
早前2011年5月就在站上写了一篇《CSS3 Transform》介绍CSS3中Transform属性的简单应用。但这篇文章里的知识无法满足大家对Transform的一个全面认识,最近重新整理了一个Transform系列的文章,希望对初学者有所帮助。前几天介绍了《CSS3 Transform——transform-origin》、《Transform-style和Perspective属性》和《C...转载 2018-07-06 11:25:15 · 431 阅读 · 1 评论 -
理解box-sizing属性border-box,content-box
理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型。正常盒模型正常盒模型,是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box,它也是标准 w3c 盒子模型。下图更方便理解。正常盒模型是指:盒模型的大小柏阔content,padding,border,并且先做con...转载 2018-05-25 11:18:52 · 5671 阅读 · 0 评论 -
Flex 布局教程:语法篇
Flex 布局教程:语法篇作者: 阮一峰日期: 2015年7月10日网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。转载 2018-01-23 17:35:54 · 163 阅读 · 0 评论 -
深入理解Flex布局以及计算
深入理解Flex布局以及计算对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文档。作者:Owen来源:Owen|2017-03-27 09:36 收藏 分享年前最后一场技术盛宴 | 1月27日与京东转载 2018-01-23 17:35:00 · 1050 阅读 · 0 评论 -
css 行内元素基本视觉布局----- 个人理解
行框的高是由该行内 多个行内框决定的,而该行内的 行内框又根据不同基线对齐(默认是按基线对齐) 故造成该行的行框的高度是很难人工算出来的;由此得出的一个大概的结论是: 行框内的行内框 高度(由line-height和font-size算出)越大,一般行框的高度越大。原创 2017-10-16 14:44:07 · 269 阅读 · 0 评论 -
CSS块级元素和行内元素
一、块级元素:block element 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如只能包含块级元素。其他的块级元素则可以包含 行级元素如.也有一些则既可以包含转载 2017-10-16 14:30:58 · 198 阅读 · 0 评论 -
深入理解 CSS 中的行高与基线
1、基本概念1. 基线、底线、顶线、中线注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。2. 内容区内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在。内容区的大小依据font-size的值和字数进行变化。转载 2017-10-16 09:09:57 · 520 阅读 · 0 评论 -
css white-space属性详解
white-space空格处理css white-space这个css样式,用来设置element元素对内容中的空格的处理方式,有着几个可选值:normal,nowrap,pre,pre-wrap,pre-line。没有设置white-space属性,则默认为white-space:normal。normal表示合并空格,多个相邻空格合并成一个空格,在源码中的换行作为空格处理,只会转载 2017-10-24 12:20:51 · 37522 阅读 · 4 评论 -
深入理解BFC
深入理解BFC定义 在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC,还有GF转载 2017-11-07 10:33:51 · 171 阅读 · 0 评论 -
hasLayout到底是何方神圣?
前言过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout。趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑。hasLayout到底是何方神圣?hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/he转载 2017-10-27 21:31:45 · 162 阅读 · 0 评论 -
探究CSS中的包裹性
探究CSS中的包裹性之前一直都知道css中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来。什么是包裹性?包裹性就是父元素的宽度会收缩到和内部元素宽度一样。哪些元素具有包裹性?就我已知的有:absolute,fixed,float,inline-box等等。仔细看看这些元素,他们都有一个共同特点,那就是都转载 2017-10-27 15:59:50 · 1117 阅读 · 0 评论