文档流

Border 边框 css 属性 边框颜色 border-color ： red/#ffffff/rgb() 默认为黑色 边框样式 border-style:solid （实线） dashed( 虚线 ) 默认为 none 边框粗细 border-width ： 1px ；默认是 3px Border 的简写 border:border-width border -style border-color; Div 块 盒子 1. 就是标签名 没有特殊的标签属性 2. 主要用来排版布局 3. 宽度是 100% ， chrome 浏览器默认有 8px 的外边距，清除这 8px 用 4. 这种天生占用宽度为 100% 的标签我们把它叫 块级元素 比如 div p h1-h6 ul ol li 等等 特点 : 独占一行 可以设置宽高。 5. 大小宽高不是 100% ，是按照内容的多少决定大小的，这种标签叫 内敛元素 ( 行级元素 ) 比如 a span 特点：不独占一行 不可以设置宽高。 块级元素 div 分析 外边距 margin 内边距 padding 边框 border Div 的真实宽度 =width+margin-left+margin-right+border*2+padding-left+padding-right ； 文档流 元素从上到下（主要说块级元素），从左到右

1120 Border 边框 css属性 边框颜色 border-color：red/#ffffff/rgb() 默认为黑色 边框样式 border-style:solid（实线）dashed(虚线) 默认为none 边框粗细 border-width：1px；默认是3px Border的简写 border:border-width border -style border-color; Div 块 盒子 1.就是标签名 没有特殊的标签属性 2.主要用来排版布局 3.宽度是100%，chrome浏览器默认有8px的外边距，清除这8px用 4.这种天生占用宽度为100%的标签我们把它叫块级元素 比如 div p h1-h6 ul ol li等等 特点: 独占一行 可以设置宽高。 5.大小宽高不是100%，是按照内容的多少决定大小的，这种标签叫内敛元素(行级元素) 比如 a span 特点：不独占一行 不可以设置宽高。 块级元素div分析 外边距margin 内边距 padding 边框 border Div的真实宽度=width+margin-left+margin-right+border*2+padding-left+padding-right； 文档流 元素从上到下（主要说块级元素），从左到右（主要说行级元素）的一种排列方式，我们把它叫标准文档流。他是浏览器天生具有的一种功能。

Border 边框 css属性 边框颜色 border-color：red / #ffffff / rgb() 默认为黑色 边框样式 border-style：solid（实线）dashed（虚线）默认为none 边框粗细 border-width：1px；默认为3px； Border 的简写 border：border-width border-style border-style border-color Div 块 盒子 1、就是标签名 没有特殊的标签属性 2、主要用来排版布局 3、宽度是100%，chrome浏览器默认有8px的内边距，清除这8px用 4、这种天使占用宽度为100%的标签我们把他们叫块级元素 比如 div p h1-h6等等 特点：独占一行 可以设置宽高 5、大小宽高不是100%，是按照内容的倒是决定大小的，这种标签叫内敛元素（行级元素） 比如 a span 特点：不独占一行 不可以设置宽高 块级元素 div分析 1、外边距 margin 2、内边距 padding 3、边框 border Div 的真是宽度= width+margin-left+margin-right+border*2+padding-left+padding-right 文档流 元素从上到下（主要说块级元素），从左到右（主要说行级元素）的一种排列方式，我们把他叫标准文档流

CSS布局 创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用这种属性可以模拟部分 浮动的特征 ，而不需要处理一些浮动带来的问题。 Inline-block不是什么新鲜话题了，估计你也用过。不过我最近才是用到这个属性。之前的几个站点上，有展示一系列照片的需求，我就用inline-block代替了浮动。 inline-block是什么？ Inline-block 是元素 display属性的一个值 。这个名字的由来是因为，display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。 块级元素（block elements） ,来源于 CSS盒子模型 。块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。 行内元素（inline elements） 排列方式是水平排列。 行内块元素（inline-block elements） 在内部他的表现类似 block元素

目录 CSS入门 标签设置长宽 1.字体样式 1.1 字体类型 font-family 1.2 字体大小 font-size 1.3 字体颜色 color 1.4 字体粗细 font-weight 1.5 文本斜体 font-style 2.文本样式 2.1 文本对齐 text-align 2.2 文字装饰 text-decoration 2.3 首行缩进 text-indent 4.背景样式 4.1 背景颜色 background-color 4.2 背景图片 background-image 4.3 背景重复 background-repeat 4.4 背景位置 background-position 4.5 背景固定样式 background-attachment 5.边框属性 5.1 边框样式 border 5.2 边框局部样式 border局部 5.3 圆,圆角边框 border-radius 6.display 显示方式 定义 使用 同行显示 display: inline 异行显示 display: block; 兼并 display: inline-block; 标签特性 7.盒子模型 7.1 margin: 外边距 7.2 border: 边框 7.3 padding: 内边距 7.4 content: 内容区域 8. 浮动布局 float 8.1 三种取值 8

