自学前端学习笔记-02CSS基础样式语法

◆ CSS三大特性

1. 继承性

2. 层叠性

3. 优先级

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

继承 <*{css}

image.png

不需要理解,后期使用less或者sass就可以了!

◆ PxCook的基本使用

官方网站https://www.fancynode.com.cn/pxcook

使用简单 支持psd文件

image.png

◆ 盒子模型

1.盒子模型介绍

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（
margin）构成，这就是 盒子模型
项目中是使用自动内减只需要加上
box-sizing:boder-box;即可

2.外边距(margin)取值

取值	示例	含义
一个值	margin:10px	上下左右都设为10px
两个值	margin:10px 20px	上下10px 左右20px
三个值	margin: 10px 20px 30px;	上10px 右20px 下30
四个值	margin: 10px 20px 30px 40px;	上10px 右20px 下30px 左40px
方向	margin-top margin-bottom margin-left margin-right

 div {
   /* 上下左右都是10px */
    margin: 10px;
    /* 上下10px 左右20px */
    margin: 10px 20px;
    /* 上10px 右20px 下30 */
    margin: 10px 20px 30px;
    /* 上10px 右20px 下30px 左40px */
    margin: 10px 20px 30px 40px;
  }

3.内边距(padding)取值

取值	示例	含义
一个值	padding:10px	上下左右都设为10px
两个值	padding:10px 20px	上下10px 左右20px
三个值	padding: 10px 20px 30px;	上10px 右20px 下30
四个值	padding: 10px 20px 30px 40px;	上10px 右20px 下30px 左40px
方向	padding-top padding-bottom padding-left padding-right

 div {
   /* 上下左右都是10px */
    padding: 10px;
    /* 上下10px 左右20px */
    padding: 10px 20px;
    /* 上10px 右20px 下30 */
    padding: 10px 20px 30px;
    /* 上10px 右20px 下30px 左40px */
    padding: 10px 20px 30px 40px;
  }

4.清除默认样式

image.png

#◆ CSS布局

1.结构伪类选择器

image.png

image.png