文档流 | 易学教程

css学习笔记

阅读更多关于 css学习笔记

(特别鸣谢郭欣新同学提供书籍：《精通CSS+div网页样式与布局》) 一、css语法构成:选择器、声明（属性：值）　　1、选择器：标记选择器(h1)、类别选择器(h1.className)、ID选择器(h1#idName)，选择器的优先级由低到高为标记、类别、ID。　　2、声明：键值对，键对应属性名称、值对应属性值。二、css继承：子标签无条件得到父标签的css值，如果css属性相同，则子标签css属性覆盖父标签css属性。三、引入css方式：内联式、链接式、导入式。建议使用链接式，避免使用内联式。　　1、内联式：将css声明写在html标签的style属性里。　　2、链接式：在html页面<head>中写入<link rel='stylesheet' type='text/css' href="test.css"> 　　3、导入式：在html页面<head>中写入<style>@import url(test.css)</style> 四、css属性之字体篇　　1、font-family:字体集。font-family:黑体,宋体; 　　2、font-size:字体大小。font-size:16pt; 字体单位（inch、cm、mm、pt、pc），pc = 12pt，常用pt。　　3、color:字体颜色。color:#FFFFFF; 颜色统一用RGB格式

css重点知识和bug解决方法

阅读更多关于 css重点知识和bug解决方法

1.图片向下撑大3像素问题在一个盒子里面放一张图片，默认情况下，图片会向下撑大3像素，有以下几种解决方法： 1.1 给图片添加display : block； 1.2 给图片添加 float : left； 1.3 给图片添加 vertical-align : middle ; 1.4 给他的父元素加font-size：0； 2.如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中？给父元素添加宽高，添加行高添加 text-align：center 给图片添加：vertical-align：center 3.元素的类型分类哪几种？各自都有什么特点？块元素独占一行，竖着排，能设置宽高行内元素默认情况下文本一行显示，不能设置宽高行内块状元素 inline-block,既有行内元素的特点又有块状元素的特点可变元素添加float：left 相当于display：block 4.如何实现一个元素消失和出现？ display：none display：block opcity : 0 ; opcity : 1 ; 5.单行文本溢出显示省略号怎么实现？添加width； white-space：nowrap； overflow：hidden； text-overflow：ellipsis； 6.定位的属性值有哪几个？分别有什么特点？ position : absolute

CSS基础

阅读更多关于 CSS基础

CSS基础语法：例如 p{ color:red; background-color: green; } css的四种引入方式: 1 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 <p style="color:red;background-color:green">hello liuliu</p> 2 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下 <style> p{ color:red; background-color: green; } </style> 3 将一个.css文件引入到HTML文件中 <link rel="stylesheet" href="first.css"> 4 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下： <style> @import 'first.css'; </style> 注意：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件

css3重要知识点和bug解决方法

阅读更多关于 css3重要知识点和bug解决方法

1.图片向下撑大3像素问题在一个盒子里面放一张图片，默认情况下，图片会向下撑大3像素，有以下几种解决方法： 1.1 给图片添加display:block； 1.2 给图片添加 float:left； 1.3 给图片添加 vertical-align:middle; 1.4 给他的父元素加font-size：0； 2.如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中？给父元素添加宽高，添加行高添加 text-align：center 给图片添加：vertical-align：center 3.元素的类型分类哪几种？各自都有什么特点？块元素独占一行，竖着排，能设置宽高行内元素默认情况下文本一行显示，不能设置宽高行内块状元素 inline-block,既有行内元素的特点又有块状元素的特点可变元素添加float：left 相当于display：block 4.如何实现一个元素消失和出现？ display：none display：block opcity:0; opcity:1; 5.单行文本溢出显示省略号怎么实现？添加width； white-space：nowrap； overflow：hidden； text-overflow：ellipsis； 6.定位的属性值有哪几个？分别有什么特点？ position:absolute 绝对定位，脱离文档流

什么是BFC

阅读更多关于什么是BFC

写CSS样式时，对一个元素设置css,我们首先要知道这个元素是块级元素还是行内元素，而BFC就是用来格式化块级盒子的。 BFC定义：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。满足下列CSS声明之一的元素便会生成BFC： 1.根元素或其它包含它的元素 2.float的值不为none； 3.overflow的值不为visible； 4.position的值不为static； 5.display的值为inline-block、table-cell、table-caption； 6.flex boxes (元素的display: flex或inline-flex) BFC的布局规则是什么样的呢？ 1、内部的元素会在垂直方向一个接一个地排列，可以理解为是BFC中的一个常规流 2、元素垂直方向的距离由margin决定，即属于同一个BFC的两个相邻盒子的margin可能会发生重叠 3、每个元素的左外边距与包含块的左边界相接触(从左往右，否则相反)，即使存在浮动也是如此，这说明BFC中的子元素不会超出它的包含块 4、BFC的区域不会与float元素区域重叠 5、计算BFC的高度时，浮动子元素也参与计算 6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

web前端css(二)

阅读更多关于 web前端css(二)

一. 标准文档流标准文档流中会有一些现象: 空白折叠和高低不齐边底对齐的现象标准文档流等级森严, 标签分为两种等级: 行内元素和块级元素. 1. 行内元素和块级元素的区别: 行内元素:不能设置宽高, 默认的宽度就是文字的宽度; 与其他行内元素并排块级元素:设置宽高, 如果不设置就默认宽度是父级的100% ; 独占一行,不与其它任何元素并列 2. 标签分类在HTML中已经将标签分过类了,当时分为文本级和容器级 a) 从HTML的角度来讲,标签分为: 文本级标签: p, span, a, u下划线, i斜体(已废弃), em斜体(已废弃), b粗体(已废弃) 容器级标签: div, li, dt, dd, h系列这里为什么说p是文本级标签呢? 因为p里面只能放文字, 图片, 表单. P里不能放h系列, 不能放ul 也不能放p. b) 现在从css角度看和上面很像,就p不一样: 行内元素: 除了p之外,所有的文本级标签都是行内元素. P是文本级标签但是是个块级元素块级元素:所有的容器级标签 div lid dt dd h, 还有 p 标签 3. 块级元素和行内元素的转换我们可以通过display属性将块级元素和行内元素相互转换块级元素转行内元素: 设置display:inline; 行内元素转块级元素: 设置display:block; 4.