在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是 clear:both; CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。 语法： clear : none | left |right | both 参数： none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 说明： 该属性的值指出了不允许有浮动对象的边。请参阅float属性。 对应的脚本特性为clear 比如： 1 1 <p style="float:left;width:200px;">this is 1st row</p>2 2 <p style="float:right;width:400px;">this is 2ed row</p>3 3 <p >this is the third row</p> 如果不用清除浮动，那么第3列文字就会和第1、2列文字在一起 ，如下图： 所以我们在第3个这列加一个清除浮动

设置标签样式 给标签设置长宽 只有块级标签才可以设置长宽，行内标签设置了也没有任何作用 div { width:10px; height:10px; } 字体属性 font-size 可以设置字体大小 字体粗细 normal：默认标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，700等同于bold inherit： 继承父元素字体的粗细值 字体颜色 COLOR 后面可以跟多种颜色数据 颜色的英文：red #4e4e4e 十六进制 rgb(1,1,1)模式，三基色数字 rgba（1,1,1,0.2） 和rbg一样，最后一个数字用来调节颜色的透明度 字体属性 文字对齐 text-align属性规定元素中的文本的水平对齐方式 left：左边对齐，默认 right：右对齐 center：居中对齐 justify：两端对齐 文字修饰 text-decoration 属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline：定义文本下的一条线，相当于下划线 overline：定义文本上的一条线 line-through：定义穿过文本下的一条线，相当于删除线 inherit：继承父元素的text-decoration属性的值 注意：a标签默认自带下划线，如果要去掉就如以下代码 a{ text

目录 CSS属性相关 宽和高 字体属性 文本颜色 文本字体 字体大小 字体粗细 文字属性 文字对齐 文字装饰 首行缩进 背景属性 补充 边框 border-radius display属性 CSS盒子模型 margin外边距 padding内边距 float浮动 浮动造成的影响： clear overflow溢出 定位 相对定位 relative 绝对定位 absolute 固定定位 fixed 脱离文档流 x-index 透明度 CSS属性相关 宽和高 width属性可以为元素设置宽度 height属性可以为元素设置高度 只有块级标签才可以设置长度，行内标签设置了也没有任何作用，只取决于文本内容大小 字体属性 文本颜色 直接写 颜色英文 color: red #FF0000 直接利用pycharm提供的取色器 rgb(125,125,125) 获取三基色 rgba(128,128,128,0.3) 最后一个数字只是用来调节颜色的透明度 文本字体 用font-family 控制字体种类 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小 用font-size p { font-size: 36px; } 字体粗细 值 描述 normal 默认值，标准粗细 bold 粗体 bolder

目录 标签设置长宽 字体颜色 color后面可以跟很多种颜色数据 06a0de 直接用pycharm提供的吸管工具取色 取消a标签默认的下划线 背景图片 默认是铺满整个区域 边框 盒子模型 浮动 如何解决父标签坍塌问题？ overflow溢出属性 定位 标签设置长宽 只有快级标签才能设置长宽 行内标签设置了没有任何作用 字体颜色 color后面可以跟很多种颜色数据 颜色英文形式 red 06a0de 直接用pycharm提供的吸管工具取色 rgb（1,1,1） 可以利用截图软件获取三基色数字 rgba（128,128,128,0.3） 最后一个数字 只能用来调节颜色的透明度 取消a标签默认的下划线 a { text-decoration:none; } 背景图片 默认是铺满整个区域 通常一个页面上的一个个小的图标 并不是单独的 是一张大的图片 该图片上有网址所用的所有的小图标 通过控制背景图片的位置 来显示不同的图标样式 边框 border 后面写三个参数 位置 没有关系 颜色 字体 样式 可以单独设置 样式 颜色 粗细 border-top-style：dotted border-top-color：red border-right-style ：solid border-bottom-style：dotted border-left-style ：none 可以设置某一边的样式

设置标签样式 给标签设置长宽 只有块级标签才可以设置长宽，行内标签设置了也没有任何作用 div { width:10px; height:10px; } 字体属性 font-size 可以设置字体大小 字体粗细 normal：默认标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，700等同于bold inherit： 继承父元素字体的粗细值 字体颜色 COLOR 后面可以跟多种颜色数据 颜色的英文：red #4e4e4e 十六进制 rgb(1,1,1)模式，三基色数字 rgba（1,1,1,0.2） 和rbg一样，最后一个数字用来调节颜色的透明度 字体属性 文字对齐 text-align属性规定元素中的文本的水平对齐方式 left：左边对齐，默认 right：右对齐 center：居中对齐 justify：两端对齐 文字修饰 text-decoration 属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline：定义文本下的一条线，相当于下划线 overline：定义文本上的一条线 line-through：定义穿过文本下的一条线，相当于删除线 inherit：继承父元素的text-decoration属性的值 注意：a标签默认自带下划线，如果要去掉就如以下代码 a{ text