CSS基础知识梳理

CSS 指层叠样式表 (Cascading Style Sheets)

CSS的书写位置：

1、行内式  style="color: red; height: 100px;",多个属性之间使用分号隔开(不推荐使用)

2、内嵌式 可以放在任意位置，但是一般是放在头标签head 中,同样使用分号隔开

3、外链式 把CSS样式单独写入一个文件中，通过link引入，通常在head中

CSS 语法

选择器 {
    属性名：属性值;
    属性名：属性值;
    属性名：属性值;
    .....
}
选择器：找到对应的标签元素；
{} :找到对应的标签元素对其更改指定的样式；属性名都是定义好的；

标签选择器

没有特殊，对应的标签都会添加样式进去

id 选择器(#)

因为ID是不能重复的，所以样式只能作用在一个标签上；

类选择器(.)

 作用在同一组类上面
 如果一个标签有多个类，给class赋值时使用空格隔开,多个类的样式都可以作用进来

伪类选择器

  link:默认
  hover：鼠标悬浮在标签上面，没有点击
  active：鼠标点击尚未松手
  visited; 已经访问过的

文字相关属性

字体颜色， 字体大小 字体样式
color：设置文字颜色
    1,直接写颜色对应的英文单词
    2，十六进制，RGB red green blue 常用
    3,rgb表示 rgb(255, 100, 100); 取值是0-255
    4，rgba color: rgba(0, 255, 0, 0.2) 第四个取值表示透明度，0-1 0就是完全透明
font-*:
    font-size:设置字体大小
    font-weight:设置文字粗体
        normal 默认的
        bold 粗体
        bolder 更粗一些
    font-family：设置字体类型 黑体 宋体
text-*
    text-align:控制文字的位置
        center居中
        left:左边
        right：右边
    text-indent：设置文字缩进
        取值有像素 px
        em 一个em就是一个文字大小
    text-decoration:
        underline设置下划线
        line-through 删除线
        none:取消任何线
line-*
    line-height 设置行高
        取值有像素 和数字 （文字大小的倍数）
        text-align设置的是文字水平居中，如果需要垂直水平居中，当行高和父级容器高度相等时才是垂直居中 （常用）
        设置行高可以让标签变大；顶线、中线、基线、底线 基线与基线的距离

标签的渲染模式

根据标签的渲染不同：

块级元素（标签） block
h1-h6, ul ol li div p     header footer section aside article nav
特点：宽高生效；默认宽度是父级的宽度；独占一行；

行内块标签 inline-block
表单元素 input select button
img
特点：宽高生效；允许其他的行内块标签或者行内元素和它同行，	并不会继承父级宽度

行内元素 inline
span a em strong b del i ins u 文本
特点：宽高无效；允许其他的行内块标签或者行内元素和它同行

渲染模式的更改

根据标签的渲染模式的更改：
display(可以展示和隐藏标签):
inline-block:转换为行内块
block:转为块级元素
inline：转为行内元素

块级元素内容居中问题：

1，行内标签
       text-align: center;
       line-height: 300px;和块级元素的高相等
2，行内块标签
       text-align: center;水平居中有效
       line-height: 300px;和 vertical-align: middle;搭配才能垂直居中，因为默认居中是基线居中
3，块级元素
       转为行内块元素，
       同上设置一样

背景图片的设置：

        background-image: url(img/kkx.jpg); url 中是图片地址
        background-repeat:平铺效果
            repeat默认设置 平铺
            repeat-x 水平平铺
            repeat-y 垂直平铺
            no-repeat 不平铺
       background-position 图片的显示位置
             background-position: 600px 300px; 第一位是X抽起始位置，第二位是Y抽的起始位置
       background-attachment 背景图片是否滚动
             fixed 固定
             scroll滚动 默认值
       background-size 背景图片大小
            cover 填充
            contain：容纳，

复合选择器

	交集选择器
        选择器1选择器2选择器3 {
            属性名：属性值；
            属性名：属性值；
        }
        特点：中间没有任何空格 全部满足选择器要求 样式才会生效
    并集选择器
        选择器1，选择器2，选择器3{
            属性名：属性值；
            属性名：属性值；
        }
        特点：样式可以作用在 c1,c2,c3上
    后代选择器
        选择器1 选择器2 选择器3 {
            属性名：属性值；
            属性名：属性值；
        }
        特点： 选择器中间有个空格；只要是后代就会生效
    子代选择器
        选择器1>选择器2{
            属性名：属性值；
            属性名：属性值；
        }
        特点：必须是儿子才会起作用，隔代就不起作用

CSS 特性

    继承性
        继承父亲的；文字相关的都可以继承；块级元素的高度是不能继承的；块级元素的宽度是可以继承的
    层叠性
        优先级相同的情况下，CSS样式会从上往下执行，下面的属性会覆盖上面的属性；
    优先级
        继承的属性<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

盒子模型

CSS 盒子模型是用于布局的
 三大属性：
     边框 border
     内边距padding 填充
     外边距 margin
     
四边设置相同的效果
       border-color: orange;
       border-width: 10px;
       border-style: solid;
           solid:实线
           dashed:虚线
           dotted：点线
       简写如下：bd+ tab键
       border: 12px solid pink;
       三个属性同时设置才会生效
四边分别设置：
       border-方位词 top/left/right/bottom
细节点：
   border可以让盒子变大，宽和高会变大

CSS 盒子边框圆角的设置

border-radius
    1个值：四角的弧度都一样
    2个值：第一个值是左上右下的弧度，第二个值是右上左下的弧度；对角线的设置
    3个值：第一个值是左上 第二个值是右上左下 第三个值右下
    4个值：顺时针进行设置弧度 从左上开始顺时针方向
取值：
    像素：px
    百分比：50%是圆 宽和高一样的前提下 设置 50%是个圆形

盒子内边距

padding（填充）
   四边设置相同的内边距
       1个值：就是上下左右的内边距
       2个值：上下 左右
       3个值：上 左右 下
       4个值：上 右 下 左
   特点：内边距会撑大盒子，让盒子变大；

   四边单独设置：
       padding-方位词 top/left/right/bottom
   细节点：
       padding内边距会撑大盒子
       内边距不会被继承
       在不设置高度的情况下，内边距可以让文字垂直居中

盒子外边距

margin
四边设置相同的外边距
    1个值：就是上下左右的外边距
    2个值：上下 左右
    3个值：上 左右 下
    4个值：上 右 下 左
分开设置
    margin-方位词（top/right/left/bottom）
细节点：
    margin 外边距不会撑大盒子
    margin: 0 auto; 表示水平方向居中  0是上下的间距

设置外边距注意点：

• 父子盒子间，让子移动父亲大小不变；给父亲设置 overflow: hidden; 子 margin: 50px;
• 上下盒子的问题，如果上盒子设置了下边距，下盒子设置了上边距；边距取得是两者中的最大值
• 通常是先使用通配符把内外边距清除

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #d1{
            width: 300px;
            height: 300px;
            background-color: #C0BCFF;
            overflow: hidden;
        }
        #d2{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            margin: 50px;
        }
    </style>
