Web前端开发之CSS_2

  • 关系选择器
  • CSS盒子模型
  • 弹性盒子模型
  • 文档流
  • 浮动
  • 清除浮动
  • 定位

1. 关系选择器

1.1 后代选择器 E F{}

        选择所有被 E 元素包含的 F 元素，中间用空格隔开

<ul>

    <li>后代列表1</li>

    <div>

        <ol>

            <li>后代列表2</li>

        </ol>

    </div>

</ul>

<ol>

     <li>非后代列表3</li>

</ol>

// 后代选择器 E F{}

ul li{

        color:red;

}

1.2 子代选择器 E>F{}

        选择所有作为 E 元素的直接子元素 F，对更深一层的元素不起作用，用 > 表示

<div>

     <p>子元素</p>

     <ul>

         <li>孙元素</li>

     </ul>

</div>

// 子代选择器 E>F{}

div>p{

        color:red;

}

1.3 相邻兄弟选择器 E+F{}

        选择紧跟 E 元素后的 F 元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

<p>我是内容1</p>

<h3>我是标题</h3>

<p>我是内容2</p>

// 相邻兄弟选择器 E+F{}

h3+p{

        color:red;

}

1.4 通用兄弟选择器 E~F{}

        选择 E 元素之后的所有兄弟元素 F，作用于多个元素，用~隔开，只能向下选择

<p>我是内容1</p>

<h3>我是标题</h3>

<p>我是内容2</p>

<div>hahaha</div>

<p>我是内容3</p>

// 通用兄弟选择器 E~F{}

h3~p{

        color:red;

}

2. CSS盒子模型（Box Model）

        所有HTML元素都可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin），边框（border）、内边距（padding）和实际内容（content）

  • Margin(外边距)：清除边框外的区域，外边距是透明的（第一个值上下，第二个值左右）
  • Border(边框)：围绕在内边距和内容外的边框
  • Padding(内边距)：清除内容周围的区域（两个值时：第一个值上下，第二个值左右）
  • Content(内容)：盒子的内容，显示文本和图像

<body>

    <div>内容</div>

    <p>p标签</p>

</body>

div{

            width: 100px;

            height:100px;

            background-color: red;

            padding-left: 50px;

            padding-right: 50px;

            padding-top: 50px;

            padding-bottom: 50px;

            border: 2px solid green;

            margin: 50px;

        }

3. 弹性盒子模型（flex box）

        弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒子是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒子布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

        弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置display 属性的值为 flex 将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

        弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性盒子里内容默认横向摆放。

<div class="container">

     <div class="box1"></div>

     <div class="box2"></div>

</div>

.container{

     width: 500px;

     height:500px;

     background-color: #555;

     display: flex;

}

.box1{

     width: 100px;

     height:100px;

     background-color: red;

}

.box2{

     width: 100px;

     height:100px;

     background-color: green;

}

3.1 父元素上的属性
  • display 属性：display:flex;    // 开启弹性盒子，子元素默认水平排列
  • flex-direction 属性：指定了弹性子元素在父容器中的位置

flex-direction: row | row-reverse | column | column-reverse

// row：横向从左到右排列（左对齐），默认的排列方式

// row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）

// column：纵向排列

// column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

  • justify-content属性：内容对齐，把弹性项沿着弹性容器的主轴线main axis对齐，垂直方向

justify-content：flex-start | flex-end | center          // 居上、居下、居中

// flex-start 弹性项目向行头紧挨着填充，默认值

// flex-end 弹性项目向行尾紧挨着填充

// center 弹性项目居中紧挨着填充，如果剩余自由空间为负，则项目在两个方向同时溢出

  • align-items 属性：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

align-items: flex-start | flex-end | center             // 居左、居右、居中

// flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠在该行的侧轴起始边界

// flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠在该行的侧轴结束边界

// center 弹性盒子元素的侧轴（纵轴）上居中放置

3.2 子元素上的属性
  • flex属性：根据弹性盒子元素所设置的扩展因子作为比率分配剩余空间。默认为0，即如果存在剩余空间，也不放大。如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .container{
            width: 500px;
            height:500px;
            background-color: #555;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .box1{
            width: 100px;
            height:100px;
            background-color: red;
            flex:2;
        }

        .box2{
            width: 100px;
            height:100px;
            background-color: green;
            flex: 2;
        }

        .box3{
            width: 100px;
            height:100px;
            background-color: blue;
            flex:1;
        }

    </style>
</head>
<body>
    
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

</body>
</html>

