CSS详解

盒子模型(box-sizing)

7deb46ee074a46edb43bfc5ed4082892.png

line-height与height

2f28006945c448d48ac5b287da821e08.png

CSS选择符和可继承属性

eecf3401d28248acbdde93582d2bff11.png

属性选择符

  • 示例:a[target="_blank"] { text-decoration: none; }(选择所有target="_blank"<a>元素)
/* 选择所有具有class属性的h1元素 */  
h1[class] {  color: silver;  
}  /* 选择所有具有href属性的a元素 */  
a[href] {  text-decoration: underline;  
}
/* 选择所有name属性值为"username"的input元素 */  
input[name="username"] {  border: 1px solid black;  
}  /* 选择所有class属性值为"highlight"的元素 */  
.highlight, [class="highlight"] {  background-color: yellow;  
}
/* 选择所有class属性值中包含"row-"的div元素 */  
div[class*="row-"] {  border-bottom: 1px solid #ccc;  
}  /* 选择所有id属性值以"nav-"开头的元素 */  
[id^="nav-"] {  color: navy;  
}

伪类选择符

  • 选择处于特定状态的元素。
  • :hover:用户悬停在元素上时。
  • :active:元素被用户激活时(如点击)。
  • :visited:用户已访问的链接。
  • :first-child:其父元素的第一个子元素。

伪元素选择符

  • 选择元素的特定部分或插入的内容
  • 示例:
    • ::before:在元素内容之前插入内容。
    • ::after:在元素内容之后插入内容。
    • ::first-line:选择元素的第一行。
    • ::first-letter:选择元素的第一个字母。
  • 组合选择符 h1, h2 { color: blue; }(选择所有<h1><h2>元素)
  • 后代选择符(空格分隔)div p { color: green; }(选择所有<div>元素内的<p>元素)
  • 子元素选择符>):div > p { color: purple; }所有直接位于<div>元素内的<p>元素)

子元素选择符使用>符号来选择某个元素的直接子元素。与后代选择符不同,子元素选择符仅选择直接的子元素,而不包括孙子元素、曾孙元素

  • 相邻兄弟选择符+):div + p { margin-top: 20px; }紧接<div>元素后的<p>元素)
  • 一般兄弟选择符~h1 ~ p { font-size: 14px; }<h1>元素之后的所有<p>兄弟元素

06fbec1a319a468885a2ab1e1a60f628.png

e229ce3f7fcd4606b9b8918b064c4cbd.png

可继承的属性

大多数与文本相关的CSS属性都是可继承的。这些属性主要包括:

  • 字体及其相关属性font-familyfont-sizefont-weightfont-stylefont-variantfont-stretchfont-size-adjustfontline-height
  • 文本相关属性text-indenttext-aligntext-transformtext-decorationletter-spacingword-spacingwhite-spacevertical-align (对于内联元素和表格单元格), text-shadowdirectionunicode-bidi
  • 颜色相关属性coloropacity (注意,opacity继承会影响元素的透明度,但不会影响其颜色值本身)
  • 列表属性list-style-typelist-style-positionlist-style-imagelist-style
  • 表格布局属性border-collapseborder-spacingempty-cellscaption-side
  • 其他属性:cursorvisibilityspeak

不可继承的属性

大部分与布局和盒子模型相关的CSS属性都是不可继承的。这些属性包括:

  • 盒模型相关属性widthheightmarginpaddingborderdisplaypositionfloatcleartoprightbottomleftoverflowclipz-indexbox-sizingflexgrid 布局属性等
  • 背景和边框属性backgroundbackground-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-attachmentborder-colorborder-styleborder-widthborder-radius 等
  • 其他与布局和外观相关的属性:opacity (当作为单独属性时,而非从color继承), visibility: collapse (对于表格行、行组、列和列组), contentcounter-resetcounter-incrementoutlinequotesvolumespeak-headerspeak-numeralspeak-punctuationvoice-familyvolumepitchpitch-rangestressrichnessazimuthelevation 等

CSS样式优先级

61ff359422914ad8890489c7a35587a2.png

