一、css三大特性
1、继承性(嵌套)
后代元素会默认继承部分父级的样式 能够继承的样式 color font系列 text-indent 文本缩进 line-height 行高 line-style:none; 清楚li默认样式 继承的应用 某些情况下简化代码 给body设置文字颜色和文字大小 继承失效的情况 a 不能继承颜色 h 系列不能继承 文字大小 font-size
2、层叠性
div {
color: red;
}
div {
color: green;
}
此时div标签的颜色是绿色。
同样的选择器 选择相同的标签 设置相同的属性,此时样式覆盖,后写的样式生效 设置不同的样式,此时样式叠加,同时作用在标签上
3.优先级
特性:不同的选择器具有不同的优先级,优先级高的会覆盖优先级低的样式 优先级公式:继承<通配符先择期<标签选择器<类选择器<id选择器<行内样式<!important 注意点:继承的优先级最低,加上!important也没用 。 在开发中不建议!important
3.2权重的计算(了解)
比较规则:一级一级的比较,权重可以叠加但不能进位。
二、盒子模型
1、盒子模型的介绍
盒子模型分为:内容区域(content)、边框区域(border)、内边距区域(padding)、外边距区域(margin)
2、内容区域的宽度和高度(数字+px)
如果设置了width和height那么如果盒子内容超出宽高,也不会撑大盒子
3、边框(border)
border-width 边框粗细 border-style 边框样式 border-color 边框颜色
连写设置 简写: bd + 回车 border: 1px solid #000; border: 宽度 样式 颜色; 注意:边框样式是必须写的 单独设置 简写:bdt bdr bdl bdb border-top: 1px solid #000; 边框样式:solid 实线 dashed 虚线 dotted 点线 注意:边框相连接的部分是斜边 应用: 三角形 单个属性 border-width 边框宽度 border-style 边框样式 border-color 边框颜色 边框会撑大盒子 手动内减
4、内边距(padding)
盒子内容距离盒子边界的距离 复合写法 padding: 20px; 上右下左 全是 20px padding: 20px 30px; 上下20px 左右30px padding: 20px 30px 40px; 上20px 左右30px 下40px padding: 20px 30px 40px 50px; 上右下左顺时针赋值 单方向设置 padding-left pl padding-right pr padding-top pt padding-bottom pb padding会撑大盒子 手动内减 CSS3盒子 模型:内减盒子模型 box-sizing: border-box; 不会撑大盒子的情况 块级元素嵌套,子元素没有设置宽度的时候,此时给子元素增加左右的padding和border不会撑大盒子
5、外边距(margin)
三、思维导图