CSS基础知识1
需积分: 0 49 浏览量
2022-08-08
23:22:06
上传
评论
收藏 1.28MB DOCX 举报
在布局设置的时候，font-size 影响超级大；建议在 body 中，font-size = 62.5%，后面可以用 em
当作单位，1em = 10px，可以进行响应式设计;默认正常下字体大小为 16px，62.5% = 10px
方便调试。
CSS 的坐标轴体系，默认原点在元素的左上角
CSS 3D 坐标轴体系，Z 轴以观看者为参照，x 轴从左到右，y 轴从上到下，z 轴从屏幕到观看
者（正值移动表示元素向自己方向移动）
CSS 定位
在 html 中，一切以框的形式出现
元素分为块级元素和行内元素，块级自带框，行内元素只有设置 display：block；可以像块
级元素一样显示，同时，display：none；可以让元素没有框，则不显示框和内容，不占用内
容空间。
内容空间就类似于积木，由一个个框搭建成
无名框
<div>some text<p>Some more text</div>,其中，红色部分表示无名框，无法对其应
用样式
定位机制：
普通流
按照在 html 中的顺序，块级框一个一个竖直排列
行内元素水平依次排列，一行称为一个行框，行框高度是能够包含所有行框内元素
的高度
CSS position 属性
Static：正常文档流方式生成框，行框在其父元素内
Relative：元素框偏离原来位置一定距离，原本所占的空间依然保留
Absolute：脱离文档流，相对于其包含块（可能是初始包含块）定位，原来所占空间释
放,说白了就 top，left 起作用，定义这两个就可以
Fixed：类似于 absolute，包含块为视窗
CSS overflow 属性
对于固定的 height 和 width，如果内容超出了固定宽和高度，通过 overflow 可以对该情
况进行处理
Overflow：heidden；表示隐藏超出的部分
Overflow：scroll；表示给内容添加滚动条，通过滚动条来看溢出的内容
Overflow：auto；交给浏览器来决定如何处理
CSS clip 属性
针对绝对定位的元素，定义一个矩形（绝对定位），在矩形内的可见矩形外的由 overflow
处理
默认不应用任何裁剪 auto
垂直排列图像
vertical-align：text-top 图像顶部与文字平行
: text-bottom 图像底部与文字平行
剩余13页未读，继续阅读
评论0