权重值相加

0ea822fa8afd4bb89fa36797e4d999c8.png

CSS样式表的优先级是由多个因素决定的,这些因素共同决定了当多个样式应用于同一个元素时,哪个样式会被最终应用。以下是影响CSS样式优先级的几个关键因素:

  1. 重要性(Importance)
    • 使用!important声明的样式具有最高优先级。它会覆盖任何其他声明的样式,无论其来源或特异性如何。
    • 示例:p { color: red !important; }
  2. 特异性(Specificity)
    • 特异性是CSS用来决定哪些样式应用于元素的一组权重。特异性值由四个部分组成:内联样式(1,0,0,0)、ID选择器(0,1,0,0)、类选择器/属性选择器/伪类(0,0,1,0)和元素/伪元素选择器(0,0,0,1)。
    • 示例:ID选择器的特异性高于类选择器,因此#myId { color: blue; }会覆盖.myClass { color: red; }
    • 当两个或多个样式具有相同的特异性时,后出现的样式会覆盖先出现的样式(也称为源顺序)。
  3. 源顺序(Source Order)
    • 当两个样式具有相同的特异性时,后出现的样式会覆盖先出现的样式。这适用于外部样式表、内部样式表和内联样式。
    • 示例:在HTML文档中,后定义的<style>标签或<link>标签引入的样式表会覆盖先定义的样式
  4. 继承(Inheritance)
    • 某些CSS属性(如字体大小和颜色)会从父元素继承到子元素。但是,如果子元素有直接应用于它的样式,那么这些样式会覆盖继承的样式。
  5. 默认样式(Default Styles)
    • 浏览器为HTML元素提供了一组默认样式。如果元素没有应用任何样式,它将使用这些默认样式。但是,一旦为元素应用了任何样式(无论是通过内联、内部还是外部样式表),这些默认样式就会被覆盖。
  6. 用户代理样式表(User Agent Style Sheets)
    • 用户代理(如浏览器)通常会提供一个默认的样式表,这些样式表定义了HTML元素的默认外观。这些样式可以被用户自定义的样式或网页作者的样式覆盖。
  7. 动画和过渡(Animations and Transitions)
    • 虽然动画和过渡不直接影响样式的优先级,但它们可以覆盖或修改元素的样式,以创建动态效果。
  8. !important 规则的例外
    • 在某些情况下,即使使用了!important,也可能无法覆盖其他样式。例如,在用户样式表(由用户通过浏览器设置)中定义的!important规则可能会覆盖网页作者定义的!important规则。

用CSS画一个三角形

边框绘制

218f44a046ad47c08fe5850a69d3314b.png

1f5e6f32f3dd484195a5f2fbf1cfef74.png

一个盒子不给宽高如何水平垂直居中

//方式1
.container{display:flex;justify-content:center;align-items:center;width:200px;height:200px;border:5px solid #ccc
}
.main{background:red
}
//方式2
.container{width:200px;height:200px;border:5px solid #ccc
}
.main{background:red;left:50%;top:50%;background:red;transform:translate(-50%,-50%)
}

display有那些值

d6a8ab7573d64a33863607e779ad212a.png

 flex(兼容性不佳)

flexible box,任何容器都可以设置为flex布局

567a5611191445b6ac0b6ad3bf456d1e.png

 

父盒子:排列方式,子项:具体属性 

 Flex布局的主要属性

Flex布局支持多个容器和项目属性,以下是其中的一些关键属性:

  • flex-direction:设置主轴的方向(默认为水平方向)。可选值包括row(水平)、row-reverse(水平反向)、column(垂直)和column-reverse(垂直反向)。
  • justify-content:设置主轴上的子元素排列方式。可选值包括flex-start(主轴起点对齐)、flex-end(主轴终点对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)、space-around(每个项目两侧的间隔相等)和space-evenly(项目之间的间隔和首尾两侧的间隔相等)。
  • flex-wrap:设置子元素是否换行。可选值包括nowrap(不换行)、wrap(换行)和wrap-reverse(反向换行)。
  • align-items:设置侧轴上的子元素排列方式(单行)。可选值与justify-content类似,但作用于侧轴
  • align-content:设置侧轴上的子元素的排列方式(多行)。当子元素在侧轴上有多余空间时,此属性才有效。
  • flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap。
  • display:block,块级元素,元素会独占一行,其前后会自动创建新行<div><p><h1> 等元素都是块级元素,它们会自动占据整行,并允许通过 CSS 来控制其高度、宽度、内外边距等属性。
  • display:inline,不会独占一行,而是与其他文本并排显示。同时,由于它是内联的,所以其背景色只会应用于它自己的文本,而不是整个段落。 <span><a><img><strong><em><br>

