本文共 2163 字，大约阅读时间需要 7 分钟。

前言

css这一部分的知识难度并不高，虽然理解知识点很容易，但是我们的学习不能仅仅停留在理解和知道使用方法上。如何灵活的把这些知识用在最合适的地方也是学习的一部分，因此今天我会更多的列举一些例子，方便理解的同时也希望能帮助看到本文的“你”会有想自己动手试一试的欲望。

选择器的计算权重

在我们使用种类繁多的选择器时，可能会给某一个标签设置不同的选择器，但是在浏览器渲染样式的时候只会渲染一相同样式中的一种，那么浏览器怎么去选择不同选择器的相同样式去优先显示呢？又会优先哪一选择器的样式呢？

• 在浏览器的渲染选择是通过计算机的权重来选择的
• 不同的选择器拥有不同的计算权重

为了方便形象表示计算权重我使用数字的方式来衡量权重大小分别是：

标签选择器 1

类 选 择 器 10

id 选 择 器 100

伪类选择器 10

行内样式 1000

通 配 符 0

css中的尺寸样式

基本尺寸

• width 宽度
• height 高度
• min-width 最小宽度
• max-width 最大宽度
• min-height 最小高度
• max-height 最大高度

溢出

语法：

overflow：属性 属性： hidden 溢出部分隐藏 scroll 元素会出现滚动条 （在内容溢出时出现） auto 自动适应 （没有溢出时也会出现滚动条）

列表的项目符号

语法：

list-style：属性 属性 none 没有、无 image 图片 ！无法改变图片的大小！

元素的分类

• 块级元素 如：“div、h1、p、li”
• 行级元素 如：“span、b”

行级元素：

• 不独占一行，可以并排分布
• 设置宽高无效，宽高随着内容改变

块级元素：

• 独占一行
• 设置宽高有效

强制改变元素的分类

语法：

display：属性 属性 inline 改为行级元素 block 改为块级元素 inline-block 改为行内块元素

盒子模型 div

盒子模型为四个部分组成

内容（width+height 宽度+高度） 外边距（margin） 内边距 （padding） 边框（border） 概念图为： 此图为宽100px，高40px，无内边距、边框和外边距的盒子模型。

元素框模型重新制定 box-sizing

作用：重新制定元素框模型的计算方式

元素边框内占地区域： 水平方向：元素左右边距+宽 竖直方向：元素上下边框距+高 例如：

box-sizing: border-box;

/* 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度 */

inherit

规定应从父元素继承 box-sizing 属性的值。

div {        div {            width: 100px;            height: 100px;            box-sizing: border-box;            margin: 10px;            padding: 10px;           /* 外边距为10px 内边距为10px */  /* 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度 */        }

重制定后的盒子模型：

文档流概念

• 普通流

  行级元素不独占一行
  块级元素独占一行

• 浮动流

  文字环绕
  块级元素横向排列
  关键字： float 浮动
  取值： left 左 right 右
  float：left 左浮动
  float：right 右浮动

浮动概述

元素被设置为浮动之后将具备以下特点：

1.浮动会被排除在文档流之外（脱离文档流）， 元素是不占有浮动前的页面空间的，其他元素会上前补位。 2.浮动元素会停靠在父元素的左边或右边，或停留在其他已经浮动的元素的边上 3.浮动元素只会在当前行内浮动 4.浮动元素拥有浮动功能之后依然在父级元素中，只是浮起来了而已 5.浮动处理-----让多个块元素合成一排

清除浮动

清除浮动并不是要把某一元素的浮动效果取消，而是取消上面元素给自己带来的影响

语法为: clear: 属性 left 清除左浮动 right 清除右浮动 both 清除两边的浮动

浮动带来的特殊效果

1.父元素的宽度显示不是所有已浮动元素最后一个元素将被强制换行（卡主）

2.元素一旦浮动起来之后宽度就会变成自适应（非人为制定的情况下） 3.元素一旦浮动起来那么将会变成块级元素，尤其对行级元素影响最大 4.文本和行内元素会进行文字环绕的方式进行排列

浮动元素对父级元素带来的影响

由于浮动元素脱离文档流的所以会导致元素不占有父级元素的空间，那么他会给父级元素带来影响

解决方案 1.直接给父级设置高度 弊端：必须要知道父级元素的准确高度 2.父级浮动 弊端：对后续元素有影响，父级的margin 0 auto 失效 3.为父级父元素添加 overflow:hidden或者auto 弊端： 元素一旦溢出就出被跟着影藏 4.在父级元素里面追加一个空元素 并设置为 clear：both

end

css的基础部分就到这了，概念性的知识点很多，实际效果还是需要好好自己动手实践。多学加多练才能更好的掌握。

转载地址：http://eghzi.baihongyu.com/