4. 文档流

        文档流是文档中可显示对象在排列时所占用的位置/空间。例如：块元素自上而下摆放，内联元素从左到右摆放。标准流里面的限制非常多，导致很多页面效果无法实现：

  • 高矮不齐，底边对齐
  • 空白折叠现象：无论多少个空格、换行、tab都会折叠为一个空格
  • 元素空隙：如果想让img标签之间没有空隙，必须紧密连接

脱离文档流：使一个元素脱离标准文档流有三种方式

  • 浮动
  • 绝对定位
  • 固定定位

5. 浮动 float

        float 属性定义元素在哪个方向浮动，任何元素都可以浮动。

值描述
left元素向左浮动
right元素向右浮动

浮动的原理：

  • 浮动以后使元素脱离了文档流
  • 浮动只有左右浮动，没有上下浮动

元素向左浮动：脱离文档流之后，元素相当于在页面上增加一个浮层放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。

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

<div class="container"></div>

.box{

            width: 100px;

            height: 100px;

            background-color: aqua;

            float: left;

        }

        .container{

            width: 200px;

            height: 200px;

            background-color: blueviolet;

        } 

 元素向右浮动：

所有元素向左浮动：当所有元素同时浮动的时候，会变成水平摆放，向左或者向右。导航栏水平

当容器不足时：以横向摆放内容的时候，会在下一行摆放

6. 清除浮动

浮动副作用：当元素设置float浮动后，该元素会脱离文档流并向左/向右浮动，

  • 浮动元素会造成父元素高度塌陷
  • 后续元素会收到影响

清除浮动：当父元素出现塌陷的时候，对布局是不利的，所以必须清除副作用

  • 父元素设置高度，撑开元素本身大小
  • 受影响的元素增加clear属性，both
  • overflow清除浮动
  • 伪对象方式

overflow清除浮动：如果父级塌陷，并且同级元素也受到了影响，在父布局不能设置高度的情况下，可以使用overflow清除浮动。父级标签的样式里加：overflow:hidden; clear:both;

<div class="container">

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

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

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

</div>

<div class="nav"></div>        // 如果div在内部，依然需要单独给nav添加clear属性

.container{

        width:350px;

        border:1px solid red;

        overflow:hidden;

        clear:both;

} 

.box{

        width:100px;

        height:100px;

        background-color:#fff176;

        float:left;

        margin:5px;

}

.nav{

        width:100px;

        height:100px;

        background-color:red;

}

伪对象方式：如果父级塌陷，并且同级元素也受到了影响，还可使用伪对象方式处理。为父标签添加伪类after，设置空的内容，并且使用clear:both;

<div class="container">

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

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

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

</div>

<div class="nav"></div>

.container{

        width:350px;

        border:1px solid red;

} 

.container::after{

        content:"";

        display:block;

        clear:both;

}

.box{

        width:100px;

        height:100px;

        background-color:#fff176;

        float:left;

        margin:5px;

}

.nav{

        width:100px;

        height:100px;

        background-color:red;

} 

7. 定位 position属性

值描述
relative相对定位
absolute绝对定位
fixed固定定位

其中，绝对定位和固定定位会脱离文档流。设置定位之后，可以使用四个方向值进行调整位置：left、top、right、bottom

  • 相对定位

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

.box{

            width: 200px;

            height: 200px;

            background-color: red;

            position: relative;

            left: 100px;

}

  • 绝对定位

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

.box1{

        width: 200px;

        height: 200px;

        background-color: red;

        position: absolute;

        left: 100px;

        top: 200px;

}

.box2{

        width: 300px;

        height: 300px;

        background-color:aqua;

}

.box3{

        width: 200px;

        height: 200px;

        background-color: blueviolet;

        position: absolute;

        left: 50px;

        top: 100px;

}

  • 固定定位 ---- 可用于不随页面滑动而位置固定的导航栏，广告位等

<div class="box1"></div>

<div class="box2"></div>

.box1{

        width: 200px;

        height: 200px;

        background-color: red;

        position: fixed;

        right: 100px;

        bottom: 100px;                // 常见于右下角导航栏

}

.box2{

        width: 300px;

        height: 300px;

        background-color:aqua;

}

 注意：设置定位之后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

  • Z-index 属性，设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/581993.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

VULHUB复现fastjson1.2.24反序列化漏洞

VULHUB复现fastjson1.2.24反序列化漏洞