BFC规范

BFC (Block Formatting Context) 是 CSS 中的一个重要概念,中文称为“块级格式化上下文”。它是一个独立的渲染区域,在这个区域内的布局不会影响到区域外的元素,反之亦然。

BFC 的作用

  1. 防止垂直外边距重叠:当两个块级元素垂直相邻时,它们的外边距可能会合并成一个外边距。但是,如果这两个元素属于不同的 BFC,那么它们的外边距就不会合并。
  2. 包含浮动元素:在 BFC 中,浮动元素会参与其父元素的高度计算,即使它们本身脱离了文档流。这意味着,如果一个元素创建了 BFC,那么它的子元素(包括浮动元素)都会受到这个 BFC 的约束。
  3. 防止元素内容溢出:在 BFC 中,元素的内容(包括行内元素和块级元素)都会被包含在 BFC 中,不会被其他元素的内容所覆盖或溢出。

如何触发 BFC

  1. 根元素(<html>
  2. 浮动元素(元素的 float 属性不为 none
  3. 绝对定位元素(元素的 position 属性为 absolute 或 fixed
  4. display 属性为 inline-blocktable-celltable-captionflexgrid 或 inline-flex 的元素
  5. overflow 属性不为 visible 的元素(即 hiddenautoscroll

BFC的应用场景

 

  1. 防止垂直margin重叠:当两个垂直相邻的块级元素的外边距相遇时,它们会折叠成一个外边距。通过将其中一个元素包裹在另一个BFC中,可以防止这种折叠。
  2. 清除浮动:当一个容器包含浮动元素时,该容器的高度可能会塌陷。通过将容器设置为BFC,可以使其正确地包含浮动元素,避免高度塌陷。
  3. 解决外边距塌陷:在某些情况下,父元素和子元素之间的外边距可能会塌陷。通过将父元素或子元素设置为BFC,可以防止这种塌陷

清除浮动

f711cfc954ba45ad9e9cb27cc8600052.png

c29f1510069c418abd36d0aa9b3cea8c.png

 position有那些值

6ae43c9fed6844fba52d65c164e59c2d.png

文档流(Document Flow)在CSS中是一个核心概念,它决定了HTML元素在页面上的默认布局和定位方式。以下是关于文档流的详细解释:

一、概念

文档流,也被称为常规流(Normal Flow)或默认流,是指文档中元素按照其在HTML中出现的顺序自上而下、从左到右布局的方式。文档流定义了元素的布局顺序和定位方式,包括元素的位置、大小、间距等属性。

二、特点

  1. 顺序性:元素按照在HTML中出现的顺序进行布局。
  2. 自上而下:元素在页面上从上到下排列。
  3. 自左而右:在同一行内,元素从左到右排列。
  4. 占据空间:每个元素都会占据一定的空间并尽可能充满其包含块的宽度。
  5. 相互影响:元素的位置会受到前面元素的影响,如果前面的元素发生位置变化,那么后面的元素的位置也会发生相应的变化。

三、元素类型与排列规则

在文档流中,元素根据其显示属性(display)的不同,可以分为以下几种类型,并遵循相应的排列规则:

  1. 块级元素(Block-level Elements):
    • 独占一行,并在前面自动添加一个垂直间距。
    • 示例元素:<p><div><h1>等。
  2. 行内元素(Inline Elements):
    • 在一行中排列,并且宽度根据内容自适应。
    • 示例元素:<a><span><img>等。
  3. 行内块级元素(Inline-block Elements):
    • 与行内元素类似,但可以设置宽度、高度等块级元素的属性。
    • 示例元素:<input><button><textarea>等。

四、脱离文档流

除了正常文档流之外,CSS还提供了使元素脱离文档流的方法,包括:

  1. 浮动(Floats):通过float属性使元素向左或向右移动,脱离文档流,但保留在文本流中。
  2. 绝对定位(Absolute Positioning):通过position: absolute;使元素相对于其最近的已定位祖先元素(如果没有,则相对于初始包含块)进行定位,完全脱离文档流。
  3. 固定定位(Fixed Positioning):通过position: fixed;使元素相对于浏览器窗口进行定位,完全脱离文档流。

总结:文档流是CSS中最基本、最重要的概念之一,它决定了网页的整体布局和排版方式。理解文档流的特性和工作原理对于掌握网页布局和样式设计至关重要。

双飞翼布局

主要用于实现三列布局,其中左右两侧宽度固定,中间部分宽度自适应。

  1. 三列布局:由左、中、右三部分组成,左右两侧宽度固定,中间部分宽度随浏览器窗口大小自适应。
  2. 加载顺序:双飞翼布局可以使中间部分(main)先加载,左右两侧(sub和extra)后加载,这有助于提高页面加载速度。
  3. 负边距技术:通过使用负外边距(margin)来实现左右两侧与中间部分的水平对齐。
<div class="container">  <div class="main">  <div class="content">自适应内容区</div>  </div>  <div class="left"></div>  <div class="right"></div>  
</div>
  • .main设置float: left;width: 100%;,使其占据整行。
  • .left.right设置float: left;,并分别设置固定的宽度。
  • 使用负外边距(margin)将.left.right定位到正确的位置。对于.left,设置margin-left: -宽度;(例如-190px),使其向左移动并覆盖在.main的左侧。对于.right,设置margin-left: -自身宽度;(例如-230px),使其向右移动并覆盖在.main的右侧。
  • .main内部添加一个.content的div,并设置左右外边距(margin)等于左右两侧div的宽度,以防止内容被遮挡。

 

 CSS reset[冗余] 

6aae4413590943b6870269ebbae740c2.png

CSS sprite

e152a20a65194f1b814748571ccd88a4.png

CSS基础

CSS动画(Animations)

CSS动画允许你创建平滑、可控制的动画效果。你可以通过@keyframes规则定义动画序列,然后在元素上应用这些动画。

@keyframes example {  0%   {background-color: red;}  25%  {background-color: yellow;}  50%  {background-color: blue;}  100% {background-color: green;}  
}  div {  width: 100px;  height: 100px;  background-color: red;  animation-name: example;  animation-duration: 4s;  animation-iteration-count: infinite;  
}

CSS过渡(Transitions)

CSS过渡允许你在元素从一个样式逐渐改变为另一个样式的过程中添加效果。它通常用于改变元素的尺寸、颜色、透明度等属性。

div {  width: 100px;  height: 100px;  background: red;  transition: width 2s;  
}  div:hover {  width: 200px;  
}

CSS媒体查询(Media Queries)

CSS媒体查询用于根据设备的特性(如视口宽度、设备类型等)应用不同的样式。这使得网站可以在不同的设备和屏幕尺寸上呈现不同的布局和样式。

/* 当视口宽度小于600px时应用这些样式 */  
@media screen and (max-width: 600px) {  body {  background-color: lightblue;  }  
}

CSS伪类(Pseudo-classes)

CSS伪类用于选择处于特定状态的元素。例如,:hover用于选择鼠标悬停在其上的元素,:active用于选择被用户激活(如点击)的元素。

button:hover {  background-color: yellow;  
}  button:active {  background-color: green;  
}

CSS伪元素(Pseudo-elements)

CSS伪元素用于选择元素的特定部分,并为这些部分添加样式。它们通常用于在元素的内容前后插入内容,或者选择元素的第一个字母、第一行等

p::first-letter {  color: blue;  font-size: 2em;  
}  p::before {  content: "Read this: ";  color: gray;  
}  p::after {  content: ".";  color: gray;  
}

::first-letter伪元素选择了每个<p>元素的第一个字母,并为其添加了样式。::before::after伪元素则在每个<p>元素的内容前后插入了文本,并为这些文本添加了样式。

 

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

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

相关文章

NeRF从入门到放弃3: EmerNeRF

https://github.com/NVlabs/EmerNeRF 该方法是Nvidia提出的&#xff0c;其亮点是不需要额外的2D、3Dbox先验&#xff0c;可以自动解耦动静field。 核心思想&#xff1a; 1. 动、静filed都用hash grid编码&#xff0c;动态filed比静态多了时间t&#xff0c;静态的hash编码输入是…

项目启动 | 盘古信息助力鼎阳科技开启智能制造升级新征程

在全球数字化浪潮不断涌动的背景下&#xff0c;电子信息行业正迎来转型升级的关键阶段。近日&#xff0c;盘古信息与深圳市鼎阳科技股份有限公司&#xff08;简称“鼎阳科技”&#xff0c;股票代码&#xff1a;688112&#xff09;正式启动了IMS数字化智能制造工厂项目&#xff…

windows环境下,怎么查看本机的IP、MAC地址和端口占用情况

1.输入ipconfig,按回车。即查看了IP地址&#xff0c;子码掩码&#xff0c;网关信息。 2.输入ipconfig/all,按回车。即查看了包含IP地址&#xff0c;子码掩码&#xff0c;网关信息以及MAC地址 3.我们有时在启动应用程序的时候提示端口被占用&#xff0c;如何知道谁占有了我们需要…

C#实现卷积平滑(图像处理)

在C#中使用卷积滤波器来实现图像平滑处理&#xff0c;我们可以使用 System.Drawing 库来操作图像。下面是一个具体的示例&#xff0c;演示如何加载图像、应用卷积平滑滤波器&#xff0c;并保存处理后的图像。 1. 安装 System.Drawing.Common 首先&#xff0c;确保你已经安装了…

【Leetcode】2663. 字典序最小的美丽字符串

题目 题目链接&#x1f517;如果一个字符串满足以下条件&#xff0c;则称其为 美丽字符串 &#xff1a; 它由英语小写字母表的前 k 个字母组成。它不包含任何长度为 2 或更长的回文子字符串。 给你一个长度为 n 的美丽字符串 s 和一个正整数 k 。请你找出并返回一个长度为 n…

Python | Leetcode Python题解之第166题分数到小数

题目&#xff1a; 题解&#xff1a; class Solution:def fractionToDecimal(self, numerator: int, denominator: int) -> str:if numerator % denominator 0:return str(numerator // denominator)s []if (numerator < 0) ! (denominator < 0):s.append(-)# 整数部…

软件缺陷及JIRA工具

一、软件缺陷及跟踪流程 1&#xff0c;软件缺陷信息 案例 &#xff08;1&#xff09;缺陷报告的基本内容 缺陷的标题 预置条件 重现步骤 期望结果 实际结果 &#xff08;2&#xff09;软件缺陷的状态 新建 打开 修复 关闭 &#xff08;3&#xff09;软件缺陷的严重程度 …

JAVA医院绩效考核系统源码 功能特点:大型医院绩效考核系统源码

JAVA医院绩效考核系统源码 功能特点&#xff1a;大型医院绩效考核系统源码 医院绩效管理系统主要用于对科室和岗位的工作量、工作质量、服务质量进行全面考核&#xff0c;并对科室绩效工资和岗位绩效工资进行核算的系统。医院绩效管理系统开发主要用到的管理工具有RBRVS、DRGS…

云徙科技助力竹叶青实现用户精细化运营,拉动全渠道销售额增长

竹叶青茶以其别具一格的风味与深厚的历史底蕴&#xff0c;一直被誉为茶中瑰宝。历经千年的传承与创新&#xff0c;竹叶青不仅坚守着茶叶品质的极致追求&#xff0c;更在数字化的浪潮中&#xff0c;率先打破传统&#xff0c;以科技力量赋能品牌&#xff0c;成为茶行业的领军者。…

Python抓取高考网图片

Python抓取高考网图片 一、项目介绍二、完整代码一、项目介绍 本次采集的目标是高考网(http://www.gaokao.com/gkpic/)的图片,实现图片自动下载。高考网主页如下图: 爬取的流程包括寻找数据接口,发送请求,解析图片链接,向图片链接发送请求获取数据,最后保存数据。 二…

示例:WPF中在没有MouseDoubleClick的控件中如何识别双击

一、目的&#xff1a;由于MouseDoubleClick控件是在Control中实现&#xff0c;那么在底层控件如Grid中想要类似功能如何实现&#xff0c;这里通过MouseDown的事MouseButtonEventArgs参数去实现 二、实现 定义Grid并注册Grid的MouseDown事件 <Grid Background"Transpa…

GIT回滚

1. 使用 git revert git revert 命令会创建一个新的提交&#xff0c;这个提交会撤销指定提交的更改。这通常用于公共分支&#xff08;如 main 或 master&#xff09;&#xff0c;因为它不会重写历史。 git revert HEAD # 撤销最近的提交 # 或者指定一个特定的提交哈希值 …

MFC GDI绘制卡通人物

文章目录 主要代码完整visual studio工程下载主要代码 // DrawFrogView.cpp : implementation of the CDrawFrogView class //#include "stdafx.h" #include "DrawFrog.h"#include "DrawFrogDoc.h" #include "DrawFrogView.h"#includ…

MySQL的DML语句

文章目录 ☃️概述☃️DML☃️添加数据☃️更新和删除数据☃️DML的重要性 ☃️概述 MySQL 通用语法分类 ● DDL: 数据定义语言&#xff0c;用来 定义数据库对象&#xff08;数据库、表、字段&#xff09; ● DML: 数据操作语言&#xff0c;用来对数据库表中的数据进行增删改 …

【源码】人力资源管理系统hrm功能剖析及源码

eHR人力资源管理系统&#xff1a;功能强大的人力资源管理工具 随着企业规模的不断扩大和业务需求的多样化&#xff0c;传统的人力资源管理模式已无法满足现代企业的需求。eHR人力资源管理系统作为一种先进的管理工具&#xff0c;能够为企业提供高效、准确、实时的人力资源管理。…

鞋子分类数据集17399张69类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;17399 分类类别数&#xff1a;69 类别名称:[“0”,“1”,“2”,“3”,“4”…

使用asyncua模块的subscribe_data_change监控opcua的Server节点数据变化

报错信息如下&#xff1b; ERROR:asyncua.common.subscription:DataChange subscription created but handler has no datachange_notification method 上述报错原因在于创建监控句柄SubscriptionHandler类时&#xff0c;节点数据变化的函数名称有问题&#xff0c;不是默认的da…

复盘最近的面试

这个礼拜一直在面试&#xff0c;想着看看能否拿到不错的offer前去实习&#xff0c;从周一到周四&#xff0c;面了将近10家&#xff0c;特整理此份面经&#xff0c;希望对秋招的各位有所帮助 A公司 一面 面试官人很好&#xff0c;我回答的时候不会他会笑笑然后提醒我 自我介绍~…

Docker(三)-Docker常用命令

1.run run命令执行流程:2.帮助启动类命令 2.1 启动docker systemctl start docker2.2 停止docker systemctl stop docker2.3 重启docker systemctl restart docker2.4查看docker状态 systemctl status docker2.5开机启动 systemctl enable docker2.6查看docker概要信息 …

Spring MVC拦截器、文件上传和全局异常处理

目录 1.拦截器1.1.什么是拦截器&#xff1f;1.2 拦截器的API1.3 拦截器的执行顺序1.5 自定义拦截器1.5 登录拦截器案例 2.文件上传2.1 添加依赖2.2 配置文件上传解析器2.3 编写控制器2.4 编写jsp页面2.5 注意事项 3.全局异常处理器3.1 异常处理思路3.2 创建异常处理器3.3 编写异…