CSS基本入门

作者: mao77_ | 来源:发表于2019-02-07 19:13 被阅读1次

CSS基本入门
CSS基本入门
css入门基本用法
#30天专注橙长计划#向前端工程师进发#day0#航线设计
前端入门系列
前端开发之 CSS入门
HTML5和CSS3新特性
CSS第一小节第一天
mdui quickstart 快速入门
CSS Syntax（CSS 语法）

CSS

层叠样式表（cascading style sheets）(级联样式表)

1. 选择器分类

1.1 基础选择器（标签选择器）

  <style type="text/css">
    /* 标签选择器 */
    div {
      font-size: 50px;
      color: green;
      background-color: yellow;
      width: 300px;
      height: 200px;
    }
    p {
      color: pink;
      font-size: 60px;
    }
  </style>

1.2 类选择器(自定义类名)

  <style type="text/css">
    .box {
      /* ... */
    }
    .miss {
      /* ... */
    }
  </style>

特点：谁调用，谁生效。
- 一个标签可以调用多个类选择器。
- 多个标签可以调用同一个类选择器。
类选择器命名规则：
a. 不能用纯数字或者数字开头定义类名
b. 不能使用特殊符号或者特殊符号开头，“_”可以
c. 不建议使用汉字来定义类名
d. 不推荐使用属性或者属性的值来定义类名

1.3 ID选择器（自定义名称）

  <style type="text/css">
    #box {
      /* ... */
    }
  </style>

特点：一个ID选择器在一个页面只能调用一次，如果使用2次或者2次以上，不符合w3c规范，Js调用会出问题。
a. 一个标签只能调用一个ID选择器
b. 一个标签可以同时调用一个类选择器和ID选择器

1.4 通配符选择器

  <style type="text/css">
    * {
      /* ... */
    }
  </style>

特点：给所有label都使用相同的样式。

1.5 交集选择器

  <style type="text/css">
    .box {
      /* ... */
    }
    div.box {
      /* ... */
    }
  </style>

特点：既要满足使用了某个label，也要满足使用了类（ID）选择器。

1.6 后代选择器

  <style type="text/css">
    .box {
      /* ... */
    }
    .box span {
      /* ... */
    }
  </style>

特点：无限制隔代，只要能代表label，label、类选择器、ID选择器自由组合

1.7 子代选择器

  <style type="text/css">
    div>span {
      /* ... */
    }
    p>span {
      /* ... */
    }
  </style>

1.8 并集选择器

  <style type="text/css">
    div, p, span, h1 {
      /* ... */
    }
  </style>

1.9 相邻选择器（下一个兄弟选择器）

选择器 + 选择器

1.10 下一群兄弟选择器

选择器～选择器 / *

2 样式表书写位置

2.1 内嵌式写法

样式只作用于当前文件，没有真正实现结构表现分离

<head>
  <style type="text/css">
    /* ... */
  </style>
</head>

2.2 外链式写法

作用范围是当前站点，范围广，真正实现结构表现分离

<link rel="stylesheet" href="1.css">

2.3 行内样式表

作用范围仅限于当前标签，范围小，结构表现混在一起（不推荐使用）

<h1 style="font-size:30px;color:red;>风衣<h1>

3. css三大特性

3.1 层叠性

当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后面的代码（后边代码层叠前边的代码）

3.2 继承性

继承性发生的前提是包含（嵌套关系）, 文字所有属性（颜色／大小／字体／粗细／风格／行高）都可以继承

特殊情况：

h1系列不能继承文字大小。
a标签不能继承文字颜色。

3.3 优先级

默认样式<标签选择器<类选择器<ID选择器<行内样式表<！Important

优先级特点：

继承的权重为0；
权重会叠加；

4. 链接伪类

a:link｛属性：值；｝　　a｛属性：值;｝　效果是一样的。

