作用:CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能 。 使用语法: 1.选择器: 选中一个一些元素 基础选择器: 元素选择器: 根据元素的标签名选中一个或一组元素 属性选择器: 伪类选择器: 伪元素选择器... 2.css使用语法 选择器{ 样式1; 样式2; //样式: 样式名:样式值; } 3.使用方式 1.行内样式表: 在行的内部使用,定义一个style属性,属性中定义样式,只作用于当前这个元素 2.内部样式表 在html文档head中定义style标签对,标签对中定义样式 3.外部样式表 --推荐 在外部单独定义一个css文件,文件中蒂尼样式,哪一个html需要使用,就引入link 优先级: 谁离元素更近,优先显示谁
盒子模型 内容+内边距+ 变框外边距 能看到的元素的大小:内容+内边距+ 变框 内容: 宽高都是内容的大小 内边距: 背景的样式会默认延伸到内边距上 设置值(内边距+外边距的方式) 一个值: 四边都是 两个值: 上下 左右 三个值: 上 右 下 左边与右边一致 四个值: 上 右 下 左 padding-leftpadding-rightpadding-toppadding-bottom 变框: 变框三要素: 宽度 样式 颜色; 元素四边相同的样式: border: 10px solid firebrick; 元素四边不同的样式: border-left:10px solid firebrick; 外边距: 元素距离周围其他元素的之间的距离 设置值的方式与内边距一样 块元素上下的外边距会合并 盒子模型的使用:根据具体的需求分析:变框 宽高 变框和内容之间(内边距) 变框和其他元素之间的距离(外边距) 元素和元素之间的距离没有变框背景的情况(内外边距都可以)
position 配合方向值一起使用才有用 relative 相对定位 相对元素本身在文档流中的原位置而言 absolute 绝对定位 完全脱离文档流 子父集定位 父元素有设置相对定位,子元素相对与父级定位 相对窗体定位 父元没有设置相对定位,相对于窗体定位 fixed 固定定位 完全脱离文档流
