这 2 天都是主要学习 css 的基本使用，所以就写在一起了。

第三天

CSS （cascading style sheets） 层叠样式表

一： 引入方式

  • 行内样式

    直接写在标签里面， 用作 style 属性。

    可重用度低。

  • 内部样式

    写在 head 标签里，用作 style 标签。

    <style type="text/css"> ... </sytle>

    只能在一个页面内重用。

  • 外部样式

    写在 head 标签里，用作 link 标签。

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

    可重用度高

二： 选择器

  • 通用选择器

    * ： 是一个通配符， 代表作用到所有元素上面。

  • 标签选择器

    div{} 、 p{} 等等，直接用标签来选择，作用到对应的所有标签上。

  • id 选择器

    对每一个标签取一个 id 名，写时就用#id名 来选择。

    id 名，不能重复，只能出现一次。

  • class 选择器

    对每一个标签取一个 class 名， 写时就用 .类名 来选择。

    class 名，类名，可以重复，可以出现很多次。

    ​

    类名的命名规范：

    • 不能以数字开头。
    • 不能包括特殊字符，可以有下划线-、_。
    • 小驼峰命名。

  • 多类选择器

    一个标签里面， 可以写上很多 类名， 中间用 空格 分隔。

  • 分类选择器

    需要同时满足条件。

    比如 ： div.myClass ，表示满足 是 div 标签， 并且 类名为 myClass。

  • 群组选择器

    可以同时作用到多个类名上。 用 逗号 分隔。

    比如 ： .list1, list2, list3 , 表示作用到 类名为 list1、list2、list3 的标签上面。

  • 子代选择器

    用 > 来表示， 找对应的 直接子元素。

    比如： .warp>p ，表示找 类名为 wrap 下的 第一个层级中的 p 标签。

  • 后代选择器

    用 空格 来分割，找下面的所有满足条件的 子元素。

    比如： .wrap p ， 表示找 类名为 wrap 下的 所有的 p 标签。

三： 文本的样式

  • 设置字体大小

    font-size , 单位 px、em、rem

  • 设置字体类型

    font-family

  • 设置字体加粗

    font-weight : bold

  • 设置字体样式

    font-style : italic （斜体）

  • 设置字体颜色

    color : red 。

    属性值可以用 颜色名， 也可以用 16进制表示值。

  • 设置文本对齐方式

    text-align : center (居中对齐)

    属性值可以是： left、right、center、justify（两端对齐）

  • 设置文本行高

    line-height : 100px

  • 设置文本首行缩进

    text-indent : 100px

四：背景

  • 背景颜色

    background-color

  • 背景图片

    background-image:url( … )

  • 背景图片的平铺

    background-repeat: no-repeat 不平铺

  • 背景图片的定位

    background-position: center top;

    第一个参数表示 x 轴方向， 第二个参数表示 y 轴方向

  • 背景图片的尺寸

    background-size : cover;

    属性值：

    cover： 填充，覆盖。 让图片充满整个容器，显示不全也没关系。

    contain： 包含。 图片是完整的，容器有空白没关系。

    auto： 默认值。 图片的真实大小。

    数字： 以 px 为单位， 或 百分比。

    ​

第四天

五：列表

  • ul 列表项的类型

    属性： list-style-type ，

    属性值 和 在标签内使用的 type 是一个效果。

  • ul 列表项的位置

    list-style-position : inside

    默认的，标识符是在 li 元素之外的。

六 显示方式

  • display 属性

    元素的表现形式： 块级、行内、行内块

    none： 直接隐藏

    block：块级

    inline： 行内

    inline-block ： 行内块

盒子模型

一： 宽度和高度

width、height

以 px 为单位的数值，或者百分比。

二：可以设置宽高的元素

块级元素：比如 div、p

行内块： 比如 input

自带宽高属性的： 比如 img

多数 行内元素 不可以

三： 边框

border : 1px solid black

width，表示边框的高度

style，表示边框的样式。 solid、dotted圆点虚心、dashed短线虚线、double双实线

color，表示边框的颜色。

border：none ， 是去掉边框

border-radius，边框圆角。 值为 px 为单位的数值，或百分比。

值为 50% 时，表示一个圆。


box-shadow，边框阴影。

box-shadow: 20px 20px 10px 2px red;

h-shadow: 水平方向阴影的偏移量

v-shadow：垂直方向阴影的偏移量

blur：阴影的模糊程度

spread：阴影的模糊距离

color： 阴影的颜色


outline 轮廓

outline：5px double #0000FF

outline 是绘制在 border 外的一条线，不占据 width、height。

outline 只可以作用在 a、img、表单元素上。

四：元素实际的占据空间

宽度： margin + border + padding + width

高度： margin + border + padding + height


margin 溢出问题，解决方法：
  • 给父元素添加 border、或者 padding

盒子模型的计算公式：box-sizing

content-box: 默认值，就是上面说的那种计算宽高的情况。

border-box： 计算为： margin + width 或者 margin + height

CSS 定位（页面布局）

相对定位， relative

不会脱离文档流。

以相邻元素为基准，如没有相邻元素，就以父元素为基准。


绝对定位， absolute

会脱离文档流。

直接以浏览器窗口为基准。 或以 父元素的 relative 时 为基准。