首页 > 其他分享 >2024蓝旭第二周预习

2024蓝旭第二周预习

时间:2024-03-30 14:59:47浏览次数:17  
标签:margin 元素 预习 边框 2024 蓝旭 element border left

 (1).什么是伪类和伪元素?

伪类和伪元素是用来修饰不在文档树中的部分
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。
伪元素用于创建一些不在文档树中的元素,并为其添加样式。

CSS伪类

伪类用于表示元素的某种状态,主要有操作状态,选择器状态以及表单状态几种
常见的形式是单冒号: 表示伪类。

一.操作状态伪类

操作状态伪类大致分为两种:

1.用于链接<a><a>标签</a>的伪类

2.用于输入框input获取焦点的伪类。
 

1.用于链接的伪类

1.`:link`:链接未被点击及未被鼠标悬停时;
2.`:hover`:鼠标悬停在元素上时;
3.`:active`:链接被点击时;
4.`:visited`:链接被点击后;

2.用于输入框获得焦点的伪类

:focus伪类用于当输入框input获取焦点时触发的样式

二.选择状态伪类

与type有关的选择器状态伪类和与child有关的选择器状态伪类

type有关的选择器状态伪类有如下五种:

element:first-of-type:选择父元素下的第一个类型为element的元素;
element:last-of-type:选择父元素下的最后一个类型为element的元素;
element:nth-of-type(n):选择父元素下的第n个类型为element的元素;
element:nth-last-of-type(n):选择父元素下的倒数第n个类型为element的元素;
element:only-of-type:选择父元素下的唯一的类型为element的元素。

E.G:

element:last-fo-type:

结果:

与child有关的选择器状态伪类有如下五种:

element:first-child:选择父元素下的第一个类型为element的元素,若该元素不是element类型,则选择失败;
element:last-child:选择父元素下的最后一个类型为element的元素,若该元素不是element类型,则选择失败;
element:nth-child(n):选择父元素下的第n个类型为element的元素,若该元素不是element类型,则选择失败;
element:nth-last-child(n):选择父元素下的倒数第n个类型为element的元素,若该元素不是element类型,则选择失败;
element:only-child:选择父元素下的唯一的类型为element的元素,若该元素不是element类型,则选择失败。

E.G:

element:last-child:

CSS伪元素


伪元素用于给元素添加指定的内容或修改部分样式,如使用伪元素::before或::after可以给元素的前后位置添加内容,这种伪元素叫做添加内容伪元素;使用::first-letter或::first-line可以给元素内容文本的第一个字母或第一行文字修改样式,这种伪元素叫做修改样式伪元素。

添加内容类伪元素

对于添加内容伪元素::before::after,其关键点在于content属性,content属性表示添加在元素之前或之后的内容,该属性可以为文本内容或外部图片资源。除此之外,可以像对待普通元素一样给这类伪元素添加样式。

E.G:

::after:

修改样式类伪元素

修改样式伪元素相较于添加内容伪元素来说更为简单,修改样式伪元素如::first-letter和::first-line只能够修改文本属性、背景属性、内外边距属性和文本装饰属性,并不会像::before::after一样添加内容。

E.G:

::first-letter:

(2).关系选择器

一、关系选择器是什么?

关系选择器是能够根据其它元素的关系选择适合的元素选择器。关系选择器分为子元素选择器、后代选择器、下一个兄弟选择器、下面所有兄弟选择器。

1.子元素选择器

作用:通过指定的父元素找到指定的子元素

语法:父元素>子元素{}

E.G:

 

 2.后代选择器

作用:通过指定的祖先元素找到指定的子元素

语法:父元素  子元素{}(父元素和子元素中间空格)

E.G:

 

3.下一个兄弟选择器

作用:选择与当前元素紧挨着的下一个同级元素

语法:兄+第{}

 4.下面所有兄弟选择器

作用:选择当前元素下的所有同级元素

语法:兄~弟{}

(3).css布局 

 主要的布局方式有 table 表格布局(早期),float 浮动布局、position布局和 flex 布局。

1、两栏布局

指的是左边固定,右边自适应。

 

1.1 浮动 + margin

