P&G小站

# 第八模块：前端开发-CSS

# 01 相对单位

长宽大小的计量单位

  • px 像素点
  • % 如width、height、font-size相对于父元素"相同属性"的值来计算

# 02 css特性

  • 继承性: 文本相关属性，如字体font-family、大小font-size、颜色color等，充分利用继承性，减少重复代码的编写
  • 层叠性: 指的是样式的覆盖

# 03 css优先级

当"同一个元素"的"同一个样式属性"被运用上多个属性值时，就需要遵循一定的优先级规则来选择属性值。先判断指定样式、再考虑继承

# 权重
行内样式(1000) > id选择器(100) > class选择器(10) > 元素选择器(1)

# 04 选择器

  • 基本选择器：元素选择器、id选择器、class选择器
  • 层次选择器：M N { M 元素内部后代N元素(所有 N 元素)}

# 05 css规范

# 命名规范

CSS文件命名

  • reset.css、global.css、module.css、master.css等
  • 部署时会将CSS文件压缩合并成一个文件

id和class命名

  • 常用中划线命名法 top-main、sub-left-menu
  • 命名时取父元素的class名作为前缀，可防止重复，如nav-title

# 书写规范

属性的书写也是很有讲究的

  1. 影响文档流属性(布局属性) display、position、float、clear等
  2. 自身盒模型属性 width、height、padding、margin、border、overflow等
  3. 文本性属性 font、line-height、text-align、text-indent、vertical-align等
  4. 装饰性属性 color、background-color、opacity、cursor等
  5. 其他属性 content、list-style、quotes等
#main{
    /* 影响文档流属性 */
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    /* 盒子模型属性 */
    width: 100px;
    height: 100px;
    border: 1px solid gray;
    /* 文本性属性 */
    font-size: 15px;
    font-weight: bold;
    text-indent: 2em;
    /* 装饰性属性 */
    color: white;
    background-color: red;
    /* 其他属性 */
    cursor: pointer;
}
  • 垂直居中 height: 50px; line-height: 50px 此类功能性代码就不要分开写了

# 注释规范

  • 顶部注释 文件说明、版本和作者等
  • 模块注释 有开始和结束
  • 简单注释

# css reset

  • 默认样式 一个页面在"CSS裸奔"下也有很好的可读性
    • p 有上下边距
    • ul 有缩进样式
  • 重置样式 去除元素在浏览器中的默认样式
  • https://meyerweb.com/eric/tools/css/reset/

# 06 盒子模型

所有的元素都可以看成一个盒子!

  • 理解单独一个盒子的内部结构
  • 理解多个盒子之间的相互关系

# 四个属性

  • border (边框) 元素边框
  • margin (外边框) 用于定义页面中元素与元素之间的距离
  • padding (内边距) 用于定义内容与边框之间的距离
  • content (内容) 可以是文字或图片

# 内容区

内容区是CSS盒子模型的中心，呈现了盒子的主要信息内容，可以是文本或图片等，必选项，其他三项可选

内容区有三个属性：width、height和overflow。使用width和height可以指定盒子内容区的高度和宽度，仅针对内容区，并不包括padding部分。当内容信息太多超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法

# 内边距

可以看作内容区的背景区域

# 边框

border: 1px solid gray;

  • border: 0 需要占用内存
  • border: none 不需要占用内存 两种差别不大

# 外边距

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。

# 07 display属性

块元素具有如下特点：

  • 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素
  • 块元素内部可以容纳其他块元素或行内元素
  • 可以定义高度(height)，也可以定义宽度(width)
  • 可以定义四个方向的margin属性

行内元素具有如下特点：

  • 可以与其他行内元素位于同一行
  • 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果
  • 无法定义高度(height)，也无法定义宽度(width)
  • 可以定义margin-left和margin-right，无法定义margin-top和margin-bottom

行内块元素具有如下特点：

  • 可以定义width和height
  • 可以与其他行内元素位于同一行

display属性值可为：

  • block
  • inline
  • inline-block
  • none
  • table、table-row、table-cell

隐藏元素

  • display: none 不占原来位置
  • visibility: hidden 依然占据原理位置

# 08 文本效果

# text-indent

# 用h1的权重、用background-image的图
h1{
    background-image: url('logo.png');
    text-indent: -9999px;
}

# text-align

