css整体使用

文章目录

  • html与css
    • html、css与排版
    • 响应式与自适应布局
      • 自适应布局
      • 响应式布局
    • css规则
      • class、id、以及默认的标签名的优先级
    • css书写位置
    • flex
      • 整体逻辑
    • bootstrap
      • 资源

html与css

html负责网页功能,css负责网页美化;浏览器本身有一套默认的css样式;所以有的元素会表现的不一样

html、css与排版

这里说一下对排版的个人理解:
首先整体上,不论是以前的块级元素、行级元素;还是现在的元素类别,一个元素,他都会区分为换行以及不换行的;而这个换行与不换行本质上由css决定,html的元素有些换行,有些不换行,究其原理就是css的不同默认设置。
而当不换行的时候,css就根据盒子模型不断对元素放置,外层元素要完全包含内层元素。因此整体上的表现就是一个个的元素分层次的嵌套一个又一个的元素,最终嵌套了最基本的元素。

响应式与自适应布局

自适应布局

分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。

响应式布局

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应;通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;只需要开发一套界面即可适用于所有尺寸及终端。

css规则

<style>h1, h2 {color: red;background-color: lightblue;text-align: center;}h3 {color: yellow;background-color: lightblue;text-align: center;}
</style>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3><p class="class_p1">p2</p>
<p>p3</p>

css规则 = 选择器 + 声明块

  • 选择器
    用来选中元素,定义选中元素的范围

    • 元素选择器:选中对应标签的元素

      h1 {color: red;background-color: lightblue;text-align: center;
      }
      
      <h1>标题1</h1>
      
    • id选择器:选中对应id的元素

      #id_p1 {color: red;
      }
      
      <p id="id_p1">p1</p>
      
    • 类选择器:选中对应的类型

      .class_p1 {color: lightblue;
      }
      
      <p class="class_p1">p2</p>
      
  • 声明块
    用来定义选择器的属性,出现在大括号中,声明块中包含多种属性,每个属性表达了一种样式规则。

class、id、以及默认的标签名的优先级

<style>.test {background: red;color: red;}#testID{background: blue;}.test2 {background: violet;}.test {background: yellow;}div{background: turquoise;border: 1px black solid;}
</style><div class="test test2" id="testID">
  • 此时相同类型的css定义,如class,如果有重复的,那么后面的属性会覆盖前面的属性(如background),而后面没有的属性并不会影响前面存在的属性(如color);
  • 而不同类型的css定义,他们的优先级为标签名 < class类型 < id类型;同样的如果一个标签同时引用了三种,那么他们的会按照这个优先级顺序覆盖相同的属性,而优先级低存在的属性但是优先级高的不存在的属性则会保留;
  • 如果class或者id引用了多个类型,那么会按照对应style定义的先后顺序生效,而不是引用顺序,如这里的class="test test2"最终生效的是test2的background,因为他定义在test之前。

css书写位置

  1. 内部样式表
    即直接将<style>...</style>写在<head>...</head>中;
    <style>...</style>也可以写在<body>...</body>中,但是由于浏览器是从html文件从上到下进行数据读取,渲染过程中在遇到<style>...</style>时会根据样式表重新进行渲染,可能造成闪烁问题,因此一般放在head部分,保证浏览器一开始就能读取到样式表。

  2. 内联样式表、元素样式表
    即直接在元素位置加style属性:<h1 style="color: red; background: blue;"></h1>

  3. 外部样式表
    将样式书写到独立的css文件中;然后使用link进行引用:

    <link rel="stylesheet" href="css/base.css">
    

推荐使用外部样式表,理由如下:

  1. 外部样式表可以解决多页面样式重复问题,和c++头文件差不多,把重复性的都提取出来成一个外部样式表文件;
  2. 有利于浏览器缓存,提升浏览器响应速度。
  3. 有利于代码分离,更容易阅读和维护。

flex

Flexible – 灵活的
flex – Flexible Box – 弹性布局,用来为盒状模型提供最大的灵活性。

整体逻辑