A:link｛属性：值；｝: 链接默认状态
A:visited｛属性：值；}: 链接访问之后的状态
A:hover｛属性：值；｝:鼠标放在链接上显示的状态
A:active｛属性：值；｝:链接激活的状态
:focus｛属性：值；｝:获取焦点（光标状态）

5. 行高

是基线和基线之间的距离

5.1 浏览器默认文字大小

行高＝文字高度＋上下边距
默认文字大小：16px；
一行文字行高和父元素高度一致的时候，垂直居中显示

6. 盒子模型

6.1 边框　border

box-sizing:
- border-box：内缩模型，如果增加border和padding,会挤压内容区域
- content-box：传统的标准盒模型，外扩

6.2 内边距 padding

盒子的宽度＝定义的宽度＋边框宽度＋左右内边距

内边距影响盒子大小
- 影响盒子宽度的因素
- 内边距影响盒子的宽度
- 边框影响盒子的宽度
继承的盒子一般不会被撑大
- 包含（嵌套）的盒子，如果子盒子没有定义宽度／高度，给子盒子设置内边距（小于等于父宽度／高度），则不会撑大盒子。

6.3 外边距 magin

垂直方向外边距合并
- 垂直方向的2个盒子，如果都设置了垂直方向外边距，取的是设置的比较大的值
外边距的塌陷
- 嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷
- 解决方法：
  a. 给父盒子设置边框（不推荐使用）
  b. 给父盒子设置overflow:hidden　　　bfc(格式化上下文)

7 文档流（标准流）

元素自上而下，自左而右。块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

8 浮动布局

Float:left　|　right

8.1 特点：

元素浮动之后不占据原来的位置（脱标）
浮动的盒子在一行上显示
行内元素浮动之后转换为行内块元素（不推荐使用，建议display）
让块级元素在一行显示
浮动的作用
- 文本绕图
- 制作导航
- 网页布局

8.2 清除浮动

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素会发生位置错误。
Clear: left|right|both, 工作中用的最多的是clear:both;
——清除浮动不是不用浮动，清除浮动产生的不利影响
——清除浮动的方法

额外标签法（不推荐)
在最后一个浮动元素后添加标签。
```

<div style="clear: both;"></div>
```
给父集元素使用overflow:hidden;　bfc
如果有内容出了盒子，无法使用此法。

伪元素清除浮动　(推荐使用)

  <style type="text/css">
  .clearfix:after {
    content: '';
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
  }
  /* 兼容ie浏览器 */
  .clearfix {
    zoom: 1;
  }
</style>
</head>
<body>
  <div class="header"></div>
  <div class="main clearfix">
    <!-- 浮动元素的父盒子调用伪元素清除浮动 -->
    <div class="left"></div>
    <div class="content">
      <div class="content_top"></div>
      <div class="content_bot"></div>
    </div>
    <div class="right"></div>
  </div>
</body>

9 定位

定位方法：left　|　right　|　top　|　bottom

9.1 静态定位

Position:static;

默认值，就是文档流。

9.2 绝对定位

position:absolute;

特点:

元素使用绝对定位之后不占据原来的位置（脱标）
元素使用绝对定位，位置是从游览器出发
嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子的位置是从游览器出发
嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子的位置是从父元素位置出发
给行内元素使用绝对定位之后，转换为行内块（不推荐使用，建议使用display:inline-block）

9.3 相对定位

position:relative;

特点:

使用相对定位，位置从自身出发
不脱标，移动之后还占据原有位置
子绝父相（父元素相对定位，子元素绝对定位）
行内元素使用相对定位不能转行内块

9.4 固定定位

position:fixed;

特点:

固定定位之后，不占据原来的位置（脱标）
元素使用固定定位之后，位置从游览器出发
元素使用固定定位之后，会转化为行内块（不推荐，建议使用display:inline-block）

10 定位的盒子居中显示

Margin:0 auto;
- 只能让标准流的盒子居中对齐
定位的盒子居中；
- 先向右走父元素盒子的一半50％，再向左走子盒子的一半（margin-left:负值）

11 标签包含规范

