day46_9_5前端（3）

一。调节长宽。

　　在css中可以对块级标签设置长和宽，但是对行内标签无效，其属性如下：

　　　　1.height：80px 高度。

　　　　2.width：80px 宽度。

　　　　

二。字体属性。

　　设置一个标签中的字体。比如黑体什么的。还有文字大小等，是字体本身的属性。

　　1.font-family ：字体格式。

　　　　font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

　　2.font-size：字体大小。　　

　　3.font-weight：字体重度。　　

　　　　normal   默认值，标准粗细

　　　　bold    粗体

　　　　bolder   更粗

　　　　lighter   更细

　　　　100-900  自主调节

　　　　inherit  继承父元素字体的粗细值

　　4.color：字体颜色。

　　　　1.直接使用颜色。

　　　　2.使用#404040代码。

　　　　3.使用rgb（12，12，12）

　　　　4.使用rgbc(12,12,12,1.0) 最后一个值是调节字体颜色的透明度，不能调文本

三。文字属性。

　　调节文字整体的位置等属性。

　　1.text-indent 20px  调节字节首行缩进的值。

　　2.text-align：（center,left,right,justify(两端对齐)）

　　3.text-decoration 用来为文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

　　其中，text-decoration可以用来去掉链接下的下划线。

四。背景属性。

　　设置颜色或者图片做为背景。

　　background-color：black  设置背景为黑。

　　background-image:url(地址)，设置一个图片作为背景。默认重复。

　　background-repeat ：no-repeat.设置图片不重复。

　　　　　　　　　　　　repeat-x x轴重复

　　　　　　　　　　　　repeat-y y轴重复。

　　background-postion :center 背景位置居中。

　　　　　　　　　　　　left right 向左向右

　　background-postion：10px 10px 第一个参数调节的是左右，第二个调节的是上下。

　　可并行设置：

background: orange url("111.png") no-repeat center center;

　　background-attachment: fixed  将背景设置为固定位置，滑动块时上下不会动。

六。边框：

　　边框就是一个标签的变宽，可以对其设置粗细，样式和颜色，可以一起设置。

　　border-width  宽度

　　border-style　样式

　　border-color   颜色

　　可以一起写：

#i1 {
  border: 2px solid red;
}　　

　　边框样式：

　　　　

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

　　也可以单独为某一个边框设置一个样式：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

　　border-radius

　　这个属性值可以实现圆角边框的效果。

　　设置成50%可以画圆。

　　display的属性

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

　　block设置为块级标签。

　　inline设置为行内标签

　　block+inline同时具有行内元素和块级元素的特点。

　　display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

七。盒子。

　　对于一个块级标签，有盒子定义，就是有外边距，边，内边距和内容的定义。

　　

　　 margin的用法：

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

　　也可以简写。顺序时上右下左。

.margin-test {
  margin: 5px 10px 15px 20px;
}

　　居中法：

.mycenter {
  margin: 0 auto;
}

　　这个方法只能左右居中，不能上下居中。

　　padding的用法：

　　与margin相似：

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

　　简写也是上右下左的顺序：

　　

.padding-test {
  padding: 5px 10px 15px 20px;
}

　　提供三个值时显示的是上 左右 下。

八。浮动

　　设置浮动的元素会变成一个块级框，无论他是何种元素。

　　浮动的两个特点：

　　1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

　　2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

　　浮动框的三种取值。float

　　left：向左浮动。

　　right：向右浮动。

　　none：不浮动。

　　clear清除浮动。

　　由于浮动会出现像元素在div中消失了一样的现象，所以其div会受其影响。clear可以不允许浮动在其周围。

　　如果在就换一行。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

　　clear只对资深其作用，而不会影响其他元素。

　　清除浮动可能会使得父标签坍塌，有一种方法使得浮动的影响消失：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

　　就是永远在自身的内部设置一个空元素，该元素左右都不得浮动，所以会使得div一致保持。

九。溢出属性的处理　

　　当一个div的内容溢出时，需要设置overflow对其处理。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

　　1.overflow（水平和垂直均设置）

　　2。overflow-x（设置水平方向）

　　3。overflow-y（设置垂直方向）

十。定位。

　　在div中，有三个定位方式。

　　正常的 是static静态，就是没有任何定位方式。使用left和top是没有用的。

　　1。relative相对定位。

　　就是相对于该元素原来的位置定位。该定位并没有脱离正常文档流，而且有top，right，bottom，left等方法。其层次通过z-index定位。

　　2.absolut绝对定位。　　

　　不在原文档流中，重新生成新的块级框。

　　重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

　　3.fiexd固定定位。

　　fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

　　总结：

　　脱离文档流：

　　　　绝对定位。

　　　　固定定位。

　　不脱离文档流。

　　　　相对定位。

　　除了相对定位（因为还在正常流中），其他定位的元素都不能设置浮动

十一。z-index

　　z-index设置元素显示的先后。只有设置了定位的元素才能有z-index。浮动元素不能使用z-index。

十二。opacity

　　用来定义透明效果。取值范围是0-1，0是完全透明，1是不透明，

　　与字体不一样的是，他是真的透明，字体颜色只是对于颜色的透明。

补充：
　　使用list-style-type:none;可以使得ul标签的前面无点

　　设置边框阴影：box-shadow

向 div 元素添加 
box-shadowbox-shadow: h-shadow v-shadow blur spread color inset;
div{box-shadow: 10px 10px 5px #888888;}
10px 10px 表示水平阴影的位置和垂直阴影的位置 5px是阴影的宽度  
10px 10px 的值为正值时表示的盒子的下方和右方
如果是-10px -10px表示的就是盒子的上方和左侧右阴影
 以上情况都是盒子的阴影是outset外部阴影为默认样式
div{box-shadow:  inset 10px 10px 5px #888888;}
当在阴影属性中设置为inset时，10px 10px
表示的就是内部上方和左侧，-10px -10px为下方和右侧