整体逻辑就是一个container,然后内部容纳多个item,而属性方面有两个层次,一个是container的层次,用于描述整体排版;一个是item的层次,用于描述container存在剩余空间的时候每个item的放大缩小策略,以及一个排版布局的属性。

整体上,针对的更多的是主轴方面,而垂直轴的布局主要由容器负责管理。

当所有的项目都以 flex-basis 的值进行排列后,仍有剩余空间,那么这时候 flex-grow 就会发挥作用了。
如果所有项目的 flex-grow 属性都为 1,则它们将等分剩余空间。(如果有的话)
如果一个项目的 flex-grow 属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍。
当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了,且 flex-wrap:nowrap 时,此时 flex-grow 则不起作用了,这时候就需要接下来的这个属性:
flex-shrink:如果空间不足,该项目将缩小,负值对该属性无效。

bootstrap

一个css库,可以用来美化界面

资源

中文文档:
http://bs4.vx.link/

资源链接:
https://www.bootstrapcdn.com/

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序体验版不存在 无法体验

1、权限问题&#xff1a; 1、开发者有所有权限。 2、小程序访问路径也是正确的。 该有的权限都有了。 2、解决办法&#xff1a; 打开微信公众平台&#xff0c;左侧菜单【设置】- 【第三方设置】&#xff0c;取消授权即可。

数据结构 - 语句的频度和时间复杂度

一、语句频度&#xff1a; 算法的运行时间 Σ每条语句的执行次数X该语句执行一次所需的时间每条语句的执行次数&#xff0c;也称为&#xff1a;语句的频度结合上面两点&#xff0c;可知&#xff1a;算法的运行时间 Σ每条语句的频度X该语句执行一次所需的时间 二、语句执行…

Linux内核源码分析-内存管理

Linux内核内存布局 64位Linux系统一般使用48位表示虚拟地址空间&#xff0c;45位表示物理地址。通过命令&#xff1a;cat /proc/cpuinfo。查看Linux内核位数和proc文件系统输出系统软硬件信息如下&#xff1a; x86_64架构体系内核分布情况 通过 cat /proc/meminfo 输出系统架…

【网络编程】muduo库——noncopyable

在研读muduo库源码时&#xff0c;可以发现其中的很多类都是私有继承自noncopyable的 那么这是一个什么类呢&#xff1f;为什么要继承这个类&#xff1f; 其实从名字也可以得知 noncopyable——不可复制 让我们看一下源码 #ifndef MUDUO_BASE_NONCOPYABLE_H #define MUDUO_B…

罗勇军 → 《算法竞赛·快冲300题》每日一题:“排列变换” ← 贪心算法

【题目来源】http://oj.ecustacm.cn/problem.php?id1812http://oj.ecustacm.cn/viewnews.php?id1023【题目描述】 给定一个长度为 n 的排列 a&#xff0c;需要将这个排列变成 b。 每次可以选择一个数字往左移若干个位置。 请求出最小需要移动的元素个数。【输入格式】 第一行…

python 小案例正则表达式

正则表达式是一种用于匹配、查找和替换文本的强大工具。在提取网页中的目标数据时&#xff0c;可以使用正则表达式来搜索和匹配特定模式的文本。 以下是一个使用正则表达式提取网页中的目标数据的示例代码&#xff1a; import re# 网页源代码html """<div c…

论文笔记 Graph Attention Networks

2018 ICLR 1 intro 1.1. GCN的不足 无法完成inductive任务 inductive任务是指&#xff1a; 训练阶段与测试阶段需要处理的graph不同。通常是训练阶段只是在子图上进行&#xff0c;测试阶段需要处理未知的顶点。GGN 的参数依赖于邻接矩阵A/拉普拉斯矩阵L&#xff0c;所以换了…

亿赛通电子文档安全管理系统任意文件上传漏洞(2023-HW)

亿赛通电子文档安全管理系统任意文件上传漏洞 一、 产品简介二、 漏洞概述三、 影响范围四、 复现环境五、 漏洞复现小龙POC检测 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果…

21.1 CSS 文字样式

