css基础
简介
语法
选择器 属性声明;
属性声明 = 属性名:属性值;
属性值语法:
比如
margin:[<length>|<percentage>|<auto>]{1,4}
包含三种
基本元素:length percentage auto 这些关键词
组合符号:[|] 这些符号
数量符号:1,4
1 基本元素
- 关键字
- auto,solid,bold
- 类型
- 基本类型 length percentage color
- 组合类型 ‘padding-width’ color-stop
- 符号 / , 分隔属性值
- Inherit, initial
2 组合符号
空格
必须有,且顺序固定
&&
&& 必须有,顺序无所谓
|| 双分隔符
underline||overline
至少出现一个
| 单分隔符
|transparent 只能出现一个
[]
优先组合
3 数量符合
数量符合 <>
只能出现一次 数量符号 +
能出现一次或多次
数量符合 ?
可以出现,也可以不出现
数量符号 {}
{2,4} 可以出现4次,最少出现2次 数量符合 * 任意次 空格隔开
数量符号 # 一次或多次 逗号隔开
@规则语法
@media 设备满足条件,样式才生效
@keyframes 动画中间步骤
@font-face 引入外部字体
私有属性加前缀
选择器
就是表达式,选中想要描述的标签
一、基本选择器
序号 | 示例 | 含义 | 选择器类型 | 特点 | |
---|---|---|---|---|---|
1 | * | 通用元素选择器,匹配任何元素 | 通用选择器 | ||
2 | E | 标签选择器,匹配所有使用E标签的元素 | 标签选择器 | 控制一类标签 | |
3 | .info | class选择器,匹配所有class属性中包含info的元素 | 类别选择器 | 控制自定义的一类标签 | |
4 | #footer | id选择器,匹配所有id属性等于footer的元素 | id选择器 | 准确 | |
5 | [disabled]\ | [type=button] | 具有某种属性,比如disabled。 id选择器是其特例 #footer{}=[id=button]{} | 属性选择器 | |
~= | 属性中包含,类选择器是其特例 .sports{}=[class~=sports]{} | 属性 | |||
属性值首尾字符匹配,包含 | 属性 | ||||
6 | a:visited | 标签加状态 | 伪类 |
实例:
* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }
伪类选择器
标签加状态
link,visited,hover,active disabled enable checked
first-child nth-child(even)
only-child
不常见:
伪元素选择器
::first-letter {}第一个元素
::first-line{}第一行
::before {content: xxx}
::after
::selection
组合选择器规则
后代选择器
.xxx p{} 后代包括多级
子选择器
.xxx>p{} 子只有一层
兄弟选择器
h2+p{} 相邻兄弟选择器 选中h2标签后的这个p标签
h2~p{} 通用兄弟选择器 选中h2标签后所有的p标签
选择器分组
逗号分隔开
继承
body{font-family: “xxx”} 会被子元素继承
自动继承的属性
color
font
text
list-style
…
非继承属性
background
Border
Position
选择器优先级
优先级相同就
CSS层叠
优先级:高覆盖低的
相同属性:后面覆盖前面的
不同属性:合并
改变优先级
改变顺序 覆盖
提升选择器优先级 改变选择器的写法 加高优先级 标签变类 类变id
!important
.tip{color: blue !important}
文本
文字形状
文字大小 font-size [number|percentage]
字体 font-family
加粗 font-weight
斜体 font-style
(段落 )行距 line-height 百分比和数字写法的继承关系不一样 数字写法背书关系直接继承
这5个属性可以缩写为font这一个属性
下面两个实例是无效的
文本颜色
color
文本位置
水平对齐text-align:left right center jusitfy
垂直对齐vertical-align: 上标,下标和居中
其他
文本缩进:text-indent
文本格式:white-space 换行是否保留 空格是否合并 自动换行 pre-wrap用的多 保留换行和空格,自动换行
单词换行:word-warp word-break overflow-wrap
文字阴影:text-shadow
下划线:text-decoration
光标形状:cursor
文本溢出:text-overflow
强制继承:属性值inherit
不换行,超出部分用省略号替代
1 | text-overflow: ellipsis; |
盒模型
标准盒模型的长宽属性只作用于content
IE盒模型包括 content + padding + border
margin 边缘 页边空白 margin合并问题相邻合并取大值 父元素和首尾合并
border 边线 :width style color
border-width
border-style
border-color
padding 内衬
content 内容
border-radius 可以设8个值
overflow 盒溢出
box-sizing 我们可以简单的理解,当box-sizing
为content-box
时,我们使用的是W3C盒模型,当box-sizing
为border-box
时,我们使用的是IE盒模型
content+padding+border
box-shadow 阴影不占空间
outline: width style color 不占空间 border外
背景
background-color 颜色 最底层
background-image 图片 先写的在上面
background-repeat 背景平铺
nackground-attachment 背景跟随内容滚动
background-position 背景定位
linear-gradient 线性渐变
radial-gradient 径向渐变
还能加repeat
background-origin: border-box|pading-box|content-box 背景原点
background-clip 裁剪盒子的背景 content padding border
background-size
简写里的两个box是origin和clip 如果只写一个,那么两个box为同一个值
简写
布局
简介
元素的摆放模式
display
设置元素的显示方式
block :块级元素
1 宽度默认为父元素宽度
2 可设置宽高
3 换行显示
默认block元素 div p hx ul form…
inline:行内元素
1 默认宽度为内容宽度
2 不可设置宽高
3 同行显示
4 元素内换行
默认inline元素 span a label cite em…
inline-block 从行内元素修改一下
1 内容宽度
2 可设置宽高
3 同行显示
4 整块换行
默认inline-block input textarea select button
vertical-align:middle 垂直居中有问题
none:设置元素不显示,位置没有了,从display的字面意思来理解就是根本就不放上去
visibility位置还在
flex: 弹性容器,看下面的flex弹性布局
相关布局模式
块级元素水平居中
1 | <div> |
居中导航
容器 text-align:center
里面 display:inline-block
position
设置定位方式
position 设置参照物
static 默认
relative 相对定位
1 仍在文档流中
2 参照物为元素本身
常用来改变元素的层级
作为绝对定位元素的参照物
absolute 绝对定位
1 默认宽度为内容宽度
2 脱离文档流
3 参照物为第一个定位祖先/根元素(html)
用一个相对定位的元素包裹绝对定位的元素
fixed
1 默认宽度为内容宽度
2 脱离文档流
3 参照物为视窗
top right bottom left 设置位置
z-index 设置层级
相关布局模式
轮播头图
叠加 父元素relative 子元素absolute
固定顶栏
top-bar{position: fixed}
body{margin-top:xxxpx}
遮罩
盖住页面
1 | .mask{ |
三行自适应布局
头尾固定,中间自适应
1 | header{position: absolute;top: 0px;left: 0;width: 100%; height: 100px;background-color: indianred;} |
float
none 默认
right
1 默认宽度为内容宽度
2 脱离文档流
3 向指定方向一致移动,移到父元素的边界(不是完全脱离)
float的元素在同一文档流,行内
对元素,脱离文档流;对内容,在文档流
clear
应用于后续元素 清除浮动元素对后续元素的影响。float元素从当前父元素浮动出来可能会对父元素后续的元素造成影响。
1 | .clearfix:after{ |
两列布局
块级元素同行显示
在文档流中
flex
父元素 position:flex 弹性元素是在其文档流中的子元素。不包括position: absolute 和非子后代元素。注意float元素也在文档流中
方向(容器) flex-flow
flex-direction 排列方向 row row-reverse colunm column-reverse
flex-wrap 是否换行
flex-flow 是direction和wrap的缩写
order 改变单个元素的排列顺序
弹性(元素)flex
flex-grow 分配剩余空间的比例 先计算basis再从剩余空间分配
flex-shrink 分配缺少空间的比例 初始值为1,平均分配,为0不分配,也就是不收缩了
flex-basis 弹性元素的初始宽(横向排列)或高(纵向排列)
缩写为flex:grow||shrink||basis
对齐(容器)
justify-content: 主轴方向的对齐方式
align-items: 容器辅轴上的对齐方式
align-content:容器 辅轴 多行的行对齐方式
align-self:单个元素在辅轴上的对齐方式
三行两列自适应
1 |
###
变形
transform
调用变形函数
transform: function()
函数有
rotate旋转
translate移动
scale伸缩
skew倾斜
transform-origin
设定变形原点
perspective
设定人眼的距离来表现透视效果
perspective-origin
设定人眼的角度来表现透视效果
translate3d
加入了z轴的transform
transform-style
backface-visibility
变形之后的背面的可见性
动画
transition
transition-property
产生动画效果的属性
transition-durantion
动画效果持续的时间
transition-timing-function
动画速度变换控制
transition-delay
动画开始延时时间
animation
animation-name
自运行多帧动画
文档流
什么是文档流?
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流,分别是:浮动、绝对定位和相对定位。
元素种类
display属性 块级元素 block 行内元素 inline 可以通过css修改
块级可以包含块级和行内,行内只能包含文本和行内
块级占据一整行空间,行内占据自身宽度空间,在同一行里可以放很多
宽高设置、内外边距的差异
块级元素(block-level)
1 | div h1 h2 h3 h4 h5 h6 p hr |
行类元素(inline-level)
1 | em strong span a br img |
文章标题:css基础
本文作者:Benny
发布时间:2019-11-04, 14:50:28
最后更新:2019-11-04, 14:50:58
原始链接:https://benny233.github.io/2019/11/04/css基础/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。