静态网页制作前夕小记录

最新推荐文章于 2024-02-18 22:49:27 发布

是数学系的小孩儿

最新推荐文章于 2024-02-18 22:49:27 发布

阅读量118

点赞数 1

分类专栏：前端学习记录文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_51082388/article/details/120470437

版权

前端学习记录专栏收录该内容

31 篇文章 0 订阅

订阅专栏

定义和用法

display 属性规定元素应该生成的框的类型。

说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

使段落生出行内框：

p.inline
  {
  display:inline;
  }

值描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似

），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似

），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似）。
table-row 此元素会作为一个表格行显示（类似）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似）。
table-column 此元素会作为一个单元格列显示（类似）
table-cell 此元素会作为一个表格单元格显示（类似

）
inherit 规定应该从父元素继承 display 属性的值。
和	） table-caption 此元素会作为一个表格标题显示（类似


<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>

<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来！</p>

<div>div 元素的内容不会显示出来！</div>
</body>
</html>

border盒子边框

div{width:100px;
height=:100px;
border:1px solid black;
border-width:10px;
border-style:dotted;
border-color:red;}`
border-style:dotted;
后边的覆盖前边的

border-left:10px solid red；
border-left-width:;

文本对齐方式

div{text-align:center;}

css只有块注释/**/

div{text-align:center;
/*danhang文本行高(行间距)*/
line-height:20px;
}

padding盒子空边距
。
给文本加空格：
text-indent首行缩进

div{
text-indent;}

1m cm mm nm um 绝对

px像素一个像素点只能有一个颜色点，屏幕分辨率：每英寸屏幕能容纳的像素点数，越多越高，相对的。

em相对的1em=1font-size;=16px;
通用字体高等于宽

div{
text-indent;
line-height:  ;}
```行高
# 划线<del></del>

```css
span{
text-decoration:line-through;
text-decoration:none ;没有线

}

下划线&控制鼠标样式

span{
text-decoration:underline;
color：rgb(0,0,238)
cursor:help;
cursor:pointer;
/*用的时候去搜*/
}

上划线

overline

伪类选择器

看起来是动态的,鼠标放上的时候变颜色

a:hover{
back-ground:red;
}

[href]:hover{
back-ground:red;
color:green;
font-size:20px;
font-weight:bold;
font-family:arial;
border-radius:10px;
text-align:decoration:none;
}

query搜索

标签归类

1行级元素、内联元素inline

feature：内容决定元素所占位置，不可以通过CSS改变行高<span></span> strong em a del

2块级元素block

feature;独占一行，可以通过CSS改变行高
<div></div> p ul li ol form address

行级块元素

feature：内容

<img src="">

img{width:100px;
}

三类的display

可以更改他的属性

span{display:inline;}
div{display:block;}
img{display:inline-block;}

凡是带有inline的都带有文字特性（分割）

margin元素和元素之间的空隙

语法：固定

小白式开发：先写HTML，后写CSS一个一个的

先定义功能，后选择想要的样式

自定义标签，初始化标签

通配符:初始化所有标签

*{
padding:0;
list-style:0;
}

盒模型

盒子组成部分

盒子壁border
盒子内边距padding
盒子内容width+height

盒子模型
在这里插入图片描述

<div></div>
div{
border:10px;
padding:0;
height:100px;
width:100px;
margin:10px;}

盒子，逆时针方向padding四个值

padding——top
padding-left

盒子模型计算

margin不算盒子的,body有固定的8px的margin

远视图

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="practice.css">
	</head>
	<body>
		<div class="wrapper1">
		<div class="wrapper2">
		<div class="wrapper">
			<div class="box">
		    <div class="content">
			<div class="content1">
			</div>
		</div>
		</div>
		</div>
		</div>
		</div>
	</body>
</html>


.wrapper{
	width:50px;
height=:50px;
background-color: darkgreen;
padding: 100px;
padding:10px;
}
.wrapper1{
	width:200px;
height=:200px;
background-color: darkgreen;
padding: 100px;
padding:10px;
}
.wrapper2{
	width:150px;
height=:150px;
background-color: white;
padding: 100px;
padding:10px;
}
.content{
	width:10px;
height=:10px;
padding:10px;
background-color:darkgreen;
}
.content1{
	width:10px;
height=:10px;
background-color:white;
}
.box{
	width:30px;
	height:30px;
	background-color: white;
	padding:10px;
}

小bug

margin空开元素和元素

定位position

absolute绝对定位，left,top,相对于最近的父级定位，如果没有就相对于文档定位
relative相对于自己原来的位置定位
fixed广告


.content1{
	position: absolute;
	left:200px;
	top:300px;
	right:100px;
	width:50px;
	bottom: 100px;
height=:50px;
background-color: darkgreen;
padding: 100px;
}

初始化它

*{
	margin: 0;
padding: 0;}

层模型

absolute
relative保留原来位置进行定位

absolute：脱离原来的位置,联想立交桥，透明度
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="practice.css">
	</head>
	<body>
	
			<div class="content1">
				
				<div class="content2">
					
					<div class="content3">
					</div>
				</div>
			</div>
		
</html>

*{
	margin: 0;
padding: 0;}
.content1{
	/*position: absolute;
	left:200px;
	top:300px;
	right:100px;
	width:50px;
	bottom: 100px;*/
	margin-left: 100px;
height:200px;
width:200px;
background-color: darkgreen;
padding: 100px;
}
.content2{
	/*position: absolute;
	left:200px;
	top:300px;
	right:100px;
	width:50px;
	bottom: 100px;*/
	margin-left: 100px;
height=:100px;
background-color:orange;
padding: 100px;
}
.content3{
	/*position: absolute;
	left:200px;
	top:300px;
	right:100px;
	width:50px;
	bottom: 100px;*/
height:50px;
background-color:red;
width: 50px;
}

在这里插入图片描述

参照物relative，定位absolute

在这里插入图片描述

.content3{
	/*position: absolute;
	left:200px;
	top:300px;
	right:100px;
	width:50px;
	bottom: 100px;*/
height:50px;
left:50px;
background-color:pink;
width: 50px;
left: 0;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;


}

居中

div{
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
background-color:red;
}

<br>滚动条

是数学系的小孩儿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
静态网页制作前夕小记录

定义和用法display 属性规定元素应该生成的框的类型。说明这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。使段落生出行内框：p.inline { display:inline; }值描述none 此元素不会被显示。block 此元素将显示为块级元素，此元素前后会带
复制链接

扫一扫