1. 字体倾斜 font-style属性: 为文本设置字体样式.常用取值: normal: 正常显示文本. 快捷键: fstab. italic: 显示斜体文本. 快捷键: fsntab.<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>fo…

Nginx反向代理-负载均衡、webshell实践

目录 1.nginx反向代理-负载均衡 1&#xff09;搭建web项目 2&#xff09;修改 nginx.conf的配置 2.webshell 实践 1&#xff09;异或操作绕过 2&#xff09;取反绕过 3&#xff09;php语法绕过 1.nginx反向代理-负载均衡 1&#xff09;搭建web项目 首先通过SpringBoo…

Java-抽象类和接口(上)

如果一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类 在打印图形例子中, 我们发现, 父类 Shape 中的 draw 方法好像并没有什么实际工作, 主要的绘制图形都是由 Shape 的各种子类的 draw 方法来完成的. 像这种没有实际工作的方法, 我们可以把它…

postgresSQL 配置文件设置

postgres.conf 是 PostgreSQL 数据库的主要配置文件&#xff0c;其中包含了许多关于数据库行为的设置。以下是一些常见的配置项&#xff1a; listen_addresses: 这个参数定义了 PostgreSQL 服务监听的网络地址。默认值是 ‘localhost’&#xff0c;这意味着只有本机的客户端才能…

6.redis面试题和坑

1.哨兵模式 多少个节点多少个哨兵(如果全部哨兵检测到已经master dead,重新选举)写sentinel.conf,监控的主机 票数 sentinel monitor myredis 127.0.0.1 6379 1启动哨兵 redis-sentinel sentinel.conf关闭主机 failover sdown info replication shutdown优点 1.基于主从复制模式…

【数据库系统】-- 【1】DBMS概述

1.DBMS概述 01数据库系统概述02数据库技术发展概述03关系数据库概述04数据库基准测试 01数据库系统概述 几个基本概念 为什么使用数据库系统 数据库发展的辉煌历程 02数据库技术发展概述 数据模型 应用领域 ● OLTP ● OLAP ● HTAP ● GIS OLTP与OLAP 与其他技术相…

redis 存储结构原理 2

咱们接着上一部分来进行分享&#xff0c;我们可以在如下地址下载 redis 的源码&#xff1a; https://redis.io/download 此处我下载的是 redis-6.2.5 版本的&#xff0c;xdm 可以直接下载上图中的 **redis-6.2.6 **版本&#xff0c; redis 中 hash 表的数据结构 redis hash …

JDK、JRE、Java SE、Java EE和Java ME有什么区别?

Java现在已不仅仅是一种语言&#xff0c;从广义上说&#xff0c;它代表了一个技术体系。该体系根据应用方向的不同主要分为Java SE、Java EE和Java ME的3个部分。 1.SE(JavaSE)&#xff0c;standard edition&#xff0c;标准版&#xff0c;是我们通常用的一个版本&#xff0c;从…

【Python】Web学习笔记_flask(5)——会话cookie对象

HTTP是无状态协议&#xff0c;一次请求响应结束后&#xff0c;服务器不会留下对方信息&#xff0c;对于大部分web程序来说&#xff0c;是不方便的&#xff0c;所以有了cookie技术&#xff0c;通过在请求和响应保温中添加cookie数据来保存客户端的状态。 html代码&#xff1a; …

PyTorch学习笔记(十五)——完整的模型训练套路

以 CIFAR10 数据集为例&#xff0c;分类问题&#xff08;10分类&#xff09; model.py import torch from torch import nn# 搭建神经网络 class MyNN(nn.Module):def __init__(self):super(MyNN, self).__init__()self.model nn.Sequential(nn.Conv2d(3, 32, 5, 1, 2),nn.Ma…

VMware 虚拟机三种网络模式详解

文章目录 前言桥接模式(Bridged)桥接模式特点: 仅主机模式 (Host-only)仅主机模式 (Host-only)特点: NAT网络地址转换模式(NAT)网络地址转换模式(NAT 模式)特点: 前言 很多同学在初次接触虚拟机的时候对 VMware 产品的三种网络模式不是很理解,本文就 VMware 的三种网络模式进行…