css常规

最新推荐文章于 2024-09-21 23:59:03 发布

忘了喷发胶

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量117

点赞数

分类专栏：笔记文章标签： css html css3 flex web

本文链接：https://blog.csdn.net/weixin_46208395/article/details/110177074

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一盒模型

标准盒模型: 总宽度=内容 ( content ) + border + padding + margin
怪异盒模型: 总宽度 =(border + padding + content) +margin

二弹性盒子

/*开启弹性盒子*/
display:flex
flex-direction:row   //(默认)主轴为水平方向,起点在左端。
flex-direction:row-reverse   //主轴为水平方向,起点在右端
flex-direction:column   //使用后会使主轴变为y轴
flex-firection:column-reverse   //主轴为垂直方向,起点在下沿。

flex-wrap:nowrap //(默认)不换行
flex-wrap:wrap   //换行,第一行在上方
flex-wrap:wrap-reverse    //换行,第一行在下方

flex-flow:该属性是flex-direction属性和flex-wrap属性的简写形式。
flex-flow:值1(主轴方向) 值2(是否换行)
flex-flow:row nowrap   //(默认)

justify-content:flex-start   //(默认)左对齐
justify-content:flex-end   //右对齐
justify-content:center   //居中(子元素紧凑居中)
justify-content:space-between;   //两端对齐,项目之间的间隔都相等
justify-content:space-around;   //每个项目两侧的间隔相等

align-items:flex-start    //与交叉轴的起点对其
align-items:flex-end    //与交叉轴的终点即末尾对其
align-items:center    //与交叉轴的中点对其
align-items:baseline    //项⽬的第⼀⾏⽂字的基线对齐
align-items:stretch    //如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度

align-content属性,紧跟于flex-wrap属性后,该属性用于修饰flex-wrap属性
align-content:flex-start    //与交叉轴的起点对齐
align-content:flex-end    //与交叉轴的终点对其
align-content:center    //与交叉轴的中点对齐
align-content:space-between    //与交叉轴两端对齐，轴线之间的间隔平均分布
align-content:space-around    //每根轴线两侧的间隔都相等

三 css单位

1，px 绝对单位。页面按精确像素展示。
2，em 相对单位，根据父节点的font-size的决定不是固定的
3，rem 相对单位根据根节点(html)的font-size来决定的
4，vw 1vw 等于可视宽度的1%
5，vh 1vh 等于可视高度的 1%
6，% 比分比
7，pt point 大约 1/72寸 1寸等于3.333…厘米
8，pc pica，大约6pt，1/6寸。

四 css选择器

优先级
!important > 行内样式 > id选择器 > 属性选择器 > 伪类选择器 (:hover) > 标签选择器 > 伪元素(:before)

可以继承的属性
font-size, color, font-family

不可继承的属性
border,padding,margin,width,height

权重值
!important权重值：10000，
内联样式：1000，
id选择器：100
class、伪类、属性、伪元素选择器：10
标签选择器：1

css3新增的伪类
p：first-of-type：选择属于其父元素的首个元素；
p：last-of-type：选择属于其父元素的最后元素；
p：only-of-type：选择属于其父元素的唯一元素；
p：only-child：选择属于其父元素的唯一子元素；
p：nth-child（1）：选择属于其父元素的第一个子元素；
：enabled：disabled：表单控件d的禁用状态；
：checked：单选框h或复选框被选中；

五 BFC

BFC(Block Formatting Context)是块级格式化上下文，他是一个独立的渲染区域也是浮动元素与其他元素的交互的区域

下列方式会创建块格式化上下文：

html 根元素
float -left -right
position absolute fixed
display flex inline-flex inline-block

块格式化上下文对清除浮动还有浮动定位都很重要

总结
浮动定位和清除浮动时只会应用于同一个BFC 内的元素，浮动不会影响其他BFC中元素的布局
而清除浮动只能清除同一BFC中在它前面的元素的浮动
外边距折叠(Margin collapsing) 也只会发生在属于同意BFC的块级元素之间
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
浮动盒区域不叠加到BFC上