day4 css的核心属性

 

目录

一：浮动属性

二：标准盒模型概念

三：margin属性

四：padding属性

五：边框属性

六：怪异盒模型概念

七：文本属性

八：列表属性

九：背景属性

十：CSS属性的继承

十一：背景定位技术（图片整合）

---

回忆一下：
	哪些标签会换行？ h1-h6 p ul ol li dl dt dd form div...
	哪些标签不会换行？ a span img input b strong em i....
重点：	除了img和input之外，其他不会换行的标签都不认识宽度和高度
浮动	浮动(漂浮起来移动) float    左 left 右 right
	浮动的目的：将竖的标签横排（主要目的）
	图文混排的效果（次要目的）
	注意：子元素的高度、宽度相加不能大于父元素的高度、宽度

 

一：浮动属性

在网页布局中经常会看到很多标签默认是从上到下显示的，需要改变默认的排列方式可以使用浮动属性

1. 属性：float
2. 属性值：left/right/none

• float：left 元素从左到右排列
• float：right 元素从右到左排列
• float：none 元素不浮动

1. 浮动的特点

• 就是让竖着的东西横着来
• 定义网页中其它文本如何环绕该元素显示

---

二：标准盒模型概念

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是标准盒模型

---

三：margin属性

在网页布局中经常有很多盒子需要设置之间的间距可以使用margin设置外边距

1. 属性：margin
2. 作用：主要是用来设置同级元素之间的位置关系
3. 外边距使用的特点

• 属性值要设置为数值加单位
• 属性值的设置方法

• • 一个值：上下左右
  • 两个值：上下 左右
  • 三个值：上 左右 下
  • 四个值：上右下左

• 属性值还可以设置某一个方向

• • margin-top 顶部间距
  • margin-right 右侧间距
  • margin-bottom 底部间距
  • margin-left 左侧间距

1. 常见的固定搭配

• *{ margin：0；padding：0 } 清除浏览器的默认间距
• 版心的选择器{ margin：0 auto } 设置版心居中

1. 外边距margin的常见bug

• 两个盒子上下排列,分别设置margin-top/bottom的时候，会错误的取之间的最大值
• 如果父级元素下面只有一个子级元素的时候，给自己元素设置margin-top会错误的解析到父级元素

---

四：padding属性

在网页布局中经常需要设置盒子和盒子里面的内容的间距可以使用padding设置内边距

1. 属性：padding
2. 作用：主要是用来设置父级和子级元素之间的位置关系
3. 内边距使用的特点

• 属性值要设置为数值加单位
• padding添加的位置

• • 可以添加在父级元素上(控制所有的子级元素都会移动位置)

• • • padding会撑大当前父级元素的宽高大小，为了不影响后面的布局需要在初始宽高上减去相应的padding值

• • 可以添加在子级元素上(控制单个子级元素的位置)

• • • padding会撑大当前子级元素的宽高大小

• 属性值的设置方法

• • 一个值：上下左右
  • 两个值：上下 左右
  • 三个值：上 左右 下
  • 四个值：上右下左

• 属性值还可以设置某一个方向

• • padding-top 顶部间距
  • padding-right 右侧间距
  • padding-bottom 底部间距
  • padding-left 左侧间距

思考：内外边距在实际应用场景中可不可以互换使用？

---

五：边框属性

1. 边框属性

• border-width 边框的宽度（数值+单位）
• border-style 边框的样式（solid 实线 、dashed 虚线、dotted 点线、 double 双实线）
• border-color 边框的颜色（颜色的css写法相同）

1. 简写方式

• 属性：border
• 属性值：border-width border-style borde-color

思考：哪些标签自带边框？

---

六：怪异盒模型概念

1. 盒模型的作用：设置元素与元素之间的位置关系
2. 盒模型的组成：content、padding、margin、border
3. 盒模型的分类

• 标准的盒模型
• 怪异盒模型( IE盒模型：当文档丢失了文档声明的时候会触发这样计算方式 )

1. 盒模型的属性

• 属性：box-sizing
• 属性值

• • 标准盒模型 content-box
  • 怪异盒模型 border-box

注意：标准盒模型和怪异盒模型的区别

