学习web前端：css笔记（下）

最新推荐文章于 2025-02-22 23:04:31 发布

原创最新推荐文章于 2025-02-22 23:04:31 发布 · 965 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #笔记

布局

line-height：行高，浏览器默认16px，它是基线与基线之间的距离，等于文字高度加上上下边距

图中：top是上边距，bottom是下边距，text-top表示顶线，text-bottom也叫底线，baseline则是基线；基线类似于英文本中的4条线中的第3条，英文本是平均分的，这里则是不规则的

（网图，侵删；@博客园不知名的前端李小白）

行高单位：px，写多少就是多少；em，写多少行高是文字大小的多少倍；%，行高是文字大小的倍数；只写数值，也是文字大小的倍数；

行高的继承：px、em、%，子元素的行高等于父元素的行高；行高写数值时，子元素的行高等于数值乘以子元素的文字大小；

em：em以字为单位，1em是占一个字符的宽度，大小随字符的字号而改变

rem：1 rem=1 html字号，rem只受html影响，其他字号不会影响

盒子模型

边框

border-style：边款样式；solid：实线，double：双实线，dotted：点线，deshed：虚线；

border-color：边框颜色，默认颜色等于文字颜色；

border-width：边框粗细；

连写：border：没有顺序要求； style为必填项；

border-top：上边框；border-top-style：上边框样式；以此类推；

border-radius：圆角，可以写px值和百分比； (X轴) 左上右上右下左下 / (Y轴) 左上右上右下左下，两个值控制一个角；

内边距

padding：内容距离边框的距离；padding-left / right / top / bottom ；

连写：padding:值 (四个内边距的值)；padding:值1(上下) 值2(左右)； padding:值1(上) 值2(左右) 值3(下)；padding:值1(上) 值2(右) 值3(下) 值4(左)；

盒子显示宽度：等于盒子定义的宽度+边框的宽度+左右内边距；边框和内边距会影响盒子的大小；

IE盒模型：box-sizing: border-box；显示宽高为盒子定义的宽高，即padding和border不会向外扩展，而是向内占据；

ul元素中的圆点在padding内部，padding=‘0’ 可以去除样式；

外边距

margin：盒子距离其他元素的距离；使用方式和padding类似；body元素有默认的8px；

两个元素设置相反外边距：行内元素：水平相邻时外边距叠加计算，垂直没有外边距；块级元素：垂直方向取最大；行内块：水平和垂直都是叠加；

两个盒子嵌套时给子盒子设置外边距会发生外边距塌陷：父盒子会和子盒子一起移动；

解决方法：子盒子和父盒子的边分开可以给父盒子设置边框或者给父盒子加padding，还可以使用：voerflow:hidden (溢出隐藏);

margin:auto 可以实现水平居中；margin-left:auto 可以让元素出现在最右端；

文档流

文档流(标准流)：元素自上而下，自左而右，块元素独占一行，行内元素在一行显示，碰到父级元素的边框换行；

浮动

float：float : left / right 左浮动or右浮动；

特点：元素浮动不占据原来的位置，浮动的盒子在一行上显示，行内元素浮动之后显示模式类似行内块；

清除浮动：当父盒子没有定义高度，嵌套的盒子浮动后，下边的元素发生位置错误；清除方法：清除浮动指清除浮动带来的不利影响，不是不用浮动；额外标签法：最后一个浮动元素后添加标签； clear: left (清除左浮动) / right (清除右浮动) / both (推荐，清除左右浮动)；伪元素消除：父元素::after {content:''(必填)；clear:both；} 推荐使用 溢出隐藏：overflow:hidden (父元素);