前段学习 02css

最新推荐文章于 2024-10-02 15:35:50 发布

gencin

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量119

点赞数

分类专栏：前端技术文章标签： css css基础前端前端基础

本文链接：https://blog.csdn.net/qq_40202104/article/details/96457510

版权

前端技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.选择器

样式需要作用于哪些标签

元素选择器

标签选择器
通配符选择器（*）
ID选择器
Class选择器

/*
			1.元素选择器
			p{
				color: green;
			}
			*/
			/* 
			2.通配符选择器 
			*{
				color: green;
			}
			 */
			
			/* 
			3.class选择器 (可以重复) 常用
			
			.c1{
				color: green;
			}
			
			 */
			
			/* 
			 4. id选择器（重要且常用）
			 id 一定不能重复
			 */
			#mytitle{
				color: red;
			}

优先级：

行内样式> ID选择器 > class选择器 >通配符选择器

层级选择器

包含选择器

E F 选择E元素下的所有F元素（包含孙子元素）

子选择器

E>F 选择E元素下的直接子元素F

相邻选择器

E+F 选择E元素后的近邻的一个F元素

属性选择器

元素包含attr属性
元素包含attr属性，并且属性值等于val
元素包含attr属性，并且属性值以val开头
元素包含attr属性，并且属性值以val结尾
元素包含attr属性，并且属性值包含 val

/* 属性选择器 */
			/* 1.选择带有name属性的元素 */
			/* [name]{
				color: red;
			} */
			
			/* 2.选择带有name属性并且属性值为name1 的元素
			 */
			/* [name='name1']{
				color: red;
			} */
			
			/* 3.选择带有name属性并且属性值以name1 开头的元素
			 */
			/* [name^='na']{
				color: red;
			} */
			
			/* 4.选择带有name属性并且属性值以1 开头的元素 */
			/* [name$='1']{
				color: red;
			} */
			
			/* 5.选择带有name属性并且属性值包含1的元素 */
			[name*='1']{
				color: red;
			}

组合选择器

将样式同时应用到多个选择器

E,F,G,H{样式}

01.CSS

1.常用样式

1.1.背景

略

1.2.文本、字体

略

1.3.链接

略

1.4.列表

略

2.盒子模型

CSS 框模型 (盒子模型) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

[外链图片转存失败(img-hey6BNjL-1563456656294)(D:\淮北短训\day02\课件\assets\ct_boxmodel.gif)]

2.1.边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

2.2.内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

2.3.外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

简单来说，外边距其实就是控制当前元素与其他元素或者父元素之间的间距

3.CSS定位（布局）

CSS 定位 (Positioning) 属性允许你对元素进行定位。 能够通过CSS定位控制元素的位置

CSS布局分为定位与浮动

3.1.定位

补充：

一切皆为框

HTML元素一般常规分为两种元素：行内元素（内联元素）、块级元素

行内元素：该类型的元素的宽高是有内容撑开的，所以一般情况下不能设置宽高，在布局的时候不会换行

img input span a…

块级元素：该类型的元素能够设置宽高属性，并且在布局的时候会自动换行

div p h1-h6 ul ol li…

行级元素与块级元素的转换？

行级元素->块级元素 display:block

块级元素->行级元素 display: inline;/* 以行级元素展现 */

display: inline-block; 既能拥有块级元素设置宽高的能力，又能不换行

display: none; 隐藏元素

普通流

块级元素从上到下依次布局，行级元素在一行内水平布局

相对定位

相对于原来位置进行布局，设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			#mydiv1{
				background-color: red;
				/* 相对布局 */
				position: relative;
				/* 偏移距离 */
				left: 100px;
				top: 100px;
			}
			#mydiv2{
				background-color: #9ACD32;
			}
		</style>
	</head>
	<body>
		<div id="mydiv1">
			
		</div>
		
		<div id="mydiv2">
			
		</div>
	</body>

绝对定位

设置为绝对定位的元素框从文档流完全删除(原有空间不保留)，并相对于其包含块（父元素）定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框（绝对布局后产生的元素一定是一个块级元素），而不论原来它在正常流中生成何种类型的框。

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			#mydiv1{
				background-color: red;
				position: absolute;/* 绝对布局 */
				/* z-index: -1; */
				top: 100px;
				left: 100px;
				width: 100px;
				height: 100px;
				
			}
			#mydiv2{
				background-color: #9ACD32;
			}
		</style>
	</head>
	<body>
		<span id="mydiv1">
			
		</span>
		
		<div id="mydiv2">
			
		</div>
	</body>