块级格式化上下文(BFC)对布局的影响

全称Block Formating Context,称为BFC它是一块独立渲染区域,它规定了在该区域中,常规流块盒的布局常规流块盒在水平方向上,必须撑满包含块常规流块盒在包含块的垂直方向上依次排放常规流块盒若外边距无缝相邻则进行外边距合并常规流块盒的自动高度和摆放位置,无视浮动元素,更无视定位元素视

Web字体和图标

Web字体Web字体的出现是解决用户电脑上没有安装相应字体的问题之前我们为了兼容性,会在font-family中写入很多备选字体,往往第一个字体是页面重构师希望在用户的电脑上出现的,因为能给用户最好的体验font-family:"翩翩体-简","Arail",

CSS中的@规则

官方叫at-rule国内叫@规则、@语句、CSS语句、CSS指令1.导入另外一个css文件-import@import "路径";以前我们引入css文件一般是这样的<link rel="stylesheet" href="reset.css&q

CSS定位总结

定位定位:手动控制元素在包含块中的精准位置1.常规流2.浮动:float3.定位:position涉及的CSS属性:positionposition属性默认值:static,静态定位,可以认为是不定位relative:相对定位(不会改变盒子的特征,如display)absolute:绝对定位fixe

CSS浮动特点浮动盒子的尺寸排列方式及解决高度坍塌

浮动视觉格式化模型,大体上将页面中的盒子的排列方式分为三种方式常规流浮动定位应用场景文字环绕横向排列浮动的基本特点修改float属性值为:left:左浮动,元素靠左靠上right:右浮动,元素靠右靠上默认值为none,不浮动当一个元素速浮动后,元素必定为块盒(更改display属性为block)sp

CSS行盒的盒模型特点

行盒的盒模型span、strong、em、i、img、video、audio显著特点盒子沿着内容延伸行盒不能设置宽高调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整内边距(填充区)水平方向有效,垂直方向不会实际占据空间边框水平方向有效,垂直方向不会实际占据空间外边距水平方向有效,垂直方向不

CSS盒模型应用-改变宽高范围-溢出处理-断词规则-空白处理

盒模型应用改变宽高范围默认情况下,width和height 设置的是内容盒宽高页面重构师:将psd文件(设计稿)制作为静态网页我们在测量某一网页的宽高都是测量的是边框盒,然而实际设置的width、height是内容盒的宽高解决方案:精确计算(上古时代做法)利用CSS3解决(现行做法)box-sizi

CSS中常规流-视觉格式化模型的深度理解

常规流盒模型:规定单个盒子的规则视觉格式化模型(官方):页面中多个盒子的排列规则布局规则(我们一般的称呼):页面中的多个盒子的排列规则视觉格式化模型,大体上将页面中的盒子的排列分为三种方式:常规流浮动定位常规流的总体规则常规流的现行叫法:常规流、文档流、普通文档流、常规文档流所有元素,默认情况下,都

CSS盒模型-内容盒-填充盒-边框盒

盒模型box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)盒子类型:1.行盒,display属性值设置为inline的元素2.块盒,display等于block的元素行盒在页面中不换行,块盒独占一行display默认值为inline,dispaly不存在继承浏览器默认样式表设置的块盒:容器元素

CSS中属性值的计算过程

浏览器要渲染一个页面,是一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行渲染每个元素的前提条件:该元素的所有CSS属性必须有值一个元素,从所有属性都没有值,到所有元素都有值,这个计算过程,叫做属性值的计算过程无属性值----->每个属性都有值,这一过程叫做属性值的计算过程计算属性值
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×