蚌埠住了&#xff0c;遇到了很多奇奇怪怪的问题。 如果你问我为啥不用kali&#xff0c;我会告诉你&#xff0c;我电脑上的kali装不成docker-compose!我急用了ubuntu如果你问我为啥用ubuntu克隆&#xff0c;我会告诉你&#xff0c;我电脑上的kali不能安装成功java8这个版本如果你…
阅读更多...
秋招后端开发面试题 - Java语言基础（下）

秋招后端开发面试题 - Java语言基础（下）

目录 Java基础下前言面试题toString() 、String.valueof()、(String)&#xff1f;hashCode() 方法&#xff1f;hashCode 和 equals 方法判断两个对象是否相等&#xff1f;为什么重写 equals 时必须重写 hashCode 方法&#xff1f;String、StringBuffer、StringBuilder?String …
阅读更多...
《ESP8266通信指南》9-TCP通信（Arudino开发）

《ESP8266通信指南》9-TCP通信（Arudino开发）

往期 《ESP8266通信指南》8-连接WIFI&#xff08;Arduino开发&#xff09;&#xff08;非常简单&#xff09;-CSDN博客 《ESP8266通信指南》7-Arduino 开发8266的环境配置与示例代码烧录-CSDN博客 《ESP8266通信指南》6-创建TCP服务器&#xff08;AT指令&#xff09;-CSDN博…
阅读更多...
asp.net结课作业中遇到的问题解决1

asp.net结课作业中遇到的问题解决1

作业要求 实现增删改查导出基本功能。 1、如何设置使得某个背景就是一整个而不是无限填充或者是这个图片的某一部分。 这就要求在设置这一块的时候&#xff0c;长和宽按照背景图片的大小进行设置&#xff0c;比如&#xff1a; 如果&#xff0c;图片的大小不符合你的要求&am…
阅读更多...
如何让用户听话？

如何让用户听话？

​福格教授&#xff08;斯坦福大学行为设计实验室创始人&#xff09;通过深入研究人类行为20年&#xff0c;2007年用自己的名子命名&#xff0c;提出了一个行为模型&#xff1a;福格行为模型。 模型表明&#xff1a;人的行为发生&#xff0c;要有做出行为的动机和完成行为的能…
阅读更多...
操作系统——优先权算法c++实现

操作系统——优先权算法c++实现

变量描述 测试数据 5 A 0 4 4 B 1 3 2 C 2 5 3 D 3 2 5 E 4 4 1 先来先服务算法 简述 该算法实现非常简单就是对到达时间排个序&#xff0c;然后依次进行即可&#xff0c;对结构体的sort进行了重载 代码 void FCFS() {//先来先服务算法std::cout<<"\n\t\t\t\t\…
阅读更多...
字典及GitHub字典爬取工具

字典及GitHub字典爬取工具

红队API接口Fuzz字典可以用于WEB安全&#xff0c;渗透测试&#xff0c;SRC等场景 完整文件已上传知识星球&#xff0c;需要的朋友可加入查看。
阅读更多...
STM32应用开发教程进阶--Wi-Fi通信（ESP8266模块：STA、AP、STA+AP）

STM32应用开发教程进阶--Wi-Fi通信（ESP8266模块：STA、AP、STA+AP）

实现目标 1、熟悉Wi-F、ESP8266模块 2、掌握ESP8266模块共3种工作模式&#xff1a;STA、AP、STAAP的配置 3、具体实现目标&#xff1a;&#xff08;1&#xff09;AT固件烧录&#xff1b;&#xff08;2&#xff09;ESP8266模块STA、AP、STAAP的配置 一、Wi-Fi概述 1、Wi-Fi定…
阅读更多...
OpenCV-Python: 强大的计算机视觉库

OpenCV-Python: 强大的计算机视觉库

文章目录 OpenCV-Python: 强大的计算机视觉库背景OpenCV-Python是什么&#xff1f;安装简单的库函数使用方法场景示例人脸检测和识别图像分割目标跟踪 常见问题和解决方案总结 OpenCV-Python: 强大的计算机视觉库 背景 OpenCV (Open Source Computer Vision Library) 是一个开…
阅读更多...
OceanBase 助力同方智慧能源，打造安全可靠、高性能的能源数据架构

OceanBase 助力同方智慧能源，打造安全可靠、高性能的能源数据架构

本文作者&#xff1a;丁泽斌&#xff0c;同方智慧能源数据库工程师 业务背景 作为同方股份有限公司旗下的领军企业&#xff0c;同方智慧能源集团矢志成为全球领先的综合智慧能源解决方案提供商。凭借中核集团和清华大学的科技实力&#xff0c;专注于向建筑、交通、工业、北方供…
阅读更多...
Altair® HPCWorks™——高性能计算（HPC）和云平台

