div+css 知识点

day02
网页组成：结构（Structure），表现（Presentation），行为（Behavior）
hyper text markup language 超文本标记语言 htnl
cascading style sheets 层叠样式表
声明文档类型
代码编码格式
html语法 <标记 属性=“属性值” 属性=“属性值”>

文本域/多行文本框：

day03
CSS 层叠样式表 Cascading Style Sheets
内部样式表 插入到HTML文件头部
外部样式表
内联样式表（行间样式，行内样式，嵌入式样式）语法：<标签 style=”属性：属性值;属性:属性值;”>

css的注释： /注释内容/

day04
字体大小 font-size：数值；(1em=16px/0.75em=12px/)(samall=13px;medium=16px;large=19px)
font-style字体风格属性：设置字体是否倾斜;有三个属性值（normal/italic/oblique/）
分别为正常/斜体
font-weight字体加粗属性:属性值有两种（normal/100-900/bold/bolder）
font-family字体名称属性:可设置字体的名称，
1、当你的字体为汉字时，需加双引号。
2、当你的字体为一个单词组成时，不需要加双引号。
3、当你的字体为多个英文单词组成时，需要加双引号。
text-align: 设定文本对齐方式。值有：left/right/center/justify
垂直对齐方式 vertical-align:top/bottom/middle;
(line-height):设定行高 值为数值或倍数
文字一定会出现行高的（值）最中间
text-decoration: 文本修饰属性，设定文本划线的属性。 值有：none/underline/overline/line-through
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
文本缩进属性（text-indent）:设定文本首行缩进。值为数值，常用单位有px
1）text-indent可以取负值；
2）text-indent属性只对第一行起作用。
字间距属性(letter-spacing):设定文本字间距。控制英文字母或汉字的字距。
单词间距属性（word-spacing）控制英文单词词距。
text-transform 大小写字母切换
none: 默认
capitalize: 每个单词首字母大写
uppercase: 变为大写
lowercase: 变为小写
font:font-weight font-style font-size/ line-height font-family;
文字缩写属性必须要在font-size和font-family同时存在时才会生效
其中font-weight 和font-style没有会使用缺省值。
font-size和line-height必须以”/”(反斜杠)连接。
宽度属性（width）:值为数值，单位为px/%
宽度不写默认为100%；
高度属性（height）:值为数值，单位为px/%
高度不写就没有高度，其高度是内容撑出来的高度
定义列表符号样式：
1)list-style-type:disc(实心圆)/circle（空心圆）/square(实心方块 )none(去掉列表符号)；
2)使用图片作为列表符号：list-style-image:url(所使用图片的路径及全称);3)定义列表符号位置：list-style-position:outside/inside;
list-style:none;简写
背景图片的显示原则
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3）容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。
背景重复属性 background-repeat:和背景图搭配使用，设置背景图是否平铺，
值有：repeat/repeat-x/repeat-y/no-repeat
Background-position
背景定位属性 ,和背景图搭配使用，设定背景图片显示的位置。
通过方向或者数值来设置：
Left top ;
0px 0px
注意事项：
第一个值是水平位置，第二个值是垂直位置。
默认值是左上角 0 0。 （50% 50%中心位置）
如果仅规定了一个值，另一个值将是50%。
如果您仅规定了一个关键词，那么第二个值将是”center”。
background-attachment
和背景图搭配使用，设定图片是否跟随内容滚动。
值：scroll/fixed
背景属性 background:背景属性的综合属性。
语法：background:背景颜色 背景图像 背景位置 背景重复 背景附着
例如：background:#f00 url(img/tu.jpg) right no-repeat fixed;

浮动 是脱离了普通的文档流

day05
盒模型构成 margin Border Padding content
Padding是添加在原有的大小之上的，若想保持元素大小不变，需从元素的原有大小上减去后添加的padding值
边框风格 border-style:设定边框风格，
none（无）/solid(实线)/dotted(点划线)/dashed（虚线）/ double双线
边框宽度 border-width:设定边框宽度，数值，单位为px
边框颜色 border-color:设定边框色
边距属性（margin）:设定页面中一个元素所占空间的边缘(边框)到相邻元素边框之间的距离。
属性值的4种方式：
四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向
padding受背景影响，能够显示背景色或背景图。
margin可以定义负值，但border和padding不支持负值。
盒模型尺寸：
宽 =左右margin+左右border+左右padding+width
高 =上下margin+上下border+上下padding+height
Margin-top的解决办法：
1)给父元素添加overflow:hidden;
2)给父元素添加盒模型相关属性（border）
3)给其中一个元素浮动
溢出属性（容器的）
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
空余空间
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白