text-align对文字、inline元素(行内元素)以及inline-block(行内块元素)起作用，但对块元素不起作用。其中img元素属于inline-block元素

  • text-align: center 实现的是文字、inline元素以及inline-block元素的水平居中
  • margin: 0 auto 实现的是块元素的水平居中
  • text-align: center 在父元素中定义，margin: 0 auto在当前元素定义

# line-height

定义 height == line-height 实现单行文字的垂直居中

# 综合例子 text-align、margin、height、line-height
<style>
    div{
        width: 600px;
        height: 300px;
        line-height: 300px;
        border: 1px solid gray;
        text-align: center;
        margin: 0 auto;
    }
</style>

<body>
    <div>
        <img src="logo.png" alt="">
    </div>
    <div>海贼王娜美</div>
</body>

# 09 浮动布局

文档流，指元素在页面中出现的先后顺序

# 浮动的特点

浮动，具有两个最重要的特点

  • 当一个元素定义了float:left或float:right时，不管这个元素之前是inline、inline-block或者其他类型，都会变成block类型。也就是说，浮动元素表现为块元素效果，可以定义width、height、padding和margin。可以使用margin-left或margin-right来定义浮动元素与其他元素之间的间距
  • 当一个元素定了float:left或float:right时，这个元素会脱离文档流，后面的元素会紧跟着填上空缺的位置

# 浮动的影响

  • 对自身的影响，如果一个元素设置了浮动，则不管这个元素是什么类型，都会转换为块元素，也就是display属性为block
  • 对父元素的影响，父元素高度塌陷，原因在于父元素的高度小于子元素的高度，或者父元素没有定义高度，父元素不能把子元素包裹起来。说白了，就是老爸管不住儿子，因此儿子离家出走了。
  • 对元素的影响
    • 兄弟元素是浮动元素
      • 同一方向的兄弟元素也是浮动元素，从左到右，从上到下，一个接着一个紧挨着排列
      • 相反方向的兄弟元素，会移向两边(如果父元素宽度足够的话)
    • 兄弟元素不是浮动元素
      • 贴边现象
  • 对子元素的影响，如果一个元素是浮动元素(没有定义height)，并且它的子元素也是浮动元素，则这个浮动元素会自适应地包含该子元素

# 清除浮动

清除浮动就是清除元素被定义浮动之后带来的脱离文档流程的影响

三中方法

  • 在父元素最后添加一个子元素div设置clear:both，缺点需要额外增加多余标签div
  • 父元素设置overflow: hidden 缺点有隐患会隐藏超出父元素的内容部分
  • 推荐 父元素设置 ::after伪元素
    .clearfix::after{
        clear: both;
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
    }

# 10 定位布局

可以让用户精确地定位页面中元素的位置

# 子元素相对父元素定位

父元素 {position: relative;}
子元素 {
    position: absolute;
    /* 定义top、bottom、left和right */
}
  • position: absolute将元素转换为块元素
  • 绝对定位元素是相对于第一个设置了position: relative,position: absolute, position: fixed的祖先元素来进行定位的

# z-index属性

z-index属性只有在元素定义了position: relative,position: absolute, position: fixed时才会被激活

# 11 css图形

图片实现有两明显的缺点：

  • 图片大小比较大，数据传输量大
  • 一张图片会引发一次HTTP请求

# 三角形

原理：将一个元素的width和height定义为0(内容区为0，区别于padding和border)，然后为它设置较粗的边框，并将其中任意三条边框或两条边框的颜色定义为transparent

#box{
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    border-color: red transparent transparent red;
}

<div class="box"></div>

带边框的三角形

原理：用两个三角形来实现，一个作为背景色(内层三角形)，一个作为边框色(外层三角形)，然后通过定位布局重叠在一起

# 圆相关

    .sample1{
        width: 100px;
        height: 50px;
        border: 1px solid gray;
        border-radius: 10px;   /* 圆角 */
    }

    .sample2{
        width: 100px;
        height: 50px;
        border: 1px solid red;
        border-radius: 100px 100px 0 0;   /* 半圆 */
        background-color: #FCE988;
    }
    .sample3{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        border-radius: 50px;     /* 圆 */
        background-color: #FCE988;
    }
    .sample4{
        width: 160px;
        height: 100px;
        border: 1px solid red;
        border-radius: 80px / 50px;    /* 椭圆 */
    }
上次更新: 1/5/2023, 5:29:59 PM

第八模块：前端开发-LESS →