选择器,盒子模型 Flex布局-优快云博客

第一个:E:first-child 最后一个:E:last-child 个别:E:nth-child(n) eg: E:li
查找多个: 偶数:E:nth-child(2n) 奇数:E:nth-child(2n-1) 第五个以后(含5) E:nth-child(n+5) n从0开始第五个以前(含5) E:nth-child(-n+5)

伪元素选择器:

(装饰,虚拟的) 前提必须设置content 模式是行内在E里面 E::before{content:"老鼠"} E::after{content:""}

盒子模型-组成

宽高内边距padding(能撑大盒子) 边框线border(bd) 外边距margin
边框线(bd): 大小线条样式(实线:solid 虚线:dashed 点线:dotted) 颜色
border-方位词:border-top(bdt)/bottom(bdb)/left(bdl)/right(bdr)

内边距(p):20px padding-方位词(同上)
从上方开始,顺时针旋转
四值:padding:10px 20px 30px 40px(上,右,下,左)
三值:padding:10px 20px 30px(上,右,下)没有的找对面
二值:padding:10px 20px (上,右)没有的找对面
一值:padding:10px(所有的边都一样)

盒子尺寸计算:内容尺寸+border尺寸+内边距尺寸
手动做减法:
内减模式:box-sizing:border-box

外边距(m):20px(同内边距同理)不会撑大盒子
版心居中:margin:50px auto; 上50 左右居中前提盒子要有宽度

清除默认样式:

*{margin:0; padding:0;box-sizing:border-box;} li:{list-style:none;}

元素溢出:overflow

溢出隐藏:hidden 溢出滚动:scroll(内容不论是否超出都有滚动条,垂直水平) 溢出滚动:auto(溢出有垂直)

外边距-合并现象:

margin取较大值生效

外边距-塌陷问题

父子级:子级有上外边距->父级一起向下移动
取消子级margin:父级设置padding(推荐)
父级设置overflow:hidden overflow:找到父级的正确位置
父级设置:border-top

行内元素-内外边距

行内元素受line-height(设置与高度一样即可)控制,内外边距对行内元素垂直方向不起作用

盒子模型-圆角:

border-radius:数字+px/百分比
从左上角开始,顺时针旋转(与padding同理,)没有的找对面
四值:border-radius:20px;//
正圆:前提是正方形宽高的一半/50%
胶囊形状:前提是长方形高度一半

盒子模型-阴影

:box-shadow x轴偏移量(水平),y轴偏移量(垂直),模糊半径扩散半径颜色(rgb(0,0,0,透明度)) 内外阴影(inset)默认外阴影

Flex

给父级设置display:flex(变成弹性容器,弹性盒子) 默认主轴为水平(弹性盒子沿着主轴排列) 子元素可以自动挤压与压缩

对齐方式:

主轴对齐方式:

justify-content 从起点开始排列:flex-start
从终点开始排列:flex-end
中间排列:center
沿主轴均匀排列,空白间距均匀排布在弹性盒子之间:space-between
沿主轴均匀排列,空白间距均匀排布在弹性盒子两侧(弹性盒子之间的间距是两侧的两倍):space-around
沿主轴均匀排列,弹性盒子与容器之间的间距相等:space-evenly(每个地方的间距都一样)