Altair® HPCWorks™——高性能计算（HPC）和云平台

Altair HPCWorks™——高性能计算&#xff08;HPC&#xff09;和云平台 强大的计算助力研发增速&#xff0c;Altair HPCWorks™ 使高性能和云计算变得快速、高效和提高有效产出 - 无论您的资源是在本地、云端还是混合环境中。专业地管理 IT 复杂性并支持最新的 AI 工作负载。使…
阅读更多...
《QT实用小工具·四十五》可以在界面上游泳的小鱼

《QT实用小工具·四十五》可以在界面上游泳的小鱼

1、概述 源码放在文章末尾 该项目实现了灵动的小鱼&#xff0c;可以在界面上跟随鼠标点击自由的游泳&#xff0c;项目demo演示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #include "magicfish.h" #include <QtMath> #include <QPainter>…
阅读更多...
CentOS7安装和升级nginx

CentOS7安装和升级nginx

文章目录 一 环境准备二 安装nginx三 升级nginx四 注意事项 一 环境准备 公司等保要求修复nginx的应用漏洞&#xff0c;从1.12.2升级到1.20.2版本。 本机操作系统是CentOS7.9&#xff0c;主机IP是192.168.0.201&#xff0c;nginx是在服务器部署而非容器部署。 下列安装和升级…
阅读更多...
Springboot + MySQL + html 实现文件的上传、存储、下载、删除

Springboot + MySQL + html 实现文件的上传、存储、下载、删除

实现步骤及效果呈现如下&#xff1a; 1.创建数据库表&#xff1a; 表名&#xff1a;file_test 存储后的数据&#xff1a; 2.创建数据库表对应映射的实体类&#xff1a; import com.baomidou.mybatisplus.annotation.IdType;import com.baomidou.mybatisplus.annotation.Table…
阅读更多...
《R语言与农业数据统计分析及建模》学习——回归分析

《R语言与农业数据统计分析及建模》学习——回归分析

一、线性回归 线性回归是一种广泛用于数据分析、预测和建模的技术&#xff0c;可以帮助我们理解变量之间的关系&#xff0c;并进行预测和推断。 1、简单线性回归 简单线性回归是线性回归的一种特殊情况&#xff0c;适用于只有一个自变量和一个因变量的情况。 在R语言中&#x…
阅读更多...
QT c++ 代码布局原则 简单例子

QT c++ 代码布局原则 简单例子

本文描述QT c widget代码布局遵循的原则&#xff1a;实中套虚&#xff0c;虚中套实。 本文最后列出了代码下载链接。 在QT6.2.4 msvc2019编译通过。 所谓实是实体组件&#xff1a;比如界面框、文本标签、组合框、文本框、按钮、表格、图片框等。 所谓虚是Layout组件&#x…
阅读更多...
IT廉连看——UniApp——样式绑定

IT廉连看——UniApp——样式绑定

IT廉连看——UniApp——样式绑定 一、样式绑定 两种添加样式的方法&#xff1a; 1、第一种写法 写一个class属性&#xff0c;然后将css样式写在style中。 2、第二种写法 直接把style写在class后面 添加一些效果&#xff1a;字体大小 查看效果 证明这样添加样式是没有问题的…
阅读更多...
WPF —— MVVM 指令执行不同的任务实例

WPF —— MVVM 指令执行不同的任务实例

标签页 设置两个按钮&#xff0c; <Button Content"修改状态" Width"100" Height"40" Background"red"Click"Button_Click"></Button><Button Content"测试"Width"100"Height"40&…
阅读更多...
clickhous学习之旅二

clickhous学习之旅二

接上回继续鼓捣clickhouse 1.常用数据类型 1.1整型 固定长度的整型&#xff0c;包括有符号整型或无符号整型。整型范围(-2n-1~2n-1-1): Int8 - [-128 :127] -->相当于java中的byte Int16-[-32768 :32767] -->相当于java中的short Int32-[-2147483648 :2147483647] -…
阅读更多...
最新官方破解版会声会影2024永久序列号和激活码

最新官方破解版会声会影2024永久序列号和激活码

会声会影2024是一款功能强大的视频编辑软件&#xff0c;它集合了视频剪辑、音频调整、特效添加等多项功能于一身&#xff0c;为用户提供了一个全面且易用的视频制作平台。无论是初学者还是专业视频编辑人员&#xff0c;都能在这款软件中找到满足自己创作需求的工具。 会声会影最…
阅读更多...
最新文章

Copyright @ 2022~2023