您的位置：首页 > Web前端 > CSS

CSS层叠样式表

2020-04-02 19:13 811 查看

W3C-CSS

1、CSS的组成

css 样式由选择符和声明组成，而声明又由属性和值组成。

选择符{属性:值}:p{color:red;}

1.1、选择符（选择器）

选择符：又称选择器，指明网页中要应用样式规则的元素。

1.2、声明（样式）

声明：在英文大括号“｛｝”中的的就是声明。属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p {
font-size:12px;
color:black
}

2、CSS的形式

从CSS 样式代码插入的形式来看基本可以分为内联式、嵌入式和外部式三种。

2.1、行内式CSS样式

把CSS代码直接写在现有的HTML标签中，CSS样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">
这里文字是红色。
</p>

2.2、内嵌式CSS样式

就是可以把CSS样式代码写在head标签里的<style type="text/css"></style>标签之间。如下面代码实现把<span>标签中的文字设置为红色：

<style type="text/css">
span{ color:red; }
</style>

2.3、外链式CSS样式

写在单独的一个css文件中,外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<link href="base.css" rel="stylesheet" type="text/css" />

3、CSS选择器

页面上的标签越多，效率越低。

4、继承性

5、层叠性

6、CSS的排版样式

6.1、文字排版

6.2、段落排版

7、CSS盒模型

7.1、重要性元素分类

7.2、块级元素和行内元素的相互转换（display）

7.3、盒模型--边框

7.4、盒模型--外边距

7.5、盒模型--内边距

8、CSS布局模型

清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。

8.1、流动模型

8.2、浮动模型

8.2.1、浮动的副作用
  1. 背景不能显示

由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

  1. 边框不能撑开

如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

  1. margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

8.2.2、清除浮动

方法1：给父级添加高度

有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）

方法2：用clear：both（外墙法）

总共用的有三种放置clear：both的方法，清除左右浮动：外墙法，又称隔墙法，不能使父亲撑开高度。隔开两部分的浮动clear:both是指不允许元素浮动在该元素的两侧。

方法3：同样用clear：both（内墙法）

方法4：使用overflow：hidden溢出隐藏，可以把溢出边框的内容隐藏掉

如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令。

方法5：After伪类清除浮动（压轴方法：网易；要背）

8.3、层模型（定位）

8.4、居中显示

8.4.1、水平居中
  1. 行内或类行内元素（比如文本和链接），在块级父容器中让行内元素居中，只需使用 text-align: center;即可。
  2. 块级元素，让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto（前提是已经为元素设置了适当的 width 宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）。
  3. 多个块级元素，如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display 值。
8.4.2、垂直居中

  1. 行内或类行内元素（比如文本和链接）单行对于单行行内或者文本元素，只需为它们添加等值的 padding-top 和 padding-bottom 就可以实现垂直居中。

  2. 多行文本，同样可以使用等值 padding-top 和 padding-bottom 的方式实现垂直居中。如果你在使用过程中发现这种方法没见效，那么你可以通过 CSS 为文本设置一个类似 table-cell 的父级容器，然后使用 vertical-align 属性实现垂直居中。

  3. 块级元素，已知元素的高度，无法获知元素的具体高度是非常常见的一种状况，比如：视区宽度变化，会触发布局重绘，从而改变高度；对文本施加不同的样式会改变高度；文本的内容量不同会改变高度；当宽度变化时，对于宽高比例固定的元素（比如图片），也会自动调整高度……如果我们知道元素的高度，可以这样来实现垂直居中

  4. 未知元素的高度，如果我们不知道元素的高度，那么就需要先将元素定位到容器的中心位置，然后使用 transform 的 translate 属性，将元素的中心和父容器的中心重合，从而实现垂直居中。

8.4.2、水平垂直居中

9、Z-index 层级

9、Z-index 层级

兼容问题

居中的目的，不出现水平滚动条（1024*768）

  • 点赞
  • 收藏
  • 分享
  • 文章举报
guod369 发布了52 篇原创文章 · 获赞 0 · 访问量 331 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航