CSS基础知识(二)
CSS基础知识(二)
CSS中的百分比
width、height
- width百分比，相对于父元素的宽度
- height百分比，相对于父元素的高度
- html默认高度是视口viewport的高度
- 实际子元素设置height为100%不一定生效，子元素的高度由它的内容决定，且这个子元素不是绝对定位
margin、padding
- margin、padding的上下左右百分比数相对于父元素的宽度计算，但是它需要在writing-mode属性值为horizontal-tb水平排布
border-raduis
- 相对于元素本身的宽高
background-position
- 初始值 0% 0%
- 相对于图片本身的宽高计算
font-size
- 相对于父元素的字体大小
line-height
- 相对于自身字体大小
vertical-align
- 相对于自身的line-height
bottom、left、right、top
- left、right相对于父元素的宽度
- bottom、top相对于父元素的高度
translate
- 相对于自身宽高
flex
- flex=1
百分比的继承
- 可继承的元素
盒子
标准盒子模型：box-sizing: content-box
- content、padding、border、margin
- width、height = content+padding+border
IE盒子模型：box-sizing: border-box
- content、padding、border、margin
- width、height =content-padding-border
img、iframe、video等替换元素
选择器
选择器优先级
- !important 10000
- 内联样式 1000
- id 100
- class 10
- 属性 10
- 伪类 10 :hover :active :visited :checked :lang :root :not :is :first-child :focus :nth-child :last-child 指定元素的特殊状态
- 标签选择器 1
- 关系 1
- 伪元素 1 ::before ::after ::first-line ::first-letter ::marker ::selection 被选择元素的修改特点样式
- 通配符选择器 0
- 自定义属性和继承 -1
布局
正常流布局
display
弹性盒子
flex布局概念：沿着主轴或者交叉轴对齐之中的元素
主轴：flex-direction
- row：默认值，沿着inline方向延申
- row-reverse：沿着inline方向延申，一般指从右往左
- column：沿着block上下方向延申
- column：沿着block上下方向延申，一般指从下往上
交叉轴：垂直于主轴
flex属性
flex-direction：flex元素排列的方向。
flex-wrap：多行flex元素排列
- no-wrap：默认值，所有元素一行排列
- wrap：换行排列
flex-flow：flex-direction、flex-wrap联合写法。flex-flow:row wrap;
flex元素属性：为了改变flex容器中的可用空间。
flex-grow：元素延展。
- 设定值为正整数，flex元素会以flex-basis为基础，沿着主轴方向增长尺寸，这样元素会延展，并占据在此方向轴上的可用空间。
- 如果有其他元素也延展，则各自占据可用空间的一部分。
- 设定flex-grow:1，容器中的可用空间被平分，元素会延展并填满主轴方向上的空间。
- 可以按照比例分配，如第一个元素flex-grow:2，其他元素为1，则第一个元素占据其他元素的2倍。
flex-shrink：元素收缩。flex容器没有足够排列元素的空间，可以设置元素收缩。
- 设定值为正整数，元素收缩到flex-basis以下。
flex-basis：指定flex元素在主轴方向上的初始空间大小，默认为auto
- 检查元素是否指定具体尺寸，例如设定width大小，就指定元素尺寸为width。
- 元素没有设定大小，则指定元素尺寸为元素内容的大小。
flex属性简写
flex:1 ，表示flex:1 1 0%，元素平分可用空间。
flex:initial，表示flex:0 1 auto，初始值
- flex-grow:0，元素不会延申，以flex-basis为标准。
- flex-shrink:1，缩小元素，防止溢出。
- flex-basis:auto，根据元素内容尺寸。
flex:auto，表示flex:1 1 auto
flex:none，表示flex:0 0 auto，不能伸缩
元素对齐和空间分配
align-item：元素在交叉轴方向对齐。
stretch：默认值，元素拉伸到最高元素的高度，填满容器高度。
flex-start：按照flex容器顶部对齐
flex-end：按照flex容器底部对齐
center：居中对齐
justify-content：元素在主轴方向对齐。
- flex-start：默认值，按照flex起始线对齐
- flex-end：按照flex终止线对齐
- center：中间对齐
- space-between：两端对齐，元素间隔相等对齐，最左右两边贴近边框
- space-around：每个元素作用空间相等，最左右两边距离边框是元素间隔的一半？
align-self：设置单个元素对齐，可覆盖align-item，默认为auto，可继承父元素align-item。
justify-self：设置单个元素在主轴方向对其，
容器对齐和空间分配
align-content：设置多行在交叉轴方向上对齐，对单行无效。
stretch：默认值，均匀分布项目，拉伸‘自动’ - 大小的项目以充满容器
flex-start：按照flex容器顶部对齐
flex-end：按照flex容器底部对齐
center：居中对齐
space-between：均匀分布项目，第一项与起始点齐平，最后一项与终止点齐平
space-around：均匀分布项目， 项目在两端有一半大小的空间
space-evenly：均匀分布项目，项目周围有相等的空间
justify-items：设置多行在主轴方向上对齐。