先将左元素设置定宽为100px,并左浮动。
然后给右元素设置margin-left,值等于左元素的宽度。

E.G:

 

1.2 浮动 + BFC(overflow: hidden)

触发BFC后,右元素就会环绕着浮动的元素,不会被浮动的元素所覆盖。

E.G: 

1.3 定位 + margin-left

先给父元素设置position: relative、左子元素设置position: absolute,然后给左子元素设置left: 0
并设置宽度,然后给右子元素设置 margin-left,值等于左子元素的宽度。

 E.G:

1.4 给父容器设置flex布局,左盒子固定宽度,然后给右子元素设置 flex: 1。

E.G:

1.5 table布局

E.G:

2、三栏布局

顾名思义就是两边固定,中间自适应。

2.1 float布局 

E.G:

2.2 position布局

E.G:

2.3 flex布局

E.G:

2.4 table布局

E.G:

2.5 网格(gird)布局:

E.G:

(4).盒子模型

盒子模型用四个边界描述:margin (外边距), border (边框),padding (内边距),content (内容区域)

盒子模型中最内部分及content 所占高度由height属性决定,内容所占宽度由width属性决定,包围内容的是padding,内边距指显示的内容与边框之间的间隔距离,并且会显示内容的背景色或背景图片,包围内边距的是边框( border),边框以外是外边距( margin),外边距指该盒子与其他盒子之间的间隔距离。如果设定背景色或者图像,则会应用于由内容和内边距组成的区域。

外边距

外边距指盒子模型的边框与其他盒子之间的距离,使用margin属性定义。

margin的默认值是0。外边距没有继承性,也就是说给父元素设置的margin值并不会自动传递到子元素中。

margin该属性可以有1- 4个值,表示的含义
(1) margin: 20px; //表示4个方向的外边距都是20px
(2) margin: 20px 5px; //表示上下外边距是20px,左右外边距是5px
(3) margin: 10px 5px 15px; //表示上外边距是10px,左右外边距是5px,下外边距是15px
(4) margin: 10px 5px 15px 20px; //表示上外边距是10px,右外边距是5px,下外边距/是15px,右外边距是20px
四个外边距的顺序从上开始,按照顺时针方向设置。

也能使用margin-top、margin-right、 margin-bottom和margin-left四个属性对上外边距、右外边距、下外边距和左外边距分别设置。
margin外边距合并有以下原则:

(1)块级元素的垂直相邻外边距会合并,且其垂直相邻外边距合并之后的值为上元素的下
外边距和下元素的上外边距的较大值。
(2)行内元素实际上不占上下外边距,行内元素的左右外边距不会合并。
(3)浮动元素的外边距不会合并

 E.G:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>盒子模型</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			color: #f68d8d;
			height: 200px;
		}
		.center{
			float: left;
			width: 100%;
		}
		.center .content{
			margin: 0 210px 0 110px;
			background: rgb(229, 201, 147);
		}
		.left{
			float: left;
			width: 100px;
			margin-left: -100%;
			background: rgb(133, 200, 133);
		}
		.right{
			float: left;
			margin-left: -200px;
			width: 200px;
			background: green;
		}
	</style>
</head>
<body>
	<div class="center">
		<div class="content">center</div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
</body>
</html>

 CSS边框 

元素的边框( border )是围绕元素内容和内边距的一条或多条线。CSS中使用border属性设置元素边框的样式、宽度和颜色。格式如下:

border:宽度 样式 颜色;

