CSS盒模型的学习笔记
第四章 CSS基础
第一节 理解样式继承(20180416)
什么是继承:继承(inherit)是指子元素会自动拥有父元素的某些属性
- 继承会自动发生的,开发者不需要书写任何额外代码
- 如何不继承呢??对标签重新设置样式即可
- 并不是所有的CSS属性都可以被子元素继承
- 可继承的属性:
color
font-size
font-weight
text-align
- 不可继承的属性:
background-color
- 继承有传递性
- 有些属性在页面的某个区域中具有通用性
若没有继承,则必须为该区域的每个元素指定样式,导致代码重复臃肿
继承发生的场景
一个元素的某个CSS属性,只有满足下面两个条件才会继承父元素: 1. 该元素是可继承属性 2. 该属性在样式表中没有声明
强制继承:
- 也叫显示继承,是指将CSS属性值设置为inherit.
- 这样做,通常有两个原因:为了继承有些不可继承的属性;为了继承已经声明的属性。
- 用结构元素包含其他标签(元素);不要用文本元素嵌套其他标签(元素)
第五章 CSS盒模型
第一节 盒子的分类
- 不同元素产生的盒子类型可能不同;
- 一个元素,产生什么样的盒子,取决于它的CSS的display属性;
CSS的display属性
- display: none(不生成盒子,不会占用页面空间)
- display: inline(行盒){块盒可嵌套行盒;但行盒不能嵌套块盒}
- display: block(块盒)
- display: 其他取值
- inline-block(行内块)
第二节 盒子的组成
- margin 外边距 (与其他盒子之间的距离)
- border 边框
- padding 内边距(边框与内容之间的距离)
- content 内容的宽度和高度(开始标记和结构标签之间的内容)
第三节 块盒
content内容
含义
- 含义:用于存放文本或其他元素的区域
- 类似于一个箱子中有放东西的空间
相关属性
width
- 含义:宽度
- 不可继承
- 默认值:auto(暂认为撑满整个可用区域)
-
其他取值
像素、绝对高度、固定高度:px;
相对长度:em(相对于应用样式的元素的字体大小)百分比(%);
取父级宽度放入百分比%)
-
断词:当内容超过宽度时,会自动对内容进行截断换行(按照断词规则截断)
height
- 含义:高度
- 不可继承
- 默认值:auto
- 其他取值(px/em/%)
overflow:超出隐藏部分
min-width
max-width
min-height
max-height
注释:设置最大最小宽高度是为了保证当前页面布局效果,提高用户体验
padding 内边距(填充区)
- 含义:表示边框到内容之间的距离;类似于箱子和底部空间之间的填充物
- 相关属性:
- padding-top(含义:上内边距;不可继承;默认值:0px;其他取值:em/%)
- padding-right(含义:左内边距;不可继承;默认值:0px;其他取值:em/%)
- padding-bottom(含义:下内边距;不可继承;默认值:0px;其他取值:em/%)
- padding-left(含义:右内边距;不可继承;默认值:0px;其他取值:em/%)
- padding速写属性,简写属性(速写属性不是真实的CSS 属性,它只是CSS提供大得一快速写法)
-
书写格式:
padding:上 右 下 左
padding:上 左右 左
padding:上下 左右
padding:上下左右
-
示例:
padding:10px
padding:10px 20px
padding:10px 20px 30px
padding:10px 20px 30px 40px
dorder 边框
- 含义:分隔内部和外部的界限(由上(top)右(right)下(bottom)左(left)四部分组成)
- 类似于盒子壁
-
CSS相关属性:
border-style(速写属性同时设置所有边距的样式)
border-color(速写属性同时设置所有边距的颜色)
border-width(速写属性同时设置所有边距的粗细)
-
上边框
border-top-style(含义:上边框样式;不可继承;默认值:none;其他取值:solid实线、dashed虚线、dotted点线、double双实线、其他)
border-top-width(含义:上边框粗细;不可继承;默认值:medinm;其他取值:medinm中等、thin细线、thick粗线、px、em)
border-top-color(边框的颜色是跟着区域内的文本颜色的变化而变化的;如果没有设置颜色则为默认色黑色)
- 上边框书写格式:border-top:厚度 样式 颜色;
margin 边框处
- 含义: 表示边框和相邻盒子的(两个盒子之间的)距离,分为上(top)右(right)下(bottom)左(left)四部分组成