div可以包含所有的标签。
p标签不能包含div　h1等标签。（可以包含a／img）
H1可以包含p　div等标签。
行内元素尽量包含行内元素，行内元素不要包含块元素。

12 附加

盒模型
- margin,border,padding,content
- 水平方向：
  - width,margin-left,margin-right
  - margin:0 auto;
- 垂直方向
  - margin塌陷（叠加）
  - 两个margin接触到一块
  - 第一个子元素会和父元素的margin-top会出现塌陷。给父容器添加padding或 border
  - 浮动的时候没有塌陷
浮动
- left,right
wrap: 容器、包裹
content: 内容
footer: 尾部
primary: 主要
secondary: 次要
ul{list-style:none;}

2. float/浮动

display
- none: 让这个元素彻底消失干净
- block: 元素占位
overflow: 控制元素的内容超出自己的范围之后的一种行为
- visible：默认值，超出部分正常显示
- hidden：把超出部分隐藏
- auto：自动设置滚动
- scoll：右下都会出现滚动条
文字不会进入浮动元素的下方。（不会被压住）
浮动的子元素撑不起来父元素的高度
浮动清除:
- ++设置父元素的高度++。
- clear清除浮动（both）
  - left: 清除左边的浮动对自身的影响
  - right: 清除右边的浮动对自身的影响
  - both
  - Shortage:
    1. 浮动元素的父容器仍然没有高度
    2. 清除浮动的元素的margin-top失效。
- 外墙法（两者中间加一个label）
```
.wall {
    height: 40px;
    clear: both;
    background-color: transparent;
}
```
- 内墙法
  - 放在父标签里面，子标签外面
```
.clear {
    display: block;
    clear: both;
    height: 10px;
}
```
  - 在第一个容器中最后添加一个元素，用此元素清除浮动
  - 第一个容器因此则有了高度。
  - 内墙法的升级:
    - 不用专门的label,而是使用伪元素。
- 伪元素（::after）
```
    .box::before,.box::after{
    display: block;
    background-color: pink;
    content:"hey";/*必须有这个属性*/
}
```
  - ::before
  - ::after
  - content这个属性必须有，至少为一个空字符串。
  - 可以让伪元素成为一个块。
  - 最好用标签在前面
```
.clear::after,.clear::before {
    content: "";
    display: block;
    clear: both;
}
```
- overflow
  - hidden: 有可能造成内容的截取
  - 给浮动元素的父元素添加
ie6在涉及浮动的bug
- 第一个浮动元素的双margin bug
  - 解决：浮动元素加_display: inline;
  - css hack技术（IE6）/加下划线_。
- 小盒子问题（外墙自动变宽）
  - IE6不允许小于20PX高度
  - 解决：font-size: 5px;
- overflow清除浮动在ie6无效问题
  - 解决：overflow: hidden;后面加一个_zoom : 1;

3. 定位

相对定位
- position的默认值为static
- 相对于自身的偏移
- left>right（如果同时设置）
- top>bottom（如果同时设置）
- 相对定位可以覆盖其他元素，但是它并没有脱离文档流
- 元素浮动之后也可以relative（用的较少）
- 相对定位不会影响其他元素的layout
绝对定位
- 设置了absolute的元素会脱离atatic
- 绝对定位的元素，可以覆盖其他元素。实现层级效果。
- 默认情况下，absolute的值是参照于当前的viewport(可视口)
- 实际使用中，绝对禁止绝对定位的元素去参照默认的视口（viewport）
- 从直接父元素开始找，一直找到有一个父元素有定位（relative | absolute | fixed）,就以这个父辈作为它的参照物。
- 子绝父相，参考父容器的padding,对决定定位的子元素无效
- 绝对定位的子元素的margin,仍然有效。但是一般情况如果绝对定位了，不会再使用margin
- 如果多个绝对定位的元素，谁在文档流后面，就会覆盖住前面的文档。
- 在绝对元素里面的完美居中：
```
p {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0; /*在绝对定位中固定位置*/
    top: 0;
    bottom: 0;
    margin: auto;
}
```
- 过度受限
```
p {
positon: absolute;
left:100px;
right: 100px;/*剩余的value为此元素的宽度*/
}
```
- 移动端/自适应
  - max-width上限
  - min-width 下限
