【css学习笔记二之inline-block】的更多相关文章

CSS学习笔记——包含块 containing block

以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定的矩形叫这个元素的包含块.一个元素的包含块根据以下规则确定: 1.根元素所在的包含块叫初始包含块 initial containing block.对于连续媒体设备(continuous media),初始包含块的大小等于视口viewpor的大小,基点在画布的原点(视口左上角):对于分页媒体(pag…

css学习笔记二之inline-block

1.inline-block是CSS2.1中新增的盒类型,在div中将display属性设定为"inline-block",则div显示效果与设置display属性为"inline"是一样的效果. inline-block具有inline属性的列属性,内部又具有block属性的块属性,可以使用width,height,margin,padding,border等元素. 2.使用inline-block可以在某些情况下替代float浮动元素,PS:要做一个横向导航条…

css学习笔记二

下面来总结一下盒子模型,流式布局,浮动布局,层布局(定位布局). 1.盒子模型 有二种:IE盒子模型 和 标准w3c盒子模型 1)IE的盒子模型的content包含了padding和border 2)标准的w3c盒子模型有四部分组成:内容(content),填充(padding),边框(border),边界(margin) 提示:盒子模型的3d结构有五层,第一层是border,第二层是content+padding,第三层background-image,第四层是background-color…

CSS学习笔记二：css 画立体图形

继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: rotate:rotateX() rotateY()  rotateZ()   :这个属性能够实现翻转效果 translate:translateX translateY() translateZ() :这个属性是实现移动效果 origin: 是设立为中心 perspective: 是影响3D的视觉…

Html+css学习笔记二 标题

学习新标签,标题 <html> <head> <title>tags</title> </head> <body> <h1>大</h1> <h2>大</h2> <h3>大</h3> <h4>大</h4> <h5>大</h5> <h6>大</h6> <h7>大</h7>…

CSS学习笔记之基本介绍

1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下(优先级从小到大排列): 浏览器缺省设置 外部样式表 内部样式表 内联样式 (1)外部样式表 当样式需要应用于很多页面时,外部样式表是理想的选择,使用 <link> 标签链接样式表,<link> 标签一般位于 HTML 文档头部 <head> <link rel=&qu…

amazeui学习笔记二（进阶开发3）--HTML/CSS规范Rules

amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}-{模块名}-{子模块名},如果不继承父级的类名,很容易造成命名冲突 二.Amaze UI HTML/CSS 规范 Amaze UI HTML/CSS 规范 目录 基本规范 HTML/CSS 编写注意事项 基本原则 模块化编写实践 命名注意事项 CSS 编写注意事项 参考链接 基本规范 AllMobi…

CSS学习笔记

CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u5B8B%u4F53" 就是\5B8B\4F53 font-family: 中文,英文,最好的是unicode编码 eg. font-family: "SimSun","SimHei",sans-serif; 字体名称 英文名称 Unicode 编码 宋体 S…

CSS学习笔记08 浮动

从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法外,还有没有其他方法可以实现这种效果呢,答案是肯定的,那就是下面要介绍的CSS的浮动特性,浮动从字面意思上来看,就是浮起来,动起来,那么是谁浮起来,又是谁动起来呢?往下看,很快就会知道答案了. 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,漂浮在标准流之上.元素浮动后,虽然脱离标准流,但…

CSS学习笔记09 简单理解BFC

引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style type="text/css"> .div1 {background-color: #FCE38A; width: 200px; height: 1…