###web前端###css

###CSS

• CSS:Cascading层叠 Style样式 sheet表,css用于美化页面，html相当于盖房子，css相当于装修
  ####CSS的引入方式
• 三种引入方式：

1. 内联样式： 把样式代码写在标签的style属性里面，缺点：不能复用

    <div style="color: red">今天是星期一，好困哦！</div>
   

2. 内部样式： 在页面的head标签内部添加style子标签，在style标签内部写样式代码，缺点：只能当前页面复用，不能多页面复用

3. 外部样式： 在单独的css文件中写样式代码，在页面中通过link标签把样式文件引入当前页面

####三种引入方式的优先级

1. 内联优先级最高
2. 内部和外部优先级相同，后执行的覆盖先执行的

###CSS选择器

1. 标签名选择器

• 格式:
  标签名{
  样式名称1:值;
  样式名称2:值;
  }

2. id选择器

• 格式：
  #id{
  样式名称1:值;
  样式名称2:值;
  }
• 通过id选择器选择页面中的某一个元素

3. 类选择器

• 格式：
  .class{
  样式名称1:值;
  样式名称2:值;
  }

4. 分组选择器

• 分组选择器可以将多个选择器合并成一个选择器
• 格式：
  div,#abc,.c1{
  样式名称1:值;
  样式名称2:值;
  }

5. 属性选择器

• 格式：
  标签名[属性名=‘值’]{
  样式名称1:值;
  样式名称2:值;
  }

6. 子孙后代选择器

• 格式：
  div p span{
  样式名称1:值;
  样式名称2:值;
  }

7. 子元素选择器

• 格式：
  div>p>span{
  样式名称1:值;
  样式名称2:值;
  }

8. 伪类选择器

• 用于选择元素的状态
• 状态有：未访问状态、访问过状态、悬停状态、点击状态
• a:visited{} a:link{} a:hover{} a:active{}

9. 任意元素选择器

• 格式 *{} 选择所有元素

###常见样式
####颜色的赋值方式

• 三原色 红绿蓝 red green blue rgb

1. 颜色单词赋值

2. 6位的16进制 #0000ff

3. 3位的16进制 #f00

4. 3位的10进制 rgb(0-255,0-255,0-255)

5. 4位的10进制 rgba(0-255,0-255,0-255,0-1) 0-1值越小越透明 alpha
   ####背景图片

    设置背景图片
    background-image: url("../imgs/1.jpg");
    设置图片尺寸
    background-size: 100px 100px;
    background-repeat: no-repeat;/* 禁止重复 */ 
    设置显示位置
    /* background-position: left bottom; *//* left right top bottom center */
    background-position: 90% 90%;
   

####布局相关（盒子模型）

• 盒子模型由以下几种组成
  元素宽高、元素外边距、元素内边距、元素的边框

元素宽高

• 通过width、height给元素宽高赋值
• 通过像素和上级百分比赋值
• 块级元素可以修改宽高， 行内元素不能修改宽高，只能由内容决定

元素的外边距

• 设么是外边距：元素距上级元素或相邻兄弟元素的距离，称为外边距
• 注意事项：
  1. 块级元素可以给元素添加四个方向的外边距，行内元素只能添加左右外边距，上下外边距没效果
  2. 行内元素左右外边距相加 ，块级元素上下相邻取最大值
  3. 当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现显示异常，通过给上级元素添加overflow:hidden解决此问题
• 赋值方式： margin-top/left/right/bottom
  margin:10px; //四个方向全部是10px
  margin:20px 50px; 上下20px 左右50px
  margin:0 auto; 重要 水平居中
  margin:10px 20px 30px 40px; //上 右 下 左 顺时针
  #####元素边框
• 赋值方式： border:1px solid red border-left/right/top/bottom
• 注意事项：

1. 块级元素边框全部生效，并且会影响元素所占的宽高，行内元素边框全部生效 但是只影响元素所占宽度 不影响元素所占高度

• 盒子模型精简版：
  宽高
  行内元素不能修改宽高，由内容决定
  外边距
  行内元素不能添加上下外边距
  左右相加 上下取最大值
  显示异常 overflow:hidden
  边框
  行内元素边框不影响元素所占高度

###盒子模型之内边距

• 什么是内边距：元素边框距内容的距离称为内边距
• 赋值方式：和外边距赋值方式类似
  padding:10px;
  padding:10px 20px; 上下 左右
  padding:10px 20px 30px 40px; 上右下左
• 注意事项：行内元素上下内边距有效果但是不影响元素所占的高度
• 如果需要移动元素的文本内容只能通过元素的内边距移动
• 如果需要移动的是元素的子元素有两种移动方式，1. 给元素添加内边距，切记此种方式会影响元素的宽高 2. 给子元素添加外边距(推荐)

####行内元素特殊点

1. 不能修改宽高
2. 不能添加上下外边距
3. 边框不影响所占高度
4. 内边距不影响所占高度
   ###文本相关
5. 水平对齐方式 text-align:left right center
6. 文本修饰 text-decoration: overline/underline/line-through/none
7. 文本阴影 text-shadow:颜色 x偏移 y偏移 浓度
8. 文本颜色 color:red;
9. 行高 line-height: 可以控制文本垂直居中
   ###字体相关
10. 字体大小 font-size
11. 字体加粗 font-weight:bold/normal
12. 斜体 font-style:italic
13. 字体设置 font-family:xxx,xxx,xxx;

####溢出设置 overflow

• hidden：超出隐藏
• visible：超出显示（默认）
• scroll：超出滚动显示
  ####显示方式 display
• block：块级元素的默认值 ，可以修改宽高，只能独占一行
• inline：行内元素的默认值，可以共占一行，不能修改宽高
• inline-block:行内块，既可以修改宽高，也可以共占一行
  ####定位方式
  #####position定位
• 有四种定位方式

1. 静态定位static（文档流）

• 默认的定位方式
• 行内元素从左向右，块级元素从上到下

2. 相对定位relative

• 元素不脱离文档流从元素所在位置做位置偏移（通过top、left、right、bottom控制元素的位置）

3. 绝对定位absolute

• 元素脱离文档流 元素相对于窗口（默认）或某一个上级元素(需要给上级元素添加postion：relative)做位置偏移

4. 固定定位fixed

• 脱离文档流 元素相对于窗口做位置偏移

####浮动定位 float

• 浮动定位脱离文档流，元素从当前所在行向左或向右浮动，直到撞到上级元素边框或其它浮动元素停止
• 当纵向排列的元素需要改成横向排列时使用浮动定位
• 如果一行装不下会自动换行，换行时有可能被卡住。
• 如果元素的高度为自动识别高度，元素内部的所有子元素全部浮动后，自动识别的高度为0，可以通过给元素添加overflow：hidden 解决此问题
• 如果元素上面的其它元素浮动，则元素会自动往上顶，如果不希望元素顶上去给元素添加clear属性
  ###CSS的三大特性

1. 继承性： 子元素可以继承上级元素的部门样式，只能继承文本相关和字体相关的样式

• 部分元素不受继承影响，比如超链接a不受继承影响、h1-h6字体大小不受继承影响

2. 层叠性： 当不同的选择器选择到同一个元素，如果作用的样式不同则全部层叠到一起响应，如果作用的样式相同则由优先级决定
3. 优先级：作用范围越小优先级越高，直接选中优先级高于间接选中(继承属于间接选中) id>class>标签名

###行内元素的垂直对齐方式 vertical-align

• top 上对齐
• bottom 下对齐
• middle 中间对齐
• baseline 基线对齐 默认