02 CSS样式及浮动
一、CSS样式及浮动
1、CSS简介及应用
1.CSS简介
- CSS是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是一种格式化网页内容的技术。
- 优点:
- CSS非常容易编写
- 可以一次设计,随处发布
- 结合CSS和div元素,更好的控制页面布局
- 实现表现和结构、内容相分离
- 更方便搜索引擎的搜索
2.CSS语法
- 选择器{属性:值}
- 将CSS引入HTML的方式有三种
- 外部样式表(优先级最低)
- 嵌入样式表
- 内联样式表(优先级最高)
- (导入样式表)
- 简单选择器
- 元素选择器(元素名)(优先级最低)
- 类选择器(.类名)
- ID选择器(#id名)(优先级最高)
- 伪类和伪元素选择器
- 选择器:伪类 { 属性: 值; }
- 选择器:伪元素 { 属性:值; }
- 复合选择器
- 交集选择器
- 连续书写
- 第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器
- 并集选择器
- 逗号连接
- 后代选择器
- 空格分隔
- 不仅限于元素的“直接后代”,而且会影响到它的”各级后代“。
- 交集选择器
2、浮动
1.块级元素和内联元素
- HTML元素分为块级元素和内嵌元素两种类型,二者的不同之处在于块级元素定义的文本是换行的,而内嵌元素定义的文本是不换行的。
- 浏览器按照默认的文本流的输出规则,在浏览器窗口中输入HTML元素,即:
- 如果是内嵌元素,下一个元素就显示在该元素同一行上的后续位置。
- 如果是块级元素,下一个元素就在浏览器下一行显示。
- 元素中的文本按照元素的级别,浏览器使用不同大小的默认字体表示。
2.标准文档流及浮动
- 在标准文档流中,一个块级元素在水平方向会自动伸展,直到包含它的元素边界;而在垂直方向和兄弟元素依次排列,不能并排。
- 使用浮动方式后,块级元素的表现会有所不同。
- CSS中有一个float属性,默认为none,也就是标准流通常的情况。如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不再伸展,而是收缩,根据盒子里面内容的宽度确定。
3、盒子模型
1. 盒子模型的概念
- 在CSS中,一个独立的盒子模型content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。
- 一个盒子实际所占用的宽度或高度是由 “内容+内边距+边框+外边距”组成的。
- 在CSS中可以通过设定 width和height的值来控制内容所占的矩形大小,并且对于任何一个盒子,都可以分别设定4条边各自的border、padding和margin。
2. 盒子的定位
- CSS提供了position这个属性,可以帮助设计者对标记进行定位,从而能够更好的完成网页的布局。position属性可以设置4个值:
- static:默认值
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
- z-index
- z-index属性用于调整定位时重叠块的上下位置,与它的名称一样,想象页面为x-y轴,垂直于页面的方向为z轴,z-index值大的元素位于值小的上方。
- z-index属性的值为整数,可以是正数也可以是负数。当块被设置了position属性时,该值便可设置各块之间的重叠高低关系。默认的z-index值为0,当两个块的z-index值一样时,将保持原有的高低覆盖关系。
Association between wise men is as pure as water.
posted on 2019-04-11 20:22 PenjayFeng 阅读(187) 评论(0) 编辑 收藏 举报