1. 怪异盒模型任何内边距和边框都将在已设定的宽度和高度内进行绘制
2. 在这种解析模式下添加padding或者border不会再把盒子撑大

七：文本属性

1. font-size 文本大小

   网页中常用的单位是px
   
   浏览器中默认大小是16px，浏览器中默认设置最小的字体大小是12px
   
   除了px还有常见的pt、em等（12pt=16px 1em=16px）

2. font-family 文本类型

   当属性值是中文汉字时候需要加引号（引号也可省略）
   
   当属性值是英文单词时候必须加引号
   
   多个字体中间用逗号隔开，表示从用户的电脑字体库中进行选择字体，默认先解析第1个字体，如果没有就解析第2个字体，以此类推

3. font-weight 文本加粗

   100~900 整百数（100~500表示正常字体、600~900表示加粗字体）
   
   bold 加粗的
   
   bolder 更粗的
   
   normal 常规、清除加粗标签的默认样式

4. font-style 文本倾斜

   italic 斜体的
   
   oblique 更倾斜的
   
   normal 常规、清除倾斜标签的默认样式
   
   思考：之前学习了加粗倾斜标签，为什么还需要学习相关的css属性？

5. line-height 文本行高（单行）

   当行高等于容器的高度时候，文本在垂直方向居中显示
   
   当行高大于容器的高度时候，文本在垂直方向往下移动
   
   当行高小于容器的高度时候，文本在垂直方向往上显示

6. text-align 文本居中

   left 文本向左对齐（默认值）
   
   right 文本向右对齐
   
   center 文本水平方向居中显示
   
   justify 两端对齐（多行文本才有效果）

7. color 字体颜色

   英文单词 green、red、blue
   
   十六进制 #000000、#999
   
   rgb/rgba（red、green、blue）

8. text-decoration 文本修饰

   underline 下划线
   
   overline 上划线
   
   line-through 删除线
   
   none 没有、清除下划线
   
   思考：哪些标签自带下划线？

9. text-indent 首行缩进

   只针对于第一行文本起作用
   
   可以设置px、em单位
   
   可以设置负值
   
   注意：只能在块级元素中使用（能设置宽高大小）

10. letter-spacing 文字间距

八：列表属性

list-style：none 可以清除有序和无序的默认样式

九：背景属性

1.background-color 背景颜色
●颜色的设置方式和文本颜色一样
●可以简写为background
注意：不要写成bg-color，会被打si的

2.background-image 背景图片
●属性值 ：url（图片地址）
●如果背景图片小于容器大小，图片默认会进行平铺
●如果背景图片等于容器大小，图片默认会占满容器
●如果背景图片大于容器大小，图片默认会显示部分
思考：背景图片和img图片使用的区别？

3.background-repeat 背景图片平铺
●repeat 平铺（默认值）
●no-repeat 不平铺
●repeat-x 沿着X轴平铺
●repeat-y 沿着Y轴平铺

4.background-position 背景图片定位
●属性值：水平方向 垂直方向
●可以设置固定的坐标值
●可以使用方向值（top、right、bottom、left、center）
●当水平方向和垂直方向值相同的时候简写成一个

5.background-attachment 背景图片固定
●scroll 滚动（默认值）
●fixed 固定（固定在浏览器窗口）

6.background 背景属性的简写方式
注意：开发时需要区别背景颜色简写和背景属性简写
例如：以下盒子会怎么显示？
div{
width：300px；
height：300px；
background：red；
background：url（假装有图片） no-repeat center；
}

十：CSS属性的继承

CSS的继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性
具有继承性的相关属性：font-family、font-size、font-style、 font-weight、font、text-align、list-style等

十一：背景定位技术（图片整合）

又称精灵图

原理：	把网站里面的小图标有规则的整合在一起，利用background-position 改变背景图的位置
优点	CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点
	CSS Sprites能减少图片的字节
	CSS Sprites解决了图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率
	CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格
缺点
图片合并麻烦：	图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景
图片适应性差：	在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂
图片定位繁琐：	开发时需要通过工具测量计算每个背景单元的精确位置
可维护性差：	页面背景需要少许改动，可能要修改部分或整张已合并的图片