通俗重制系列--CSS基础

简介: 通俗重制系列--CSS基础

通俗重制系列--CSS基础


CSS语法

语法一:样式语法

选择器{
  属性名:s属性值;
  /*注释*/
}

@语法

link 和 @import 都能导入一个样式文件,它们有什么区别嘛?

  • link 是 HTML 标签,除了能导入 CSS 外,还能导入别的资源,比如图片、脚本和字体等;而 @import 是 CSS 的语法,只能用来导入 CSS;
  • link 导入的样式会在页面加载时同时加载,@import 导入的样式需等页面加载完成后再加载;
  • link 没有兼容性问题,@import 不兼容 ie5 以下;
  • link 可以通过 JS 操作 DOM 动态引入样式表改变样式,而@import不可以。
@charst"UTF-8" //声明字符编码
@import url (2.css)// 导入额外的css文件
@media (min-width: 100px) and (max-width: 200px) {
  语法一
} //媒体查询

注意事项

1.@charset 必须放在第一行
2.前两个 at 语法必须以分号 ; 结尾
3.charset 是字符集的意思,但 UTF-8 是字符编码 encoding,这是历史遗留问题

优先级

网络异常,图片无法展示
|

文档流

网络异常,图片无法展示
|

流动方向

  1. inline(内联) 元素从左到右,到达最右边才会换行
  2. block(块) 元素从上到下,每一个都另起一行
  3. inline-block(内联块) 也是从左到右,但是到达最后不会把自己分成两块

网络异常,图片无法展示
|

宽度

  1. inline 宽度为内部 inline 元素的和,不能用 width 指定
  2. block 默认自动计算宽度(不是100% ),可用 width 指定
  3. inline-block 结合前两者特点,可用 width

网络异常,图片无法展示
|

高度

  1. inline 高度由 line-height 间接确定,跟 height 无关
  2. block 高度由内部文档流元素决定,可以设 height
  3. inline-blockblock 类似,可以设置 height

网络异常,图片无法展示
|

overflow 溢出

当内容大于容器 当内容的宽度或高度大于容器的,会溢出 可用 overflow 来设置是否显示滚动条

  1. auto 是灵活设置
  2. scroll 是永远显示
  3. hidden 是直接隐藏溢出部分
  4. visible 是直接显示溢出部分
  5. overflow可以分为 overflow-x 和 overflow-y

auto示例

网络异常,图片无法展示
|

脱离文档流

哪些元素脱离文档流

  1. float
  2. position: absolute / fixed

position: absolute示例

网络异常,图片无法展示
|


盒模型

  • content-box:标准盒模型;
  • border-box:IE 盒模型;

网络异常,图片无法展示
|

  • content-box width = 内容宽度
  • border-box width = 内容宽度 + padding + border

基本单位

长度单位

1.px 像素
2.em 相对于自身 font-size 的倍数
3.百分数
4.整数
5.rem:等你把 em 滚瓜烂熟了再问 rem
6.vw 和 vh
7.其他长度单位都用得很少,不用了解

说一下浮动

从三个方面回答:1、浮动的作用:常用于图片,可以实现文字环绕图片。

2、浮动的特点:脱离文档流,容易造成盒子塌陷,影响其他元素的排列。

3、解决塌陷问题: 流行用法

  • 父元素中添加overflow:hidden
  • 给父元素添加高度、建立空白标签
  • 添加clear
  • 或者在父级添加伪元素
::after{
    content:'',
    clear:both,
    display:table
-}

如何清除浮动?

实践题,建议写博客,甩链接。

方法一,给父元素加上 .clearfix

.clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

方法二,给父元素加上 overflow:hidden。

BFC 是什么

是什么:

避免回答,直接把 BFC 翻译成中文「块级格式化上下文,独立的渲染区域」即可,千万别解释。

怎么做:

背诵 BFC 触发条件,虽然 MDN 的这篇文章 列举了所有触发条件,但本押题告诉你只用背这几个就行了

  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块 inline block 元素
  • overflow 值不为 visible 的块元素
  • 弹性元素(display为 flex 或 inline-flex元素的直接子元素)

解决了什么问题:

  1. 清除浮动(为什么不用 .clearfix 呢?)
  2. 防止 margin 合并
  3. 某些古老的布局方式会用到(已过时)

优点: 无。

缺点: 有副作用。

怎么解决缺点: 使用最新的 display: flow-root 来触发 BFC 就没有副作用了,但是很多人不知道。

如何实现垂直居中?

  1. 利用绝对定位,设置 left: 50%  和 top: 50%  现将子元素左上角移到父元素中心位置,然后再通过 translate  来调整子元素的中心点到父元素的中心。该方法可以不定宽高
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  1. 利用绝对定位,子元素所有方向都为 0 ,将 margin  设置为 auto ,由于宽高固定,对应方向实现平分,该方法必须盒子有宽高
.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}
  1. 利用绝对定位,设置 left: 50%top: 50% 现将子元素左上角移到父元素中心位置,然后再通过 margin-left  和 margin-top  以子元素自己的一半宽高进行负值赋值。该方法必须定宽高
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}
  1. 利用 flex ,最经典最方便的一种了,不用解释,定不定宽高无所谓的。
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

其实还有很多方法,比如 display: grid  或 display: table-cell  来做,有兴趣点击下面这篇文章可以了解下:

如果 .parent 的 height 写死了,就很难把 .child 居中,以下是垂直居中的方法。

忠告:能不写 height 就千万别写 height。

  1. table自带功能
  2. 100% 高度的 afrer before 加上 inline block
    这个方法还有一个优化版本
  3. div 装成 table
  4. margin-top -50%
  5. translate -50%
  6. absolute margin auto
  7. flex

得分点:flex 方案、grid 方案、transform 方案……

相关文章
|
前端开发
实验:CSS+Div基础 - 预习报告
网页设计技术实验预习报告。
197 1
实验:CSS+Div基础 - 预习报告
|
Web App开发 前端开发 Windows
CSS基础1 | 青训营笔记
本期作为复习CSS的笔记,比较基础。当然即便最基础的东西也欢迎各路高手指点,以防地基不稳大厦崩塌hhh
CSS基础1 | 青训营笔记
|
前端开发 JavaScript Java
计算机二级web题目(4)--CSS基础
计算机二级web题目(4)--CSS基础
133 1
|
前端开发
CSS基础之选择器
总所周知,css可以为网页设置多种多样的样式,那怎么样可以精确为每一个html标签设置相应的样式呢?
|
前端开发 人机交互
Web开发及人机交互导论 实验三 CSS+DIV基础
Web开发及人机交互导论 实验三 CSS+DIV基础
150 0
Web开发及人机交互导论 实验三 CSS+DIV基础
|
前端开发
CSS基础-塌陷及定位
clear:right; 右侧不允许有浮动元素
99 0
|
前端开发
CSS 基础(下)
CSS 基础(下)
64 0
CSS 基础(下)
|
前端开发 编译器 C++
CSS 基础(中)
CSS 基础(中)
99 0
CSS 基础(中)
|
缓存 前端开发 JavaScript
CSS 基础(上)
CSS 基础(上)
120 0
CSS 基础(上)