26-CSS(2)-布局+属性

布局相关

1 设置宽高

width 和 height 赋值像素或者百分比
宽度可以通过百分比设置，高度不生效。

2 设置位置 ：

外边距：

margin 指当前元素距父元素或者相邻元素的距离
	格式： margin-top (left right bottom)
		 margin:10px 四个外边距都是10px
		 margin:10px 20px 上下10px  左右20px
		 margin : 0 auto 居中
		margin: 10px 20px 30px 40px 上 右下左

内边距：

元素内容距元素边框的距离,***改变内边距的值，元素的宽高会随着改变***
  	浏览器默认会给一些元素添加内边距或者外边距，所以工作的时候会使用以下代码
  	把默认内外边距清零，从而达到不同浏览器效果统一的目的
  	
  	格式： 
  		*{
  		padding:0;
  		margin:0;
  		}

3 边框(border)：

border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)

border属性可以拆分为如下设置:

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

4 盒子模型

​ CSS渲染页面的时候，使用了一种规则，就是盒子模型
​ 盒子模型包括了12个数值，分别是：外边距的上下左右
​ ，内边距的上下左右，边框的上下左右。
··· 一个元素在页面中所占宽度的公式：
​ （左外边距+左边框的宽度+左内边距）+内容宽度+右内边距+右边框的宽度+右外边距

盒子模型显示元素的注意事项

块级元素：

​ 1 默认占一行，宽度默认100%，高度默认内容高度。
​ 2 上下相邻的两个块级元素，上下外边距会有坍塌效果。
​ 会取两个外边距的最大值

行内元素：

​ 1 默认多个行内元素占一行。
​ 2 不可以设置宽高，宽高为内容的宽高。
​ 3 给行内元素设置左右外边距/边框/内边距都会生效，上下的不生效或显示异常。

5 颜色赋值

​ 赋值方式

/*通过颜色名称赋值*/
		/*background-color: red;*/
		/*通过6位数的十六进制赋值
		每两个值表示一个颜色 红绿蓝*/
		/*background-color: #ff00ff;*/
		/*3位的十六进制写法*/
		/*background-color:fff; */
		/*通过rgb  10进制赋值*/
		/*background-color: rgb(255,0,0);*/
		
		/*通过rgb 10进制赋值 带透明值 a = alpha(0-1)*/
		background-color: rgba(0,0,255,1);

6 背景属性

background-color：设置背景颜色

background-image：设置背景图片，url('图片的路径');

background-repeat：设置或检索对象的背景图像是否及如何铺排，常用取值：

repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

background-position：设置或检索对象的背景图像位置

background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置7 文本属性

1、text-align：设置元素中文本水平对齐方式，其常用取值为:

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2、text-decoration：设置文本的下划线样式，其常用取值为:

underline: 有下划线
none: 没有下划线

3、text-indent：设置文本首行缩进，单位: 像素/百分比

4、letter-spacing：设置字符间隔/间距，其常用取值为:

normal
像素值

5、text-shadow：设置字体阴影，其取值为:

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色

圆角属性： boeder-radius:2px;
光标样式：cursor:pointer;

8 溢出属性 overflow

	visible:溢出部分可见
	hidden：溢出部分隐藏
	scroll:溢出部分滚动显示 

9 display属性:

该属性控制元素的显示方式

block：块级元素的默认值
    默认情况下独占一行
    可以设置宽高
inline：行内元素的默认值
    默认情况下多个行内元素可以处在同一行
    一般不能设置宽高
inline-block：行内块元素
    多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素

10 元素类型(了解)

div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）

p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）

div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。

span：行内元素，默认可以和其他元素显示在同一行。

(1)块级元素（block）

默认情况下，块级元素独占一行

可以设置宽和高，如果设置了就是设置的宽和高

如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)

比如: div/p/h1~h6/form/table 等元素都是块级元素

(2)行内元素（inline）

默认情况下，多个行内元素可以处在同一行

不能设置宽和高

比如: span/input/img/i/b 等元素都是行内元素

(3)行内块元素（inline-block）

既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)