css初级篇
1．css：cascading style sheet，层叠样式表
2．引入css
-
行间样式
style = “ ” -
页面级
<style> </style> -
外部文件
<link rel=”stylesheet” href=””style.css>，同时（异步）加载
css选择器
- Id选择器 #（井号）
- class选择器 .（点）
- 标签选择器 （标签名）
- 通配符选择器 *（星号）
- 属性选择器 []（中括号）
css复杂选择器
1．复杂选择器
- 父子选择器 / 派生选择器 空格
- 直接子元素选择器（直接下一级） >
- 并列选择器 .
- 分组选择器（多个标签共用）
字体
Arial 通用字体，乔布斯发明
color的表示方法
- 土鳖式 纯英文单词：只能测试用
- 颜色代码 #
- 颜色函数 rgb( , , )
- transparent：透明色（0~1范围小数，可结合颜色函数使用）
css权重
| 类型 | 权重 |
|---|---|
| !important | infirity（无穷） |
| 行间样式 | 1000（256进制） |
| id选择器 | 100（256进制） |
| class选择器｜属性选择器｜伪类（:）选择器 | 10（256进制） |
| 标签选择器｜伪元素（::）选择器 | 1（256进制）） |
| 通配符选择器* | 0（256进制） |
css企业开发经验、习惯
- 开发经验
-
垂直居中（单行）：文本高度
line-height = 容器高度height -
1 em = 1 font-size
- 元素分类
(1)inline 行级元素
<span> <strong> <em> <a> <del>
特点:内容决定元素所占位置;不可以通过css改变宽高。
(2)block 块级元素
<div> <p> <ul> <li> <ol> <form> <address>
特点:独占一行;可以通过css改变宽高。
(3)inline-block 行块级元素
<img>
特点:内容决定元素所占位置;可以通过css改变宽高。
盒子模型
-
border 盒子壁 + padding 内边距 + content（width + height） 盒子内容 -
magin / padding内容
一个值：上|右|下|左 是同一个值。
两个值：上下|左右 。
三个值：上|左右|下。
触发盒子的bfc
bfc ： block format context
触发方法
- position: absolute
- display: inline-block
- float: left / right
- overflow: hidden
使用1和3时，浏览器内部会给盒子自动加上2。
层模型 position
- absolute
- 脱离原来位置进行定位
- 相对于最近的有定位的父级进行定位，否则相对于文档进行定位
- relative
- 保留原来位置进行定位（灵魂出窍）
- 相对于自己原来的位置进行定位
- 一般用relative进行参照，再用absolute进行定位
浮动模型 float
- 浮动元素产生了浮动流
- 产生了浮动流的元素，块级元素看不到
- 产生了bfc的元素和文本类属性的元素以及文本，都能看到浮动元素
- 清除浮动流 clear
生效条件：只作用于块级元素
css高级篇
- 伪元素
- ::before
- ::after
- 天生是行级元素，必填属性content
- 溢出容器，打点展示
- 单行文本（三件套）
① white-space: nowrap
② overflow: hidden
③ text-overflow: ellipsis
- 多行文本
① 后端估算返回（为适应旧浏览器）
② 前端只做截断（hidden），不做打点
- 图片代替文字（网速低于20k时，浏览器会屏蔽css和js）
方法一
text-indent > width
white-space: nowrap
overflow: hidden
方法二
height: 0
padding-top = 图片的height
overflow: hidden
4．公司规定
（1）行级元素只能嵌套行级元素（但<a>不能嵌套<a>）
（2）块级元素可以嵌套任何元素（但<p>不能嵌套<div>）