文档流 | 易学教程

day52

阅读更多关于 day52

CSS补充文字对齐 text-align属性规定元素中文本的水平对齐方式 left: 左边对齐默认值 right: 右对齐 center: 居中对齐 justify: 两端对齐文字装饰 text-decoration属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline: 定义文本下的一条线 overline: 定义文本上的一条线 line-through: 穿过文本的一条线 inherit: 继承父元素的text-decoration属性的值背景属性背景颜色 background-color: red; 背景图片 background-image: usl('1.jpg'); 背景重复 repeat(默认)：背景图片平铺排满整个网页 repeat-x: 背景图片只在水平方向上平铺 repeat-y: 在垂直方向上平铺 no-repeat: 背景图片不平铺 background-repeat: no-repeat/left top; #背景位置支持简写 background: #336699 url('1.png') no-repeat left top; 边框边框属性 border-width border-style border-color 边框样式 none: 无边框 dotted: 点状虚线边框 dashed: 矩形虚线边框

bfc 浮动和定位对元素的影响

阅读更多关于 bfc 浮动和定位对元素的影响

浮动元素（脱离了常规文档流转化为bfc）会自动忽略元素的display属性并默认display为block 更具体的说效果变成了inline-block的效果 arbsolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。 relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小产生bfc的条件：【1】根元素，即HTML元素　　【2】float的值不为none 　　【3】overflow的值不为visible 　　【4】display的值为inline-block、table-cell、table-caption 　　【5】position的值为absolute或fixed 来源： https://www.cnblogs.com/panghu123/p/11677516.html

CSS四种定位及应用

阅读更多关于 CSS四种定位及应用

定位(position) 如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。 PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！为什么要用定位？那么定位，最长运用的场景再那里呢？来看几幅图片，你一定会有感悟！第一幅图，小黄色块可以再图片上移动：第二幅图，左右箭头压住图片：第三幅图, hot 再盒子外面多出一块，更加突出：以上三个小地方，如果用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做，just soso！元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。 1、边偏移也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等 2、定位模式(定位的分类) 在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值;} position属性的常用值静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。上面的话翻译成白话：

前端之CSS

阅读更多关于前端之CSS

目录 CSS 介绍 CSS语法引用方法基本选择器 4 | 2组合选择器后代选择器儿子选择器毗邻选择器弟弟选择器属性选择器分组和嵌套伪类选择器伪元素选择器选择器的优先级 CSS属性相关宽和高字体属性文字属性文字之间的距离背景属性边框 border-radius display属性 CSS盒子模型 margin外边距 padding内填充 float clear overflow溢出属性定位（position）是否脱离文档流 z-index opacity CSS 介绍 CSS(Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一张样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法引用方法行内样式行内样式是在标记的style属性中设定CSS样式。（不推荐大规模使用） <p style="color=red">hello world</p> 内部样式内部样式是将CSS样式集中写在网页的 <head></head> 标签中的 <style></style> 标签中。 <head> <meta charset="utf-8"> <title>Title</title> <style> p{ background-color:red; } </style> </head> 外部样式

前端CSS

阅读更多关于前端CSS

前端CSS CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ 注释是代码之母。 CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器基本选择器元素选择器 p {color: "red";} ID选择器 #i1

002 前端基础之CSS

阅读更多关于 002 前端基础之CSS

目录一、CSS介绍二、CSS语法 2.1 CSS实例 2.2 CSS注释三、CSS的几种引入方式 3.1 行内样式(内联样式) 3.2 内部样式 3.3 外部样式四、CSS选择器 4.1 基本选择器元素选择器 ID选择器类选择器通用选择器 4.2 组合选择器后代选择器儿子选择器毗邻选择器兄弟选择器 4.3 属性选择器 4.4 分组和嵌套分组嵌套 4.5 伪类选择器 4.6 伪元素选择器 first-letter before after 4.7 选择器的优先级 CSS继承选择器的优先级五、CSS属性相关 5.1 宽和高 5.2 字体属性文字字体字体大小字重（粗细）文本颜色 5.3 文字属性文字对齐文字装饰首行缩进文字之间的距离 5.4 背景属性 5.5 边框 5.6 border-radius 5.7 display属性 5.8 CSS盒子模型 5.9 margin外边距 5.10 padding内填充 4.11 float浮动三种取值 5.12 clear清除浮动清除浮动 5.13 overflow溢出属性 5.14 定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定）脱离文档流：不脱离文档流： 5.15 z-index 5.16 opacity 六、综合案例

CSS样式属性

阅读更多关于 CSS样式属性

CSS样式属性一、宽和高 width属性可以为元素设置宽度。 height属性可以为元素设置高度。块级标签才能设置宽度，内联标签的宽度由内容来决定。二、字体属性 2.1文字字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 2.2字体大小 p { font-size: 14px; } 如果设置成inherit表示继承父元素的字体大小值。 2.2 字重（粗细） font-weight用来设置字体的字重（粗细）。值描述 normal 标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值,默认值， 2.3文本颜色颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如: ＃ FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1

前端之CSS基础及使用方法

阅读更多关于前端之CSS基础及使用方法

CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ 注释是代码之母。--摘自哪吒语录 CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 内部样式嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: red; } </style> </head> 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器基本选择器元素选择器 p {color: "red";} ID选择器 #i1 { background-color: red; }

CSS

阅读更多关于 CSS

CSS语法 CSS样式由两个部分组成:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这个是注释*/ CSS的几种引入方式 1. 行内样式行内式是在标记的style属性中设定CSS样式,不推荐大规模使用. <p style="color:red">你好!</p> 2.内部样式内部样式,也就是嵌入式是将CSS样式集中写在网页的标签中标签中. <head> <meta charset="UTF-8"> <title>标题</title> <style> p { background-color: #2b99ff; } </style> </head> 3.外部样式外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可.推荐使用 <link href="样式名.css" rel="stylesheet" type="text/css/"/> # 引入语句 CSS选择器基本选择器 /*元素选择器*/ p {color:red;} /*ID选择器*/ #id {background-color:red;} /*类选择器*/ .class {font-size: 15px;} /*通用选择器*/ * {color:red;} @注意: 样式类名不要用数字开头(有的浏览器不认识). 标签中的class属性如果有多个,要用空格分隔. 组合选择器

inline-block和float的共性和区别

阅读更多关于 inline-block和float的共性和区别

在我们平时工作中，经常会遇到把一些块状元素在一行排列显示，这时候我们通常会用到flaot,或许会用inline-block等等，那么他们有什么共性和区别？适用在什么场景？共性： ①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相邻的inline元素会在一行显示不换行，直到本行排满为止。block的元素始终会独占一行，呈块状显示，可设置宽高。所以inline-block的元素就是宽高可设置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，内容为inline。 ②float：设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕装排列。两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。区别： ①inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。 ②float: 让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去

订阅文档流