初学web前端-20170427

1.边框倒角

  倒角：将元素的直角倒成圆角

1.属性：border-radius

 取值：
         1.具体数值 px
2.百分比 % 设置圆形时使用

        2.单角设置

 属性：
 border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角

2.边框阴影

  属性：box-shadow
是由多个值列表组成的，值之间用空格分开即可。
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:（必须值）阴影在水平位置的偏移，值为正向右偏，值为负向左偏
v-shadow:（必须值）阴影在垂直方向的位置偏移，值为正向下偏，值为负向上偏。
blur:（可选值）阴影模糊距离
spread:（可选值）阴影的尺寸
color:（可选值）阴影的颜色
inset:（可选值）将默认的外阴影改为内阴影
  练习一：
  设置一个圆形的发光效果。

3.框模型

        1.什么是框模型

        box model又称为盒子模型
框模型定义了元素框处理元素内容的内边距和外边距的方式。
内边距：内容区域与边框之间的间距
外边距：围绕在边框外的空白间距，指定是元素与元素之间的间距

2.框模型的计算模式

 实际宽度=左右的外边距+左右的边框+左右的内边距+width
实际高度=上下的外边距+上下的边框+上下的内边距+height
增加元素的内外边距，元素内容区域的大小不变，但是总体占地尺寸会变（变大）

   3.外边距

        1.语法

    属性：margin
    取值：
       1.具体数值 px
2.百分比 %
3.auto 自动(在水平方向自动居中对齐，只对块级元素起作用)
4.负数 向相反的方向移动

2.数量

        margin:value四个方向的外边距
margin:v1 v2(v1上下外边距 v2左右外边距)
margin:v1 v2 v3(上，左右，下)
margin:v1 v2 v3 v4(上右下左)顺时针

3.单边设置

        margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距

  4.内边距

       1.语法

        属性：padding
取值：
 1.具体数值 px
2.百分比 %

2.数量

        padding:value四个方向的内边距
padding:v1 v2(上下，左右)
padding:v1 v2 v3(上，左右，下)
padding:v1 v2 v3 v4(上，右，下，左)顺时针

3.单边设置

        padding-left:
padding-right:
padding-top:
padding-bottom:
练习：
 设置两个div元素，要求他们之间的间距为80px,当鼠标放到第二个div元素上时，元素的可视区域有变大的效果。

4.浮动定位

      1.定位

 页面上的元素，应该出现的位置

2.定位分类

 1.普通流定位

 又称为文档流定位，他是页面元素默认定位方式。
文档流规范：
        1.块级元素
  从上到下排列，独占一行。
2.行内元素
  从左到右排列，多个元素在一行中显示，如果显示不下再换行。

2.浮动定位

 解决问题：能够让多个块级元素在一行中显示

                        1.特点：

 1.脱离文档流，不占据页面空间。
 2.会停靠在父元素的左边或右边或其他已经浮动元素的边缘上。

       2.属性：float

       取值：
       none:无浮动，默认值
left:左浮动
right:右浮动
 

      3.相对定位
      4.绝对定位
      5.固定定位

5.背景

        是指以背景颜色或背景图片的形式为元素设置背景
背景颜色：就是以单一颜色作为背景进行填充
背景图像：以图片作为背景进行填充

1.背景色

       属性：background-color
取值：合法的颜色值 transparent透明色
背景色和背景图像默认都是从元素的边框位置处开始填充。

2.背景图像

       属性：background-image
取值：url(图像的路径)
ex:background-image:url(a.jpg);

        3.背景图像平铺

       属性：background-repeat
取值：
        1.repeat 默认值，水平和垂直方向都平铺
2.no-repeat 无平铺效果，只显示一次背景图像
3.repeat-x:只在水平方向平铺
4.repeat-y:只在垂直方向平铺

4.背景图像的位置

       属性：background-position
取值：

         1.x y

        x:背景图像横向 水平方向位置偏移
        取值为正：向右偏移
取值为负：向左偏移
y:背景图像纵向 垂直方向位置偏移
         取值为正：向下偏移
取值为负：向上偏移

2.x% y%

         0% 0%：原始位置，左上角
100% 100%：右下方
50% 50%:元素正中间

3.关键字

       x:left/center/right
y:top/center/bottom

6.文本格式化

  1.字体属性

        1.指定字体

        属性：font-family
        取值：字体1，字体2，字体3
                        ex:font-family:"微软雅黑",Arial,"黑体";

2.字体大小

        属性：font-size
取值：px,pt为单位的数值

3.字体加粗

      属性：font-weight
      取值：
       normal 正常
bold 加粗(b,hn)
value：400-900 整百倍数字

4.字体样式

         属性：font-style
 取值：
                    normal 正常
    italic 斜体（i）

  2.文本格式

 1.文本颜色

 属性：color
  取值：合法颜色值

           2.文本排列方式（水平方向）

       属性:text-align
控制文本的水平对齐方式
取值：left/center/right/justify（调整版面）

   3.文本修饰（线条修饰）

 属性：text-decoration
 作用：线条修饰
   取值：
        none:无线条修饰
underline:下划线
overline:上划线
line-through:删除线

4.行高

 控制一行文本的高度，如果行高的高度大于字体本身的大小，那么该行文本将在指定的行高内呈现垂直居中的效果。
属性：line-height
取值：以px为单位的数值
练习：
 设置一个链接默认加载页面时无下划线和特殊颜色，当鼠标悬停时文字颜色为红色并且出现下划线和加粗的效果

7.显示方式

  1.什么是显示方式？

 决定页面上的元素到底以什么方式进行显示（块级，行内，行内块）

    2.如何修改显示方式？

      属性：dispaly
取值：
         none:隐藏，让生成的元素不显示
block:让元素表现的和块级元素一致
inline:让元素表现的和行内元素一致
inline-block:让元素变成行内块
行内块：本身是行内元素，但是又具备块级元素的特征

8.列表

     1.列表项标记

        属性:list-style-type
取值：
               none:没有
disc:实心圆
circle:空心圆
square:实心方块

     2.列表项图像

       属性：list-style-image
取值：url(图像路径);

     3.列表项位置

        属性：list-style-position
取值：
       outside:默认值，列表项标记位于内容区域之外
inside:将列表项标记放在内容区域之内

      4.列表属性

 list-style:type url() position;
常用方式：
 list-style:none;