css样式知识点

css
基本语法机构：

选择器 {
属性：值；
}

选择器作用：选中标签对齐进行样式美化
属性作用：对元素进行哪样样式美化
值作用：决定属性美化样式的程度
注意：css中的属性与html元素行内属性不是一个东西

css 选择器
元素选择器
html标签；选中所有对应的html标签
.class 选中具有 class 行内标签的属性
#id 选中具有 id 行内标签的属性
*选中所有选择器
id 与 class 区别：
id：具有唯一性 建议：不要给不同的元素命名同一个id值
class 类选择器：可以给对各元素同一个class值
关系选择器
父子

空格 子孙
~普通兄弟
+相邻兄弟
属性选择器
语法 元素[属性+值]
例如：input[name=login] 选中Input元素name=login的标签
伪类元素
鼠标事件 ：hover 当鼠标移动到元素时候显示什么样式
：active 在鼠标点击和释放之间的样式
：link 链接访问前的样式
: visited 链接访问后的样式 注意：link visited 只能针对链接a标签
不建议使用 visited link 有缓存
css属性
文字类：
大小 font-size
颜色 color
粗细 font-weight
形式 font-family

文本修饰：
对齐方式 text-align center 居中 left 左对齐 right 右对齐
行高 line-height 用于文本垂直方向对齐方式 值小于等于父元素高度

text-decoration-xx:复合属性 要想出现效果 前提必须要有修饰。

text-shadow 设置文字阴影
四个值：
值一 影子文字在水平方向移动的位置；大于0往右移动，小于0往左移动
值二 影子文字在竖直方向移动位置 大于0往下移动，小于0往上移动
值三 影子文字清晰度 大于0 值越大越模糊
值四 设置影子文字颜色

注意：在css样式中 一般文字或者文本类属性是可以被继承的。

盒子模型
组成元素：magin 边框与其他盒子的距离 magin 变大 盒子不会变化，盒子与盒子之间的距离会变大
padding 是边框距离与内容区域的距离 标准盒子 padding 变大 盒子变大
border 盒子的边框
content 标准盒子 为 width 和 height
IE盒子：
content = width - padding-left - padding-right - border-left - border-right
在IE盒子中 border 与 padding 变化不会改变盒子大小；会改变 内容大小

外边距塌陷
外边距塌陷问题：
上下两个盒子；小的外边框边距被大的外边距吸收了
针对两个上下相邻盒子，盒子距离为大的外边距
左右相邻盒子之间的距为 外边距之和
总结：外边距塌陷只会发生在上下盒子之间，不发生在左右盒子之间
换句话说：上下盒子距离为大的外边距；
左右盒子距离为两个盒子外边距之和

注：块元素有默认8px外边距
为了防止浏览器外边距默认值影响页面效果；在初始化时候清空所有元素默认外边距

*{
margin: 0;
padding: 0;
}
1
2
3
4
补充内容
body 标签
默认高度为0 默认宽度百分之百 也等于视图窗口宽度
默认外边距为8px

非常严重的问题， padding 会撑开 带有 widht 和height盒子

​ 1. 我们要求这个 div 就是标准的 200 * 200

​ 2. 但是我们给了padding就撑开盒子了 240

​ 3. 问我们怎样能保证盒子 不超过 200 * 200

在布局板块时候；如果是两个独立的盒子；非父子和子孙的盒子；想要保持距离；建议使用margin
margin 作用；决定目标盒子与其他盒子之间的距离
padding 决定是；里面内容与盒子之间距离，但是会撑大盒子