- 可以通过:hover/display:none;/display:block;实现点文字出图片效果。
  - 或者C3属性transition/:hover/width/height来实现
固定定位
- 相对：
  1. 不脱离文档流
  2. 相对于自己定位之前的移动
- 绝对：
  1. 脱离文档流
  2. 相对于它的参考父元素
    - 默认viewport
    - 指定位置
- 固定：
  1. 浏览器
  2. 不会随着游览器的滚动而滚动

4. CSS杂项

字体

font-family
- sans
- sans-serif
- cursive
- monospace
- fantasy
font-weight
- nomal
- small
- bold
- bolder
- 100-900
font-size/px
- em: 这个是一个相对的长度单位
  - 2em: 是他父容器字体的大小的2倍
  - 只有字体的em相对于父容器
  - width等属性的em相对于自己
- chrome等游览器默认字体大小为16px
- C3添加属性rem(root)相对于HTML标签（IE8兼容性不太好）
font-style
- normal
- italic
- oblique
- inherit
- ++font连写时，font-size和font-family为必写项++
- font:italic bold 13px/30px sans-serif;

CSS基本入门
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个...
CSS基本入门
CSS 层叠样式表（cascading style sheets）(级联样式表) 1. 选择器分类 1.1 基础选...
css入门基本用法
css 定义方式指定特定的标签指定id选择器指定class选择器指定特定标签的特定id或者class 类名...
#30天专注橙长计划#向前端工程师进发#day0#航线设计
发现问题，路线大修。学习方面：暂定按HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门...
前端入门系列
前端HTML & CSS 基础入门（1）初识前端HTML & CSS 基础入门（2）段落及文本前端HTML &...
前端开发之 CSS入门
文章简要：CSS介绍DIV+CSS的优点CSS 语法CSS新建格式 CSS入门 CSS介绍 CSS（Cascadi...
HTML5和CSS3新特性
前端的入门现在基本是由hml和css组合写静态页面开始，w3school官方已经推出Hhtml5和css3新特性了...
CSS第一小节第一天
CSS基础入门什么是CSS？ CSS 指层叠样式表 (Cascading Style Sheets) CSS通常...
mdui quickstart 快速入门
实现入门效果目录结构代码说明这个框架依赖很少,入门实例 css 加入 mdui.css javascrip...
CSS Syntax（CSS 语法）
简单介绍CSS，学习入门自用=-= 以下笔记摘抄全部来自优达学城，感谢优达让我入门。什么是CSS CSS即层叠样...

CSS基本入门

CSS

1. 选择器分类

1.1 基础选择器（标签选择器）

1.2 类选择器(自定义类名)

1.3 ID选择器（自定义名称）

1.4 通配符选择器

1.5 交集选择器

1.6 后代选择器

1.7 子代选择器

1.8 并集选择器

1.9 相邻选择器（下一个兄弟选择器）

1.10 下一群兄弟选择器

2 样式表书写位置

2.1 内嵌式写法

2.2 外链式写法

2.3 行内样式表

3. css三大特性

3.1 层叠性

3.2 继承性

3.3 优先级

4. 链接伪类

5. 行高

5.1 浏览器默认文字大小

6. 盒子模型

6.1 边框 border

6.2 内边距 padding

6.3 外边距 magin

7 文档流（标准流）

8 浮动布局

8.1 特点：

8.2 清除浮动

9 定位

9.1 静态定位

9.2 绝对定位

9.3 相对定位

9.4 固定定位

10 定位的盒子居中显示

11 标签包含规范

12 附加

2. float/浮动

3. 定位

4. CSS杂项

字体

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

6.1 边框　border