</head>
<body>

<div id="d1">
    <div id="d2"></div>
</div>

</body>
</html>

浏览器效果：

显示隐藏问题

display:
none 隐藏起来，但是不占位置 下面的元素会上位

visibility
hidden 隐藏 但是占位置 下面的元素上不去
visible 显示

伪元素

伪元素不是真正的元素，有行内元素的特性
支持模式的转换

语法：
    选择器::before/after {
        属性名：属性值；
        属性名：属性值；
    }

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1::before{
            content: "白日依山尽";
            color: #C0BCFF;
            display: block;
        }
        #d1::after{
            content: "欲穷千里目";
            color: blue;
            display: block;
        }
    </style>
</head>
<body>

<span id="d1">黄河入海流</span>

</body>
</html>

效果：

浮动

float： 设置浮动之后就脱离的之前的文档流的排列,但是浮动不会覆盖文字内容，可以做到图文并排
    left:左浮动
    right 右浮动

用途：让多个盒子并排显示
  图文并排
  盒子一左一右显示

定位

 position
 static默认值，按标签的特性排列
 relative：相对与当前位置 一般和偏移量使用；相对位置是占位置的，下面的元素不会上去
     偏移量
         top
         left
         right
         bottom
 absolute 也是和偏移量一起使用；不占位置和浮动特性是一样的
 fixed 固定在浏览器的某个位置 不动 不占位置 也可以和偏移量一起使用

list-style-type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            /*去除自带小黑点*/
            list-style-type: none;
        }
        ol{
            /*去除自带序号*/
            list-style-type: none;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
</body>
</html>