《web前端代码指引》

最新推荐文章于 2024-09-13 17:21:46 发布

温柔鬼ᝰ

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量111

点赞数 1

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/ADmawanlei/article/details/113918308

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5+CSS用来做网页：静态网页动态网页（交互）：
JavaScript（js）人发起的动作
web开发的标准：HTML（结构），CSS（样式），
JavaScript（行为）分开写

web标准
结构：HTML
样式：CSS
行为：JavaScript

www：world wide wed，万维网
HTTP：超文本传输协议（hyperText Transfer Protocol）
HTTPS：加密传输
.com（商业性） .cn（中国的） .edu（教育类别）
超文本：除了文字，还有音乐，图片，视频，超越文本限制
超级链接：从一个文件链接到另一个文件

网页：.HTML为后缀，用浏览器显示
HTML：hypertext makeup language超文本标记语言

%temp%

声明文档类型2为html 字符编码手指浩南撒币网页标题头网页主体部分开始 hello world! 网页主体根元素结束

网页：都是由标签和内容组成
标签用<>括号包起来
双标签：<标签开始>内容</标签结束>
单标签：<标签开始标签的属性或样式/>
注释标签：
段落标签：<p></p>
标题标签：
<h1></h1>---<h6></h6>


<a href="http://www.baidu.com">百度一下</a>

input：输入 type：类型 text：文本 password：密码 radio：多选一 name：名字 checkbox:复选框 select：选择 optgroup：选项组多行文本：文本域，textarea placeholder：提示文本 button：按钮 submit：提交 reset：重置表单域,表单标签<form></form>,提示信息，表单控件

表格：table
边框：border
像素：px
表格之间的距离：cellspacing
表格到文字之间的距离：cellpadding

数据单元格table data：
css:cascadiing style sheet 层叠样式表、级联样式
作用：美化网页，整理网页结构。
三种方式：
1，内联样式：在开始标签里用style属性来书写
2，内部样式：用

coor：rog green blue
font-sizs :24px 35px
冗余代码
class.类选择器

类选择器：
样式点（.）定义
结构类（class）调用一个·或多个
开发常用

ID选择器：
样式#好定义，结构ID只能调用一次，别人勿用

版心：大盒子
background-color:（背景颜色）
solid（实线）dashed（虚线） dotted（点线）
padding（内边距）
padding-top（上内边距）
方位词：top（上）
方位词：left（左）
方位词：right（右）
方位词：bottom（下）

盒子的元素：内容（content）
内边距（padding）
边框（border）
外边距（margin）
auto：自动
给左右的外边距添加auto,盒子水平居中
margin：auto
相邻两个盒子外边距合本成一个值（最大值）
解决：只给其中一个盒子设置margin
嵌套两个盒子外边距塌陷，合并成一个值（最大的值） p’
解决：
1，给父盒子加边框、
2，给父盒子加内边距
3，overflow：hidden；

浮动:用来布局网页，脱标（脱离标准流）
标准流：按照标签规则来排序
RGBA（0,0,0，.5(透明度)）脱标：后面的布局会受影响。
浮动的盒子会
取消浮动的方法:给父盒子添加:overflow:hidden

<html>
	<head>
		<meta charset="utf-8" />
		<title>黄鼠狼撒刁</title>
		<style>
			
			/* 浮动的盒子会脱标 */
			.box{
				/* width: 1010px;
				height: 52px; */
				
				background-color: aquamarine;
				border: beige 1px solid;
				margin: auto;
				/* overflow: hidden; */
				/* 1,取消浮动的方法:给父盒子添加:overflow:hidden */
			}
			.box div{
				float: left;
				width: 200px;
				height: 50px;
				background-color: darkblue;
				border: 1px solid #FFFFFF;
				margin: auto;
				
			}
			.box2{
				width: 1200px;
				height: 500px;
				background-color: #00008B;
			}
			/* 2,添加伪元素 */
			.clearfix::after{
				content: "";/* content:内容 */
				display: block;/* 转换成元素 */
				height: 0;
				clear: both;/* 清除两端浮动 */
				visibility: hidden; /*  显示状态为隐藏 */
			}
			/* 兼容IE6/7版本的浏览器 */
			.clearfix{
				*zoom: 1;
			}
			/* 添加双伪元素 */
			.clearfix:after,.clearfix::before{
				content: "";
				display: table;
			}
			.clearfix{
				*zoom: 1;
			}
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="box2"></div>
	</body>
</html>```


标准流+float+定位
定位：布局网页

p.box
.box>box2
.box>box$*10
.box>.box>.box
id的
#box

position（定位）: relative;相对定位 ,absolute(绝对定位),fixed固定定位
相对定位：
                1.不会脱标；
                2.以自己的位置为观测点
绝对定位：
                1，脱标；
                2，参考点；第一种大盒子没有加定位的时候，根据网页body来偏移；
第二种父盒子加了定位，就以父盒子为参考点来偏移
就以离得最近的加了定位的大盒子为参照
经典应用：大相小绝/子绝父相


权重
复合样式：
根据下列来计算
ID样式：100>类样式：10>标签：1
z-index：层叠等级
z-index: 数字(正数/负数/0)数值越小等级越低,默认为0



显示规则：显示模式

块元素：div
1，一行显示一个
2,可以设置宽度和高度
3，默认的宽度就是父元素的宽度
4，默认的高度就是内容的高度

行内元素：span
1，一行显示多个标签。
2，设置宽度和高度后无效。
3，默认的宽/高就是内容的宽/高

inline-block：行内块元素：input,img
1，一行显示多个
2，可以设置宽高

display:
切换元素的显示模式