CSS边框的属性及说明:

  • border:把针对四条边的属性设置在一个声明中
  • border-style:设置元素所有边框的样式,或者单独为各边设置边框样式
  • border-width:用于为元素的所有边框设置宽度,或者单独为各边框设置宽度
  • border-color:设置元素的所有边框中可见部分的颜色,或为四条边分别设置颜色
  • border-bottom:用于把下边框的所有属性设置到个声明中
  • border-bottom-color:设置元素的下边框的颜色
  • border-bottom-style:设置元素的下边框的样式
  • border-bottom-width:设置元素的下边框的宽度
  • border-left:简写属性,用于把左边框的所有属性设置到一个声明中
  • border-left-color:设置元素的左边框的颜色
  • border-left-style:设置元素的左边框的样式
  • border-left-width:设置元素的左边框的宽度
  • border-right:简写属性,用于把右边框的所有属性设置到一个声明中
  • border-right-color:设置元素的右边框的颜色
  • border-right-style:设置元素的右边框的样式
  • border-right-width:设置元素的右边框的宽度
  • border-top:简写属性,用于把上边框的所有属性设置到一个声明中
  • border-top-color:设置元素的上边框的颜色
  • border-top-style:设置元素的上边框的样式
  • border-top-width:设置元素的上边框的宽度

  • 例:把一幅图片的边框定义为outset样式

a:link img{
    border-style:outset;
}


边框样式:

  • none:定义无边框
  • hidden:与none相同。但应用于表时除外,对于表,hidden用于解决边框冲突
  • dotted:点状边框。在大多数浏览器中呈现为实线
  • dashed:定义虚线。在大多数浏览器中呈现为实线
  • solid:定义实线
  • double:定义双线。双线的宽度等于border-width的值
  • groove:定义3D凹槽边框。其效果取决于border-color的值
  • ridge:定义3D垄状边框。其效果取决于border-color的值
  • inset:定义3Dinset边框。其效果取决于border-color的值
  • outset:定义3Doutset边框。其效果取决于border-color的值


边框的宽度可以通过border-width属性指定。

为边框指定宽度有两种方法:可以指定长度值:例如5px;或者使用3个关键字,分别是thin、medium (默认值)和thick。

在CSS中使用border-color属性来设定边框的颜色。一次最多4个颜色值。 该属性可以使用任何类型的颜色值。

例:

a1{
    border-style: solid;
    border-color: red rgb(25%,35%,45%) #00ff00 blue;}

E.G: 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		p{
			border: medium double rgb(234, 161, 235);
		}
		p.soliddouble{
			border-width:10px ;
			border-style: solid double;
			border-top-color: rgb(171, 171, 243);
		}
	</style>
</head>
<body>
	<p>我的精神状态良好</p>
	<p class="soliddouble">有时候可能不太好</p>
</body>
</html>

 

一些特殊形状:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		#box{
			
			width: 600px;
		}
		#box div{
			float: left;
			margin: 10px;
			
		}
		.square{
			width: 100px;
			height: 100px;
			background: #669;
		}
		.rectangle{
			height: 100px;
			width: 200px;
			background: #669;
		}
		.trapezoid{
			border-bottom: 100px solid #669;
			border-left: 50px solid  rgb(229, 153, 153);;
			border-right: 50px solid rgb(229, 153, 153);;
			width: 100px;
			height: 0;
			background: #669;
 
		}
		.parallelogram{
			width: 150px;
			height: 100px;
			transform: skew(-20deg); 
			margin-left: 20px;
			background: #669;
		}
		.triangle-up{
			width: 0px;
			height: 0;
			border-left: 50px solid rgb(229, 153, 153);
			border-right: 50px solid rgb(229, 153, 153);
			border-bottom: 100px solid rgb(169, 169, 200);
		}
		.circle{
			width: 100px;
			height: 100px;
			border: 20px solid #669;
			background: rgb(229, 153, 153);;
			border-radius: 100px; 
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="square"></div>
	  	<div class="rectangle"></div>
		<div class="trapezoid"></div>	
		<div class="parallelogram"></div>
		<div class="triangle-up"></div>
		<div class="circle"></div>
	</div>
	
</body>
</html>

内边距

内边距指盒子模型的边框与显示内容之间的距离,使用paddig属性定义。

例如:设置h1元素的各边都有10像素的内边距

h1 {padding: 10px;}
例如:按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值。

h1 {padding: 5px 6px 7px 8px;}
同样也可以通过padding-top、padding -right、padding-bottom、 padding-left四个单独的属性,分别设置上、右、下、左内边距。

 

(5).调试CSS

  1. 添加工作目录
  2. 建立文件映射
  3. 编辑CSS文件或者使用样式面板修改样式
  4. 保存CSS文件

标签:margin,元素,预习,边框,2024,蓝旭,element,border,left
From: https://blog.csdn.net/yuenshige2huo/article/details/137170082

相关文章

  • 2024.3.30 笔记
    AcWing372.棋盘覆盖设每个格子为\((i,j)\)\(i+j\)为偶数和\(i+j\)为奇数的点的两个集合构成二分图的两个点集,和为偶数的边的四周全是和为奇数的点,满足二分图的性质,题目即求以和为偶数和奇数的点构成的二分图的最大匹配constintdx[]={0,0,1,-1};constintdy[]=......
  • 都2024了,Android凉了吗?
    前言作为Android开发人员,经常会看到类似的问题:Android凉了没?Android开发前景如何?其实并不是Android凉了,而是技术不过硬的Android凉了Android不仅现在没凉,在未来的很长一段时间也都不会凉的Android手机的市场占有率全球榜首是毋庸置疑的,而除了手机系统,像电视盒子、......
  • 2024-03-30:用go语言,集团里有 n 名员工,他们可以完成各种各样的工作创造利润, 第 i 种工
    2024-03-30:用go语言,集团里有n名员工,他们可以完成各种各样的工作创造利润,第i种工作会产生profit[i]的利润,它要求group[i]名成员共同参与,如果成员参与了其中一项工作,就不能参与另一项工作,工作的任何至少产生minProfit利润的子集称为盈利计划,并且工作的成员总数最多为......
  • 2024.3.29 模拟赛总结
    贤者之石T435273思路:一维线性DP,dp[i]表示以i结尾的最大值,dp[i]=max(1,dp[sqrt(i)]+1);琪露诺的位运算教室T435274思路:数论题,尝试打表,a[i][j]为i&j是否大于等于i^j。1000000000001100000000011000000000001111000000......
  • CrossOver2024最新免费版虚拟机软件 Mac和Linux系统上运行Windows 应用/游戏 CrossOve
    CrossOver是一款由CodeWeavers公司开发的,运行在Mac和Linux操作系统下,能够模拟Windows系统应用运行环境的软件。它不需要用户单独安装Windows操作系统,就能让Windows平台上的应用程序在Mac和Linux上顺畅运行。CrossOver在技术上使用了Wine(Windows模拟器)的代码,通过提供一个兼容层,......
  • 新增文章参数校验-2024-3-29
    用到validation自定义校验packagecom.di.bigevent.pojo;importcom.di.bigevent.anno.State;importjakarta.validation.constraints.NotEmpty;importjakarta.validation.constraints.NotNull;importjakarta.validation.constraints.Pattern;importlombok.Data;imp......
  • 20240328
    续昨天。T8洛谷P4150最短路问题行数很小,考虑使用矩阵。对于一个区间\([l,r]\),维护\(ll_{i,j},rr_{i,j},lr_{i,j}\)分别表示\((i,l)\rightarrow(j,l)\)、\((i,r)\rightarrow(j,r)\)、\((i,l)\rightarrow(j,r)\)的最小代价。为了转移方便,再维护\(lm_{i......
  • 20240329打卡
    第五周第一天第二天第三天第四天第五天第六天第七天所花时间20h4h4h2h3h代码量(行)877164371214478博客量(篇)11111知识点了解navigation路由配置,jetpackcompose组件运用,容器封装第一次结对作业开始Web搓后端ing~完成了大部分个人W......
  • 2024.3.29
    2024.3.29【人总是贪婪的,就像最开始,我也只是想知道你的名字。】Friday二月二十P2534AHOI2012铁盘整理//2024.3.29//bywhite_ice#include<bits/stdc++.h>usingnamespacestd;#defineitnintconstintoo=20;itngif(itnx){returnx<0?-x:x;}intn;itnst......
  • 2024-03-29
    2024-03-29LOG对于小于等于\(s\)的数\(x\),最多被选\(x\)次大于\(s\)的数最多被选\(s\)次看所有小于等于\(s\)的数字的和加上\(s\)乘大于\(s\)的数字的个数这个值是不是大于等于\(c\timess\)就行离散化之后权值线段树维护一下离散化之后线段树右边界应该......