CSS相关概念

1.CSS的定义

  • HTML 超文本标记语言
  • Cascading Style Sheets 层叠 样式表（级联样式表）

2.CSS的作用

  • 定义网页外观，如字体、背景、颜色, 布局 等

3.css的特点

  • ①精确的定位 准确的控制页面的任何元素(标记)

  • ② 精细的控制 可以做到像素级别的调整 PX

  • ③ 样式与内容的分离 便于维护，便于重用

    CSS使用方法

1.内联样式 行内样式

  • 在标签里面添加style属性， 属性值 写css 代码

2.内嵌样式 内页样式

  • 把 css代码 写在 style标签里面
  • style标签可以写在任何位置，建议 写在head标签中

3.外联样式 外页样式 (推荐)

  • link link <link href="css文件地址" rel="stylesheet" type='text/css'>

选择器

  1. HTML选择器 (标签选择器)

​ 标签名{ }

  1. ID选择器

​ #ID名{ }

​ 一个页面一个ID名只能给一个元素

  1. CLASS选择器

​ .class名{ }

  1. 关联选择器

​ 选择器 选择器{ }

  1. 组合选择器

​ 选择器,选择器,选择器….{ }

  1. 伪元素选择器 a连接最常用选择器:hover 鼠标悬停在上面
  2. 通配符
  3. 选择器的优先级 id > class > html标签

CSS常见属性和值

  1. 字体属性
  • font 设置字体所有的属性 font:[font-style] || [font-weight] || [font-variant] ?
  • font-family 设置字体
  • font-size 设置字体大小
  • font-weight 设置字体粗细 值： normal（默认） bold（粗） bolder（更粗） lighter（细）
  • font-variant 设置字体变形 normal small-caps（不常用）
  1. 颜色属性

​ color 设置字体颜色

  1. 文本属性

  • text-decoration 设置文本描述 值 overline（上划线） underline（下划线） line-through（删除线） none（没效果）

  • text-align 设置文本水平对齐方式 值 left right center

  • line-height 设置行高 值 长度 行与行之间的距离 如果行高等于元素的高，文本会在元素中垂直 居中

  • text-transform 大小写字母转换 值 none capitalize（首字母大写） uppercase（大写） lowercase（小写）

  1. 背景属性
  • background background: [color] [image] [repeat] [position] [attachment]
  • background-color 设置背景颜色 颜色单位
  • background-image 设置背景图片 url(‘地址’)
  • background-repeat 设置背景图片平铺方式 repeat(默认值) no-repeat repeat-x repeat-y
  • background-position 设置背景图片位置 left/right/center/number px top/center/bottom/number px
  1. 边框属性

​ border 设置边框的颜色 宽度 风格

​ border-radius 圆角

  1. 鼠标光标属性

​ cursor 设置 鼠标移动到元素上显示的效果 auto pointer move crosshair wait help text not-allowed

  1. 列表属性

    list-style 设置list风格 none

布局相关的属性

盒模型的知识：

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

行内元素 和 块级元素的 区别：

  1. 1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别

    行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。

    块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

  2. 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

  3. 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

  1. 尺寸

​ width 设置内容的宽

​ height 设置内容的高

  1. 外补白

margin 简写 同padding

所有研究一下

margin: 四个值 哪个方向

margin: 三个值

margin: 上下 左右

margin: 所有方向的margin

margin-top 距离上边的边距

margin-right 右边

margin-bottom 下边

margin-left 左边

  1. 内补白

padding

padding: 四边

padding: 上下 左右

padding: 上 左右 下

padding: 上 右 下 左

padding-top 上边内补白

padding-right 右边

padding-bottom 下边

padding-left 左边

  1. 浮动

    float

方法一：添加新元素，应用clear：both;

HTML：

1
2
3
4
5
6
<div class="box">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="clear"></div>
</div>

CSS：

1
2
3
4
5
6
.clear {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0
  }

方法二：父级div定义overflow：auto;

1
2
3
4
5
<div class="box">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>
1
2
3
4
5
6
7
8
9
.box {
  border: 1px solid #ccc;
  background: #fc9;
  color: #fff;
  margin: 50px auto;
  padding: 50px;
  overflow: auto; 
  zoom: 1; /*zoom: 1; 是在处理兼容性问题 */
}

方法三：在父级样式添加伪元素:after或者:before

1
2
3
4
5
<div class="box">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
  .box {
  border: 1px solid #ccc;
  background: #fc9;
  color: #fff;
  margin: 50px auto;
  padding: 50px;
}
.box:after{
  content: '';
  display: block;
  clear: both;
}
  1. 定位

  • static:HTML元素默认值 没有定位 遵循正常的文档流

  • relative :相对定位元素的定位是相对自身正常位置。

    注意: 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。

  • fixed元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

  • absolute绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

  • sticky 基于用户的滚动位置来定位