CSS（14）元素定位

阅读更多关于 CSS（14）元素定位

一、元素定位机制　　1.普通文档流　　普通文档流将浏览器窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。　　　　2.定位思想和浮动　　CSS元素定位的基本思想很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。此外，CSS中的浮动允许元素向左或者向右移动。通常情况下，我们使用div+css布局页面，而css布局中最重要的就是float属性。　　 3.一切皆为框　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。可以使用 display 属性改变生成的框的类型。通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。　　但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待： View Code <div> /*文本生是无名框*/ some text

css之定位

阅读更多关于 css之定位

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。 fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。 static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性 inherit 从父元素继承 position 属性的值定位元素特性绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素定位元素层级定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级，谁的z-index值大，谁的元素就在上层。典型定位布局 1、固定在顶部的菜单 2、水平垂直居中的弹框 3、固定的侧边的工具栏 4、固定在底部的按钮示例代码 <head> <style type="text/css"> .con{ width:400px; height:400px; border:1px solid #000; margin

web前端面试题

阅读更多关于 web前端面试题

什么是闭包闭包就是能够读取其他函数内部变量的函数。（函数内部的函数）（将函数内部和函数外部连接起来的桥梁）作用：a，读取函数内不的变量；b，让变量的值始终保存在内存中。 display:none和visibility:hidden区别 display:none;隐藏不占空间 visibility：hidden；隐藏占空间元素在页面的定位方式静态定位（static）：依据文档流定位（默认）相对定位（relative）:根据自身定位【不脱离文档流】绝对定位（absolute）：根据设置相对定位的元素定位（父元素）【脱离文档流】固定定位(fixed):固定定位【脱离文档流】响应式布局的标志：媒体查询（@media）弹性布局容器排列方式 flex-direction row/row-reverse/ column/colunm-reverse 换行方式 flex-wrap nowrap/wrap/wrap-reverse 主轴对齐方式 justify-content space-between/flex-strat flex-end/center/space-around 交叉轴对齐方式 align-items 多轴对齐 align-content 弹性布局项目项目排列顺序 order 项目放大比例 flex-grow 项目缩小比例 flex-shrink

css之操作属性

阅读更多关于 css之操作属性

1.文本 1.文本颜色：color 颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如: ＃ FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 2.水平对齐方式 text-align 属性规定元素中的文本的水平对齐方式。 left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 2.文本其他操作 font-size: 10px; line-height: 200px; 文本行高通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距

订阅文档流