HTML学习

最新推荐文章于 2024-01-05 16:53:29 发布

CondyMr

最新推荐文章于 2024-01-05 16:53:29 发布

阅读量275

点赞数

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

本文链接：https://blog.csdn.net/I_am_Cody_/article/details/80041222

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.div布局，css控制

用div给网页整体布局（整体布局：把网页分成几部分），利用css对其进行样式控制

2.css浮动值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

3.clear属性值

left（清除左浮动的影响）,right（清除有浮动的影响）,both（清除左右浮动的影响）,none,inherit.

4.做田字格是，topleft,topright,footerleft,footerright，在footerleft中要先清除左浮动，然后再添加左浮动，

5.常见的错误

a.不加doctype--导致低版本的IE解释效果不一样

b.id不能是数字开头

c.文件编码与charset声明不一致

6.盒子模型

a.Margin(外边距,两个盒子之间的距离)：margin-top,margin-right,margin-bottom,margin-left（margin:0px 0px 0px 0px;）.

利用margin属性值atuomargin:auto; 这个是上右下左的值都是自适应的

Border(边框)

Padding(内边距）.padding属性与margin 属性相似

b.border属性

三要素：宽（像素），样式(

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

），颜色

例如:

Border:10px solid red;//10px实线红色

也可以单个设置border属性值。

Border-width:10px;

Border-style:thin;

Border-color:red;

可以设置某个方向的边框

Border-top:10px solid red;

Border-left,border-bottom,border-top.

用css控制div边框，画一个三角形

transparent	默认值。边框颜色为透明。
inherit	规定应该从父元素继承边框颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 1000px;
				height: 1000px;
				background: green;
			}
		#trip{
			width: 0;
			height: 0;
			border-top:100px solid red ;
			border-right: 100px solid transparent;
			border-bottom: 100px solid transparent;
			border-left: 100px solid transparent;
		}
		</style>
	</head>
	<body>
		<div>
		<div id="trip"></div>
		</div>
	</body>
</html>

用css，div制作一个圣诞树

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 1000px;
				height: 1000px;
				background: green;
			}
		#trip{
			width: 0;
			height: 0;
			border-top:0px solid transparent ;
			border-right: 100px solid transparent;
			border-bottom: 100px solid red;
			border-left: 100px solid transparent;
		}
		#bot{width: 20px;height: 50px;background: white;margin-left: 90px;}
		</style>
	</head>
	<body>
		<div>
		<div id="trip"></div>
		<div id="trip"></div>
		<div id="bot"></div>
		</div>
	</body>
</html>

盒子总结：

一个盒子，有margin,border,padding,content实占多少空间？

水平方向：margin-left+margin-right+border-left+border-right+padding-left+padding-right+width.

垂直方向： margin-top+margin-bottom+border-top+border-bottom+padding-top+padding-bottom+height.

CondyMr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

1.div布局，css控制用div给网页整体布局（整体布局：把网页分成几部分），利用css对其进行样式控制2.css浮动值值描述left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit规定应该从父元素继承 float 属性的值。3.clear属性值left（清除左浮动的影响）,right（清除有浮动的影响）,both（清除左右浮动的影...
复制链接

扫一扫