今日学习内容

最新推荐文章于 2024-10-20 18:03:05 发布

又双叒叕778

最新推荐文章于 2024-10-20 18:03:05 发布

阅读量184

点赞数 1

文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_63943166/article/details/121591316

版权

文本的属性以及文本格式

文章构成需要多元因素的参与

字体大小
字体颜色
字体样式
行高
首行缩进
加粗，斜体
文本修饰
字符间距
背景颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.q{
		
		color: #FF0000;    /*字体颜色*/
		font:  italic   bold 20px 宋体;	 /*字体大小，斜体，加粗*/
		font-weight: 900px;		/*加粗*/
		font-variant: small-caps;	/*小型大写字母*/
		font-family: serif;	/*字体分类*/
		line-height: 80px;	 /*行高*/
		text-transform: none;    /*文本大小写*/
		text-decoration: underline;	 /*文本修饰*/
		letter-spacing:0.5em ; /*字符间距*/
		word-spacing:20px ;	 /*单词间距*/
		text-align: justify; 	/*文本对齐*/
		text-indent: 2em; 	/*首行缩进*/
		</style>	
		
	</head
	<body>
	<p class="q">	
	我的故事更让人共同认定AAABBBCCCaabbccddee暗室逢灯就爱看你骄傲而反抗军阿非常小了由于要服务膏体王牌节目弗兰克为荣的分公司俄官方软件开挖面，在阿苏夫斯基的课程女明星地方要参数即可打不开参数L第四额日十分难看艰苦拉萨地热
	</p>	
	</body>
</html>

这是今天学习内容的归纳整理，学习很长时间了，总是找不到记笔记的方法，因为知识点都是运用在代码之间的，手写很消耗精力和时间，把知识点全写在电脑上确实很方便，但却不是很实用，在这里我分享一下我觉得比较好的的方法，在写代码的时候，多加一些注释，不要怕麻烦，理论与实践结合才是王道，不能为做笔记而做笔记，也不能为敲代码而敲代码！！

盒子模型

内容content—内边距padding—边框boder—外边距margin

盒子的大小由以上4个部分构成

边框/内边距/外边距宽度颜色样式
垂直外边距重叠

重叠条件:垂直方向外边距相邻

外边距相邻时取外边距的最大值

父子元素垂直方向外边距相邻，子元素的外边距会传递给父元素

选择外边距要考虑哪种选择方法对元素的影响最小

3.清除浏览器默认样式

令内边距/外边距=0


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.box1{
			background-color: beige;
			width: 100px;
			height: 100px;
			/* 边框属性：
			 边框宽度 border-width
			 边款颜色 border-color
			 边框样式 border-style
			 */
			border-width:10px 10px 20px 15px ;
			border-color: #FF0000 blue green yellow;  
			border-style: solid dotted double dashed; 
			/* 使用border-width可以分别指定四个边框的宽度
			border-width:10px 20px 30px 40px; 顺序 上右下左 顺时针
			border-width:10px 20px 30px;  顺序 上左右下
			border-width:10px 20px; 上下 左右
			border-width:10px;  上下左右都相同
			边款颜色 border-color
			边框样式 border-style同样适用
			border-top/bottom/left/right-width: 10px;
			border-top/bottom/left/right-color:red;
			border-top/bottom/left/right-sytle:solid;
			边框样式 border-style
				none  无边框
				 solid 实线
				dotted 点状
				dashed  虚线
				double  双实线
				
				
			border简写制定同时指定四个边 无顺序问题
			border:red solid 10px;
			只设置一条边 border-left:red solid 10px;
			设置三条边 border:red solid 10px;
					  border-right:none;
					  
			padding/margin用法同border
			左右外边距=0 即子元素水平居中
			margin:0 auto;
			magin-left:auto;
			margin-right:auto;
			*/
			
			
			 
		}
		
		</style>
	</head>
	<body>
		<div class="box1"></div>
		
	</body>
</html>

继续码字了，冲冲冲！